前端播放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>