webRtc播放rtsp视频流（vue2、vue3+vite+ts）

hello_world_Q

已于 2023-04-18 14:12:53 修改

阅读量1.1w

点赞数 10

分类专栏： js vue 文章标签： webrtc vue.js 前端

于 2023-04-18 14:04:38 首次发布

本文链接：https://blog.csdn.net/weiqiang915/article/details/130219674

版权

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了如何在Windows环境下下载并启动WebRtc-streamer，通过RTSP视频流进行测试。然后详细阐述了如何在Vue2和Vue3+vite项目中集成WebRtc，包括引入JS文件、设置video标签以及连接RTSP流。同时，文章提到了可能出现的内存占用过高和CORS政策问题，并给出了相应的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载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和端口，默认8000
        this.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