前端播放rtsp视频流（最后使用WebRtc）
前端播放rtsp视频流（最后使用WebRtc）
前言：
项目需要将实验室里的摄像头画面引入到前端页面中，故对目前常见的几种方法进行了尝试，虽然过程坎坷但结局是好的。
一些尝试：
-
RTSPtoWebRtc工具
由于RTSPtoWebRtc配置了ice_serve，故在局域网中无法访问视频
-
nginx+FFmepg
最初想法是对rtsp流进行处理，将其转成rtmp，最后以http的形式进行访问。但经过几天的尝试之后，发现存在以下弊端：
- 实时视频画面延迟高，存在10s左右的延迟，经过gpu解码后仍存在6-7s的延迟
- nginx的http配置存在一定难度（我觉得这是我菜的问题），无法以http形式访问，故无法实现在网页中展示
经过一番周折后决定使用WebRtc
刚开始以为这个会比较麻烦，后悔没早点尝试…
一、下载WebRtc
github：Releases · mpromonet/webrtc-streamer (github.com)
注意不要下载错了
二、运行webrtc-streamer
下载之后解压，打开命令窗口，执行以下命令
D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe -o -H 0.0.0.0:8000
其中 D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe为绝对路径
-o:无需转码，降低CPU
-H:指定端口号
然后在浏览器访问127.0.0.1:8001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264
记得修改rtsp
三、引入到Vue
将webrtc-streamer下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。并在index.html文件里引入这两个js文件。格式如下：
<script src="<%= BASE_URL %>adapter.min.js"></script><script src="<%= BASE_URL %>webrtcstreamer.js"></script>
四、编写页面
以下代码可直接复制粘贴，按需修改即可。
<template><div><video id="video" autoplay width="500" height="300"></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 + '//127.0.0.1:8000')//需要查看的rtsp地址，记得修改rtsp地址this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')},beforeDestroy() {this.webRtcServer.disconnect()this.webRtcServer = null},methods: {}
}
</script><style scoped></style>五、运行结果
参考链接：
VUE+webrtc-streamer实现实时视频播放（监控设备-rtsp）_vue webrtc-streamer-CSDN博客
【Vue2 + webrtc-steamer】rtsp流在Web端实时播放_webrtc-streamer 稳定么-CSDN博客