一、下载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