【无标题】vue webrtc 播放rtsp视频流

devtools/2024/9/25 10:33:20/

最近有个小活其中有涉及播放大华及海康摄像头视频流的需求,经调查发现可以使用webrtc来实现相关功能,记录一下,步骤如下:

1、下载webrtc :Releases · mpromonet/webrtc-streamer · GitHub

        winows下下载:webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz

2、js准备

  将下载包中html/libs文件夹下webrtcstreamer.js、adapter.min.js文件复制到VUE项目public目录中

VUE代码如下:

    <div class="coTitle">视频</div><video id='video' controls autoplay autobuffer muted preload='auto'style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'></video>
</script>
<script lang="js">
import {WebRtcStreamer} from './webrtcstreamer.js';
export default {name: 'index1',data() {return {webRtcServer: null}},mounted() {//video:需要绑定的video控件ID//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:8000')//需要查看的rtsp地址this.webRtcServer.connect('rtsp://192.169.0.1:9000/dss/monitor/param?cameraid=1000211%210&substream=1')},beforeDestroy() {this.webRtcServer.disconnect()this.webRtcServer = null},
}
</script>

3、首选运行 webrtc-streamer.exe 有的说不加参数CPU高,我的电脑上没加参数也不高,懒,没测试。不过运行 webrtc-streamer.exe 后有个黑框,我是自己写了个服务,如果webrtc没启动,就定时启动一下,这样播放的电脑上就没有黑框了。

4、完成上述 123步就可以正常播放,有一个关键问题特意说明一下:

海康的视频流会提示:Start playing sink for "video/H264" subsession

可能出现此问题的原因是 音视频在同一个流中
解决方法如下:
 

     //this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");var audioUrl="";var options="rtptransport=tcp&timeout=60";webRtcServer.connect(videoUrl,audioUrl,options);


http://www.ppmy.cn/devtools/33142.html

相关文章

神经网络与深度学习--网络优化与正则化

文章目录 前言一、网络优化1.1网络结构多样性1.2高维变量的非凸优化1.鞍点2.平坦最小值3.局部最小解的等价性 1.3.改善方法 二、优化算法2.1小批量梯度下降法&#xff08;Min-Batch&#xff09;2.2批量大小选择2.3学习率调整1.学习率衰减&#xff08;学习率退火&#xff09;分段…

Cache数据库的优缺点

Cache数据库的优缺点可以从多个方面进行评估,以下是对其优缺点的概述: 优点: 高性能:Cache数据库通常设计用于高速缓存和内存存储,这意味着数据访问速度非常快。对于需要快速响应和高吞吐量的应用,Cache数据库是理想的选择。 灵活性:Cache数据库支持多种数据结构(如哈…

synchronized关键字的底层原理

1synchronized关键字的底层原理 Monitor 举个例子&#xff1a; 1.线程1执行synchronized代码块&#xff0c;里面用到了lock(对象锁)。首先会让这个lock对象和monitor关联&#xff0c;判断monitor中的owner属性是否为null。如果为null直接获取对象锁。owner只能关联一个线程。 2…

使用request-try-notifyState流程实现UI控制与状态反馈的完整闭环

1. 前言 在Qt编程时&#xff0c;我们经常会在界面上添加一些按钮&#xff0c;当按钮被点击时&#xff0c;执行某段代码&#xff0c;例如显示一个对话框、关闭窗口&#xff0c;保存文件等等。 这种由UI控件触发某种信号&#xff0c;通过信号槽触发目的代码执行的场景非常多。这…

【Leetcode每日一题】 动态规划 - 简单多状态 dp 问题 - 打家劫舍 II(难度⭐⭐)(67)

1. 题目解析 题目链接&#xff1a;213. 打家劫舍 II 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 这个问题是经典的“打家劫舍”问题的变种&#xff0c;原问题是在单排房屋中进行偷窃&#xff0c;而这个问题则是在…

牛客NC275 和为S的两个数字【简单 map C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/390da4f7a00f44bea7c2f3d19491311b 思路 map参考答案C #include <vector> class Solution {public:vector<int> FindNumbersWithSum(vector<int> array, int sum) {vector<int> ans;m…

python爬虫实战

import requests import json yesinput(输入页数&#xff1a;) yesint(yes)headers {"accept": "application/json, text/plain, */*","accept-language": "zh-CN,zh;q0.9","content-type": "application/json",…

centos 杀死一个进程又启动了

在CentOS中&#xff0c;如果一个进程被杀死后又自动启动&#xff0c;可能是由于系统服务管理器&#xff08;如systemd或init&#xff09;配置了该进程的重启。以下是检查和处理这种情况的方法&#xff1a; 查找启动脚本&#xff1a; 使用systemctl查找服务文件&#xff1a;syst…