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下载地点
https://img-blog.csdnimg.cn/de7ab0ffcf0b4bc8915831a5e52fc823.png
2、解压下载包
3、双击webrtc-streamer.exe启动服务
https://img-blog.csdnimg.cn/f4df4dc991f542458f09d402f7cc966a.png
双击启动服务，此时在浏览器访问127.0.0.1:8000可以看到本机监控画面。留意：由于mediamtx会占用8000端口，全部我们需要在上图地点的目录利用cmd执行如下的代码
# 设置webrtc监听的端口为 9000 带上-o参数，表示不转码以低沉资源消耗（我没加）
webrtc-streamer.exe -H 127.0.0.1:9000
https://img-blog.csdnimg.cn/55bd25a3bc814241b3bf72cc8d9b2f07.png
https://img-blog.csdnimg.cn/7d78895a25e24558bc463fbf10b58c5f.png
4、引入webrtc-streamer
1、将下载包中html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下
https://img-blog.csdnimg.cn/96997bc0253e40dba8fd2c81f08d7706.png
2、在index.html文件里引入这两个js文件
留意：路径直接利用`/` + `文件名`如下图
https://img-blog.csdnimg.cn/2fd5084eae084e8d82ebcd05f044e9d0.png
5、利用ffmpeg推rtsp流到流媒体服务器
因为现在没有在项目现场，无法接入摄像头，以是我是利用mediamtx（流媒体服务器开源项目）启动一个流媒体服务器，利用ffmpeg推流到该流媒体服务器。
ffmpeg安装教程
mediamtx下载地点（解压压缩包，点击运行就可以利用）
https://img-blog.csdnimg.cn/709e5649cf574b0cbbb49951b5c4b23a.png
解压后的文件
https://img-blog.csdnimg.cn/7e531481f81f4e13a64f7f785e0b6ef9.png
双击启动后的结果
https://img-blog.csdnimg.cn/b83b054d50e747c9ac87b30039593ea3.png
此时我们先不要推流，假如先推流前端大概会接收不到，此时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项目启动乐成，下面我们开始推流。
https://img-blog.csdnimg.cn/a81e920aa5704aaab5e0129f19b94ccb.png
6、运行项目可检察监控视频播放效果
执行推流下令
# 循环推流到127.0.0.1的8554端口，留意后面还有一个stream目录
ffmpeg -re -stream_loop -1 -i 1.mp4 -c copy -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/stream
推流后假如显示不出来，可以尝试在mediamtx大概webrtc两个控制台利用ctrl+c去结束大概的组设的进程，正常情况下，webrtc中会打印非常多no frame，但此时是能够播放的。
https://img-blog.csdnimg.cn/42dae5fd446c4b48996c3bfe473c2041.png
以上为本机测试webrtc-streamer实现实时视频播放效果的全过程，后续还要验证服务器运行服务、局域网公网访问以及性能等。
7、题目与解决方案
1、直接在ts中import webstream.js文件
这个方法完全就错误了，会报下面错误
App.vue:10 Uncaught SyntaxError: The requested module '/public/webrtcstreamer.js' does not provide an export named 'default' (at App.vue:10:8)
https://img-blog.csdnimg.cn/d9b464e9742f471093bfaa51fdcd267e.png
vue3项目利用的ts，import xx 的方式适用于引用其他ts的文件中的函数，js文件的编码格式中写得函数不能通过这种方法来让vue3利用
2、出现 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
https://img-blog.csdnimg.cn/a26edfe539d045d2a5b5ca4e2ba2faba.png
遇到这个错误，针对Unexpected token '<', "<!DOCTYPE "... is not valid JSON关键句查询好久，发现得到的答案与我的情况并不相符，然后觉得大概是编码堕落了，后来仔细看代码，确实是下图中的代码堕落了，没有指明请求的协议以及ip地点前面没加 `//`
https://img-blog.csdnimg.cn/4acfc8d5eeeb4c058b950af50db00a55.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]