前端使用WebRtc播放rtsp视频流

偶系渣渣灰

已于 2024-09-13 10:27:34 修改

阅读量1.8k

点赞数 1

文章标签：前端 webrtc rtsp视频流播放

于 2024-09-12 15:18:43 首次发布

原文链接：https://blog.csdn.net/LJF330/article/details/140739340

版权

前言：

项目中需要使用前端播放RTSP视频流，网上找了不少资料，最后决定用WebRtc进行播放。

一、下载WebRtc

下载地址(https://github.com/mpromonet/webrtc-streamer/releases)

在这里插入图片描述
红框内分别为windows版本和Linux版本。

2.windows版本部署

下载windows版本压缩包，解压后如下图
在这里插入图片描述
打开命令窗口（cmd），执行以下命令：

 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:指定IP及端口号(注意：一般使用0.0.0.0作为指定服务器IP)

在这里插入图片描述
然后在浏览器访问127.0.0.1:8000/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264
rtsp：记得修改为自己的rtsp视频流地址

3.Linux版本部署

系统环境都正常的情况安装步骤如下：

1.webrtc-streamer包：webrtc-streamer-v0.7.2-Linux-x86_64-Release.tar.gz
2.拷贝到指定路径下，解压：tar -xvf webrtc-streamer-v0.7.2-Linux-x86_64-Release.tar.gz
3.进入webrtc-streamer-v0.7.2-Linux-x86_64-Release：cd webrtc-streamer-v0.7.2-Linux-x86_64-Release

在这里插入图片描述

4.执行 ./webrtc-streamer -H 0.0.0.0:8000 -o

这里有点需要注意，运行之后如果关闭远程命令工具服务也会停掉，如果需要后台保持运行则需要添加 nohup

nohup ./webrtc-streamer -H 0.0.0.0:8000 -o

这样关闭窗口依然会保持服务状态。

在这里插入图片描述
注意：如果这里报错，可自行百度解决。
然后可以在浏览器去如Windows环境一样进行访问。

二、引入到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>