webRtc播放rtsp视频流(vue2、vue3+vite+ts)

news/2024/12/22 20:18:07/

一、下载webRtc

开发环境用的win10版本的。

github上直接下载,速度感人。

Releases · mpromonet/webrtc-streamer · GitHub

提供资源下载,0积分

https://download.csdn.net/download/weiqiang915/87700892

二、启动,测试

webrtc-streamer.exe -o -H 0.0.0.0:9001

-o:无需转码,降低CPU

-H:指定端口号

 打开浏览器,输入 127.0.0.1:9001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264

 测试用的臻识C3相机的rtsp视频流。

到此,说明webRtc插件没问题。下面整合到Vue2、Vue3+vite中使用 。

三、vue2中使用webRtc

1、两个js文件放入public文件夹下。(js文件在下载的插件中找)

  

2、vue源码

<template><div><video id="video" autoplay width="900" height="900"></video></div>
</template><script>
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', location.protocol + '//192.168.10.26:9001')//需要查看的rtsp地址this.webRtcServer.connect('rtsp://192.168.10.112:8557/h264')},beforeDestroy() {this.webRtcServer.disconnect()this.webRtcServer = null},methods: {}
}
</script><style scoped></style>

四、vue3+ts+vite中使用webRtc

1、assets文件夹下放两个js文件(js文件在下载的插件中找)

2、index.html中引用js

 3.指定vue中使用

<video id="video" autoplay width="1050" height="1050"></video>//获取webRtc服务
const webRtcServer = ref<any>()
const initWebRtcServer = async () => {nextTick(() => {video:需要绑定的video控件ID//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000// webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:8000')webRtcServer.value = new WebRtcStreamer('video', `${location.protocol}//${webRtcServerIp.value}:8000`)//需要查看的rtsp地址webRtcServer.value.connect(`rtsp://${ipAddr.value}:8557/h264`)})
}
//页面销毁时销毁webRtc
const webRtcServerDis = computed(() => {webRtcServer.value.disconnect()webRtcServer.value = null
})调用initWebRtcServer()方法即可

4、打包注意事项

打包生成dist文件夹后,在文件内新建两个文件夹src\assets,用于存放两个js文件。否则会出现上线后webRtc无法实例化的情况。

 

 五、坑

1、控制台报错

Uncaught TypeError: Cannot set properties of null (setting 'srcObject')
    at WebRtcStreamer.onAddStream (webrtcstreamer.js:241:37)
    at pc.onaddstream (webrtcstreamer.js:152:40)
WebRtcStreamer.onAddStream @ webrtcstreamer.js:241
pc.onaddstream @ webrtcstreamer.js:152
webrtcstreamer.js:259 

 解决办法

 2、webRtc服务内存占用过高,启动时加 -o 参数。

3、Access to fetch at 'http://192.168.10.26:9001/api/getIceServers' from origin 'http://dpzn.cc:9230' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.
webrtcstreamer.js:45 
        GET http://192.168.10.26:9001/api/getIceServers net::ERR_FAILED

 解决办法:

浏览器输入:edge://flags/#block-insecure-private-network-requests

 


http://www.ppmy.cn/news/47044.html

相关文章

辉煌优配|刚刚!“中字头”再度爆发

今天早盘&#xff0c;A股全体持续震动收拾&#xff0c;上证50指数跌破2700点整数关口&#xff0c;沪深300亦失守4100点。 盘面上&#xff0c;国防军工、种业、中字头、电气设备等板块涨幅居前&#xff0c;前期抢手的人工智能、半导体、信创、软件服务等板块全线回调。北上资金净…

高效又稳定的ChatGPT大模型训练技巧总结,让训练事半功倍!

文&#xff5c;python 前言 近期&#xff0c;ChatGPT成为了全网热议的话题。ChatGPT是一种基于大规模语言模型技术&#xff08;LLM&#xff0c; large language model&#xff09;实现的人机对话工具。现在主流的大规模语言模型都采用Transformer网络&#xff0c;通过极大规模的…

腾讯新增长,AI扛大旗?

经历了疫情期间的低谷与波折&#xff0c;腾讯正在恢复它的活力。 3月22日&#xff0c;腾讯发布了2022年第四季度及全年财报。财报显示&#xff0c;2022全年营收为5546亿元人民币&#xff0c;归母净利润(Non-IFRS)为1156亿元人民币&#xff1b;2022年腾讯第四季度的营收为1450亿…

Python爬虫实战——获取电影影评

Python爬虫实战——获取电影影评 前言第三方库的安装示例代码效果演示结尾 前言 使用Python爬取指定电影的影评&#xff0c; 注意&#xff1a;本文仅用于学习交流&#xff0c;禁止用于盈利或侵权行为。 操作系统&#xff1a;windows10 家庭版 开发环境&#xff1a;Pycharm Co…

nginx 简介 第四章

一、Nginx简介 1、Nginx简介 Nginx&#xff08;特点&#xff1a;占用内存少&#xff0c;并发能力强&#xff09; Nginx是一个高性能的 HTTP 和反向代理服务器。 Nginx是一款轻量级的 Web 服务器/反向代理服务器及电子邮件 单台物理服务器可支持30 000&#xff5e;50 000个并发…

当,Kotlin Flow与Channel相逢

Flow之所以用起来香&#xff0c;Flow便捷的操作符功不可没&#xff0c;而想要熟练使用更复杂的操作符&#xff0c;那么需要厘清Flow和Channel的关系。 本篇文章构成&#xff1a; 1. Flow与Channel 对比 1.1 Flow核心原理与使用场景 原理 先看最简单的Demo&#xff1a; fun…

WMS智能仓储

子产品介绍篇--智能仓储 智能仓储 我们通常也称 WMS 系统。是一个实时的计算机软件系统&#xff0c;它能够按照运作的业务规则和运算法则&#xff0c;对信息、资源、行为、存货和分销运作进行更完美地管理&#xff0c;提高效率。 一. 仓储管理系统&#xff08;wms&#xff09;…

柔性数组【结构体和动态内存的结合】

全文目录 前言柔性数组的定义语法柔性数组的特点柔性数组的使用柔性数组的优势 前言 很多人可能没有听过柔性数组这个概念&#xff0c;但是在C99中柔性数组是确实存在的。我个人感觉有点像动态内存和结构体的结合。 柔性数组的定义语法 结构中的最后一个元素允许是未知大小的…