监控视频流媒体播放-jsmpeg+ffmpeg

监控视频流有两种类型，包含H264、H265。 尝试过的方法：

1. webRTC只支持H264，不支持H265
2. EasyPlayer只支持H264,不支持H265
3. EasyWasmPlayer支持H264及H265但不支持大分辨如2k\4k等
4. 后端转码后使用EasyWasmPlayer播放，经常转码失败且播放不流畅

推荐方法：ffmpeg+Node.js+jsmpeg.js（参考blog.csdn.net/yunbabac/ar…）

源码：gitee.com/lisa25/rtsp…

布置环境：

1. 安装node

2. 下载jsmpeg (gitee.com/lisa25/rtsp… -> jsmpeg-master.zip) 下载后解压，cmd进入jsmpeg文件夹，运行

   node websocket-relay.js supersecret 8081 8082

3. 下载ffmpeg (gitee.com/lisa25/rtsp… -> ffmpeg-2021-10-07-git-b6aeee2d8b-essentials_build.7z) 下载后解压，首先配置ffmpeg环境变量 此电脑->属性->高级系统设置->环境变量 新建系统变量，变量为ffmpeg,值为ffmpeg解压后文件夹的bin目录

编辑path，将ffmpeg解压后文件夹的bin目录粘贴进去

打开cmd执行,其中rtsp流换成自己的

ffmpeg -i rtsp://admin:admin@39.102.100.83:xxxx/12  -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret

运行后如下图即成功

6. webSocket模块安装,cmd运行

npm install ws

页面代码

1. 将jsmpeg-master -> jsmpeg.min.js放到vue项目与src同级，在main.js中引入

2. 将jsmpeg.min.js的第一行改成如下

3.需要展示视频的vue文件

<template>
  <div class="right_one_box">
    <div class="title"><span></span>蘑菇房视频监控</div>
    <div class="box_con">
      <div class="con">
        <canvas id="video-canvas" style="height: 500px; wight: 700px"></canvas>
      </div>
    </div>
  </div>
</template>
<script> 
export default {
  name: 'Home',
  data () {
    return {
      path: 'ws://127.0.0.1:8082',   //你拉取视频源地址
      canvas: null
    }
  },
  mounted () {
    this.canvas = document.getElementById('video-canvas')
    var player = new JSMpeg.Player(this.path, { canvas: this.canvas })
  },
  methods: {
  
  }
}
</script>

运行即可正常播放

同时读取多个流（blog.csdn.net/qq_40015157…）

jsmpeg使用参考文档（GitHub - phoboslab/jsmpeg：JavaScript 中的 MPEG1 视频解码器）