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

embedded/2024/9/21 10:33:45/

最近有个小活其中有涉及播放大华及海康摄像头视频流的需求,经调查发现可以使用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/embedded/33031.html

相关文章

华为机考入门python3--(22)牛客22- 汽水瓶

分类&#xff1a;数字 知识点&#xff1a; 整除符号// 5//3 1 取余符号% 5%3 2 题目来自【牛客】 import sysdef calc_soda_bottles(n):if n 0: # 结束输入&#xff0c;不进行处理returnelse:# 循环进行汽水换算total_drunk 0 # 记录总共喝了多少瓶汽水while…

深入理解分布式事务⑨ ---->MySQL 事务的实现原理 之 MySQL 中的XA 事务(基本原理、流程分析、事务语法、简单例子演示)详解

目录 MySQL 事务的实现原理 之 MySQL 中的XA 事务&#xff08;基本原理、流程分析、事务语法、简单例子演示&#xff09;详解MySQL 中的 XA 事务1、XA 事务的基本原理1-1&#xff1a;XA 事务模型图&#xff1a;1-2&#xff1a;XA 事务模型的两阶段提交操作&#xff1a;Prepare …

算法课程笔记——蓝桥云课第六次直播

&#xff08;只有一个数&#xff0c;或者因子只有一个&#xff09;先自己打表&#xff0c;找找规律函数就是2的n次方 异或前缀和 相等就抵消 先前缀和再二分

leetCode64. 最小路径和

leetCode64. 最小路径和 题目思路&#xff1a; 代码 class Solution { public:int minPathSum(vector<vector<int>>& grid) {int n grid.size();if(!n) return 0;int m grid[0].size();vector<vector<int>> f(n, vector<int>(m,INT_MAX))…

Mybatis Interview Question Summary

1. In best practice, usually an Xml mapping file will write a Dao interface corresponding to it. What is the working principle of the Dao interface? Can the methods in the Dao interface be overloaded when the parameters are different? Answer: The Dao in…

大语言模型教程与实践(开源)

1.简介 大语言模型&#xff08;Large Language Models, LLMs&#xff09;的兴起确实始于OpenAI在2018年发布的GPT&#xff08;Generative Pre-trained Transformer&#xff09;&#xff0c;这一开创性工作引领了自然语言处理领域的新纪元。随后&#xff0c;2022年底ChatGPT的横…

【Java EE】MyBatis使用注解操作数据库

文章目录 &#x1f340;参数传递&#x1f334;增(Insert)&#x1f338;返回主键 &#x1f343;删(Delete)&#x1f333;改(Update)&#x1f332;查(Select)&#x1f338;起别名&#x1f338;结果映射&#x1f338;开启驼峰命名(推荐) ⭕总结 &#x1f340;参数传递 需求: 查找…

uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程

一、创建uni-app项目 1. 安装HBuilder X&#xff0c;下载地址&#xff1a;https://www.dcloud.io/hbuilderx.html 2. 打开HBuilder X&#xff0c;点击左上角的“文件”->“新建”->“项目”&#xff0c;选择“uni-app”项目模板&#xff0c;填写项目名称和项目路径&…