vue实现rtsp视频流浏览器实时播放

muller25。。。

已于 2023-07-17 17:04:59 修改

阅读量6.6k

点赞数 7

分类专栏： JavaScript Vue 文章标签： vue.js 前端 javascript

于 2023-07-15 17:56:29 首次发布

本文链接：https://blog.csdn.net/mullerpp/article/details/131741694

版权

JavaScript Vue 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

因为video标签只能播放特定格式的视频，比如MP4、WebM和Ogg格式，而对于这种视频流文件则需要通过转码实现，而vue-video-player也只能播放特定格式的视频。所以要播放监控的实时视频，除了在浏览器的地址栏直接打开摄像头的地址，还可以通过webrtc-streamer和video标签在页面实现监控实时播放。

1、下载webrtc-streamer，对应下载自己电脑操作系统的版本（需要去GitHub下载，GitHub下载较慢，建议通过工具加速下载）

https://github.com/mpromonet/webrtc-streamer/releases

2、解压下载包，双击ebrtc-streamer.exe文件，启动服务

（注意：这里也可以通过当前文件夹下用Cmd命令webrtc-streamer.exe -o或者自己编写一个脚本文件去启动exe文件，这样占用CPU会很少，直接双击exe文件会比较吃CPU）

脚本文件链接:

https://pan.baidu.com/s/1l5O3amiVpURFvY8Yehc0Xw 提取码: iig6 复制这段内容后打开百度网盘手机App，操作更方便哦

当你看到下图是时就说明你启动成功，此时在浏览器访问localhost:8000可以看到本机监控画面（到这里，恭喜你，走完一半了，接下来就是重点了）

类似于录制当前应用的一个窗口，循环播放

3、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到你的Vue项目public目录下，在index.html文件里引入这两个js文件。

<!DOCTYPE html>
<html>
     <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="renderer" content="webkit" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
      <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
      <script src="<%= BASE_URL %>adapter.min.js"></script>
      <script src="<%= BASE_URL %>webrtcstreamer.js"></script>
      <title><%= webpackConfig.name %></title>
    </head>
</html>

4、编写页面

注意：因为是在本机启动服务,所以 new WebRtcStreamer(id,serverUrl)中URL需要传入127.0.0.1和端口号8000

<template>
  <div>
    <video id="video" controls autoplay muted width="100%" height="100%"style="object-fit: fill"></video>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      webRtcServer: null,
      camera_ip:127.0.0.1:8000 //这里看自己的需要，也可以传入另一台电脑的ip，前提是都得在在一个局域网内
    }
  },
  mounted() {
    //video：需要绑定的video控件ID
    //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip) 
    //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
    this.webRtcServer.connect('rtsp://admin:hk12345678@192.168.0.63:554/cam/realmonitor?channel=101&subtype=0')
  },
  //销毁视频流 
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  }
}
</script>

这样就实现浏览器直接通过rtsp视频流观看实时监控视频了。

muller25。。。

关注

7
点赞
踩
34

收藏

觉得还不错? 一键收藏
20
评论
vue实现rtsp视频流浏览器实时播放

因为video标签只能播放特定格式的视频，比如MP4、WebM和Ogg格式，而对于这种视频流文件则需要通过转码实现，而vue-video-player也只能播放特定格式的视频，所以要播放监控的实时视频，除了在浏览器的地址栏直接打开摄像头的地址，还可以通过webrtc-streamer和video标签在页面实现监控实时播放。
复制链接

扫一扫