前端播放rtsp视频流（最后使用WebRtc）

前端播放rtsp视频流（最后使用WebRtc）

前言：

​ 项目需要将实验室里的摄像头画面引入到前端页面中，故对目前常见的几种方法进行了尝试，虽然过程坎坷但结局是好的。

一些尝试：

• RTSPtoWebRtc工具

  由于RTSPtoWebRtc配置了ice_serve，故在局域网中无法访问视频

• nginx+FFmepg

​ 最初想法是对rtsp流进行处理，将其转成rtmp，最后以http的形式进行访问。但经过几天的尝试之后，发现存在以下弊端：

1. 实时视频画面延迟高，存在10s左右的延迟，经过gpu解码后仍存在6-7s的延迟
2. 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和端口，默认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>

五、运行结果

参考链接：
VUE+webrtc-streamer实现实时视频播放（监控设备-rtsp）_vue webrtc-streamer-CSDN博客

【Vue2 + webrtc-steamer】rtsp流在Web端实时播放_webrtc-streamer 稳定么-CSDN博客