windows下实现Vue3+WebStreamer打造多设备集成监控平台-优快云博客

本文链接：https://blog.youkuaiyun.com/Java_fenxiang/article/details/149241560

甲方需求想要一个可配置的多监控设备集成的监控平台(海康、大华、宇视、华为等)，若要通过寻找各家的SDK进行开发集成太过耗时，就给了我3天时间，于是大致搜索一下，可用方案有web-streamer/ZLMediaKit/Mediamtx/nginx+ffmpeg。

大致都看了一下，nginx+ffmpeg很经典的方法了，但主要延时是一个很大问题
ZLMediaKit/Mediamtx 主流方法，刚上手配置还是有点麻烦的
web-streamer不支持H265编码的视频

毕竟自己刚入手，找一个简单的立马上手为妙，web-streamer是一个用于处理视频流的库，它可以帮助我们捕获和显示来自多个监控设备的视频流。主要步骤包括：

安装web-streamer
创建Vue3项目
在Vue组件中显示视频流
实现控制功能(如开始/停止/截屏/录屏)

实现步骤

1.下载webrtc-streamer并启动

https://github.com/mpromonet/webrtc-streamer/releases建议下载低版本，我这边下载是0.8.5，目前更新的新版本不一定稳定(一开始使用的是0.8.12，后面出现了莫名其妙的问题，降低版本后就好了)

windows下实现Vue3+WebStreamer打造多设备集成监控平台_html

下载好后解压进入到对应目录下，右键在此打开终端，输入下面命令，-o是为了防止cpu爆了

.\webrtc-streamer.exe -o

这样就已经在本地电脑上开启了webrtc-streamer，默认端口8000，通过127.0.0.1:8000可以看到本地自己的监控页面。
也可以通过文件里面的

.\webrtc-streamer -a -C config.json -N10 -o

访问自带的config.json文件(文件里面就是各国的一些监控画面)

windows下实现Vue3+WebStreamer打造多设备集成监控平台_html_02

若想指定ip和端口：./webrtc-streamer -H 192.168.xxx.xxx:xxx

2.VUE项目中引入并显示

随后将下载包html文件夹下webrtcstreamer.js，webrtcconfig.js文件和html/libs文件夹下adapter.min.js文件复制到自己VUE项目public目录下

windows下实现Vue3+WebStreamer打造多设备集成监控平台_视频流_03

随后在项目的index.html引入依赖

windows下实现Vue3+WebStreamer打造多设备集成监控平台_视频流_04

这里为了简单测试，就直接在public下创建了一个test.html文件，直接头部引入了依赖

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="adapter.min.js"></script>
  <script src="webrtcconfig.js"></script>
  <script src="webrtcstreamer.js"></script>
  <script>
    let options = webrtcConfig.options;
    let codec = webrtcConfig.codec;
    console.log(codec);
    window.onload = function () {
      this.webRtcServer = new WebRtcStreamer("video", location.protocol + '//127.0.0.1:8000');
      webRtcServer.connect(
        "rtsp://admin:123456@xxx.xxx.xxx.xxx:xxx/Streaming/Channels/101",
        "",
        options,
        undefined,
        codec
      );
    };
    window.onbeforeunload = function () {
      this.webRtcServer.disconnect();
    };
  </script>
</head>
<body>
<video id="video" muted playsinline controls></video>
<!-- <iframe src="http://127.0.0.1:8000/webrtcstreamer.html?video=rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream"></iframe> -->
</body>
</html>

this.webRtcServer = new WebRtcStreamer("video", location.protocol + '//127.0.0.1:8000');

这个地方假如自己指定了ip和端口需要将127.0.0.1:8000进行更改

webRtcServer.connect(
"rtsp://admin:123456@xxx.xxx.xxx.xxx:xxx/Streaming/Channels/101",
"",
options,
undefined,
codec
);

这个里面的rtsp地址自己更换成对应的rtsp地址注意！！！，connect函数后面有几个参数建议不要省略，就按照我这样的配置保留着，或者将codec可以删除如：webRtcServer.connect(rtspUrl, null, option, null);，因为我先前只使用下面的命令前端一直不显示画面，半天也没搞懂什么原因，希望懂的大佬可以解释一下。

webRtcServer.connect('rtsp://admin:123456@xxx.xxx.xxx.xxx:xxx/Streaming/Channels/101')

windows下实现Vue3+WebStreamer打造多设备集成监控平台_html_05

windows下实现Vue3+WebStreamer打造多设备集成监控平台_ide_06

webrtc-streamer显示如上，close session：video/H264是我关闭页面才弹出来的，正常不会出现，若频繁出现 start playing.... close session:video/H264,就要考虑是不是 webRtcServer.connect()函数的问题，是不是将后面几个参数进行了省略

3.视频流截图及录像功能

当多个相机进行集成之后，用户想点击截图获得当前瞬间的画面，以及想要录下某一段时间的视频以供数据分析使用。

截图原理

直接用 video 标签 + canvas 截图，不用 webrtc-streamer 提供接口。
核心思路：把 video 当前帧画到 canvas 上，然后用 canvas 的 toDataURL() 方法导出图片。

一段简单的示例

<video id="myVideo" autoplay muted playsinline></video>
<button id="captureBtn">截图</button>
<img id="screenshot" style="max-width:300px">

document.getElementById('captureBtn').onclick = function() {
  const video = document.getElementById('myVideo');
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  // 导出base64图片
  document.getElementById('screenshot').src = canvas.toDataURL('image/png');
  // 如果要保存为图片文件
  // const a = document.createElement('a');
  // a.href = canvas.toDataURL('image/png');
  // a.download = 'screenshot.png';
  // a.click();
};

保存视频片段功能(录像)

WebRTC 视频源在前端(video 标签)无法像本地录像那样直接保存整个流文件，但可以通过 MediaRecorder API 对 video 的 srcObject 进行录制，实现“保存视频片段”功能。

获取 video 标签的 srcObject(MediaStream)
创建 MediaRecorder 实例，开始/停止录制
把录制得到的 blob 保存为文件

一段简单的示例

<button onclick="startRecording()">开始录制</button>
<button onclick="stopRecording()">停止并下载</button>

let mediaRecorder;
let recordedChunks = [];

function startRecording() {
  const video = document.getElementById('myVideo');
  if (!video.srcObject) {
    alert('流还没加载好');
    return;
  }
  recordedChunks = [];
  mediaRecorder = new MediaRecorder(video.srcObject, {mimeType: 'video/mp4'});
  mediaRecorder.ondataavailable = function(e) {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };
  mediaRecorder.onstop = function() {
    const blob = new Blob(recordedChunks, {type: 'video/mp4'});
    // 触发下载
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recorded.mp4';
    a.click();
    URL.revokeObjectURL(url);
  };
  mediaRecorder.start();
  console.log('开始录制');
}

function stopRecording() {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop();
    console.log('已停止录制');
  }
}