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

下载之后解压，打开命令窗口，执行以下命令

<code> 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文件。格式如下：

<code> <script src="<%= BASE_URL %>adapter.min.js"></script>code>

<script src="<%= BASE_URL %>webrtcstreamer.js"></script>code>

四、编写页面

<code><template>

<div>

<video id="video" autoplay width="500" height="300"></video>code>

</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 + '//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>

五、运行结果