VUE3+TS+VITE+webrtc-streamer实现实时视频播放（监控设备-rtsp，进来保你成）

这篇具有很好参考价值的文章主要介绍了VUE3+TS+VITE+webrtc-streamer实现实时视频播放（监控设备-rtsp，进来保你成）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、下载webrtc-streamer，下载最新window版本

2、解压下载包

3、双击webrtc-streamer.exe启动服务

4、引入webrtc-streamer

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

2、在index.html文件里引入这两个js文件

5、使用ffmpeg推rtsp流到流媒体服务器

6、编写测试页面

7、问题与解决方案

1、直接在ts中import webstream.js文件

2、出现 SyntaxError: Unexpected token '<', ""

1、下载webrtc-streamer

webrtc-streamer下载地址

vue实现视频监控,vue.js,webrtc,音视频

2、解压下载包

3、双击webrtc-streamer.exe启动服务

vue实现视频监控,vue.js,webrtc,音视频

双击启动服务，此时在浏览器访问127.0.0.1:8000可以看到本机监控画面。注意：由于mediamtx会占用8000端口，所有我们需要在上图所在的目录使用cmd执行如下的代码

# 设置webrtc监听的端口为 9000 带上-o参数，表示不转码以降低资源消耗（我没加）
webrtc-streamer.exe -H 127.0.0.1:9000

vue实现视频监控,vue.js,webrtc,音视频

4、引入webrtc-streamer

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

vue实现视频监控,vue.js,webrtc,音视频

2、在index.html文件里引入这两个js文件

注意：路径直接使用`/` + `文件名`如下图

vue实现视频监控,vue.js,webrtc,音视频

5、使用ffmpeg推rtsp流到流媒体服务器

因为目前没有在项目现场，无法接入摄像头，所以我是使用mediamtx（流媒体服务器开源项目）启动一个流媒体服务器，使用ffmpeg推流到该流媒体服务器。

ffmpeg安装教程

mediamtx下载地址（解压压缩包，点击运行就可以使用）

vue实现视频监控,vue.js,webrtc,音视频

解压后的文件

vue实现视频监控,vue.js,webrtc,音视频

双击启动后的结果

vue实现视频监控,vue.js,webrtc,音视频

此时我们先不要推流，如果先推流前端可能会接收不到，此时webrtc服务已经在9000端口启动，我们将流媒体服务器点击启动起来。接下来我们编写vue3代码来使用webrtc拉取rtsp流并转码为web网页能够使用的流格式。

6、编写测试页面

注意：在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1，端口9000；各监控设备厂商有自己的RTSP地址格式connect要传入正确的rtsp地址，一定要注意下面加了一个location.protocol，代码能运行，如果出现了错误，一定查看是否和我的代码相同.

<template>
  <h1>video</h1>
  <video id="video" autoplay width="1050" height="1050"></video>
</template>

<script setup>
import { ref } from 'vue';
import { computed } from 'vue';
import { nextTick } from 'vue';

const webRtcServer = ref();
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 + '//127.0.0.1:9000')
        //需要查看的rtsp地址
        // webRtcServer.value.connect('rtsp://admin:a12345678@192.168.3.11:554/Streaming/Channels/101')
        webRtcServer.value.connect('rtsp://veteran:qc010419qc@127.0.0.1:8554/stream')
    })
}
//页面销毁时销毁webRtc
const webRtcServerDis = computed(() => {
    webRtcServer.value.disconnect()
    webRtcServer.value = null
})
initWebRtcServer();
</script>

<style scoped>
</style>

此时启动vue3项目，当vue3启动后，我们可以在mediamtx与webrtc两个控制台看到如下的界面，此时表明vue3项目启动成功，下面我们开始推流。

vue实现视频监控,vue.js,webrtc,音视频
6、运行项目可查看监控视频播放效果