在Web中使用jsmpeg.js低时延播放RTSP视频流（海康、大华）方案 - vue-jsmpeg-player

前言

• web播放实时视频流的几种方案对比，详见此处
• 本组件发布在git开源gitee、github，欢迎各位一起优化和fork，拉取后可直接运行demo，同时发布到了npm中，可直接安装使用vue-jsmpeg-player
• jsmpeg相关地址：gitee、github、 官网地址
• jsmpeg为MIT开源协议，不用考虑版权问题
• 跨平台windows、linux都可用，只跟浏览器有关系，对浏览器可能有点小要求（版本越新越好），IE浏览器实测也是可以用的
• 本文仅在局域网验证，如果是公网或跨网项目，需要自行解决摄像机拉流问题（可参考GB28181协议，设备主动注册服务器）
• 仅支持mpeg1格式视频、mp2格式音频！！！仅支持mpeg1格式视频、mp2格式音频！！！仅支持mpeg1格式视频、mp2格式音频！！！不要随便拿个websocket流去给jsmpeg使用，播放不了的！！！也无法直接播放rtmp流！！！

1 安装与介绍

1.1 安装

• npm 安装(这样无法二次开发)

npm install jsmpeg -s

• 二次开发方案（本文章介绍）
   把jsmpeg.min.js拖入项目目录下，建议将此js文件拆分为多个模块，如下图，当然你能在jsmpeg.min.js单文件上二次开发也是可以的
   注：不能直接使用src文件夹下的代码，那是没经过编译的，jsmpeg.js有一部分使用的c语言，若要直接使用请自行学习如何编译jsmpeg，本文暂不介绍(详见build.sh)
  

1.2 介绍

• jsmpeg比较重要的两个技术点：webgl、wasm，只需大致了解即可，若不对这两个模块进行二次开发，则无需深究
• jsmpeg.js采用软解码方式，仅支持mpeg1格式视频、mp2格式音频！！！，将视频流解码成图片并渲染到canvas上，并且可在源码基础上二次开发

1.2.1 jsmpeg方案架构

单链路即：rtsp流=>ffmpeg转码（mpeg1+mp2）=>http server接收=>websocket server转发=>websocket client

1.2.2 jsmpeg的c语言部分

• wasm技术简单来说就是：可以在Web 中运行除了JavaScript以外的语言编写的代码（例如C，C ++，Rust或其他）
• jsmpeg采用了这项技术来实现其解码器（mpeg1+mp2）
• 不过我猜测作者为防止在一些低版本浏览器上wasm技术无法使用，又用js写了一套解码器。

首先贴上仓库中c语言的代码部分，如下图：

在根目录下有build.sh，用于编译出jsmpeg.min.js

在输出文件中，可以找到一段很长的字符串变量（WASM_BINARY_INLINED），这就是经过编译后的二进制c语言模块（经过base64加密压缩的）

这段内容在Player构造函数中被使用到，如下图：

至此，大致介绍完毕，相信看官们已经基本清楚jsmpeg的原理了

2 播放与使用

  在前面的介绍中已经说到，本方案需要使用到一个websocket server来中转，jsmpeg作者已经为我们提供了一个简易websocket server端，即websocket-relay.js。

  为方便测试，首先需要把jsmpeg的仓库拉取到本地，因为需要用到其中jsmpeg.min.js、websocket-relay.js文件

2.1 使用介绍

2.1.1 引入与使用

1. 引入
   如果是npm安装方式：

import JSMpeg from 'jsmpeg'

    如果是使用源码：

import JSMpeg from 'xx/jsmpeg.min.js'

2. 使用
   创建实例方式：

let player = new JSMpeg.Player('ws://xxxx',{ ... })

    自动识别方式：
    jsmpeg.js会自动识别docment中所有class包含jsmpeg的元素，并获取data-url属性后把该元素当做播放器容器，html如下

<div class="jsmpeg" data-url="ws://xxxx">div>

2.1.2 参数与事件

点此官方介绍

• options参数：

名称	类型	说明
canvas	HTMLCanvasElement	用于视频渲染的HTML Canvas元素。如果没有给出，渲染器将创建自己的Canvas元素。
loop	boolean	是否循环播放视频(仅静态文件)，默认=true
autoplay	boolean	是否立即开始播放（仅限静态文件），默认=false
audio	boolean	是否解码音频，默认=true
video	boolean	是否解码视频，默认=true
poster	string	预览图像的URL，用来在视频播放之前作为海报显示。
pauseWhenHidden	boolean	当页面处于非活动状态时是否暂停播放，默认=true（请注意，浏览器通常会在非活动选项卡中限制 JS）
disableGl	boolean	是否禁用WebGL，始终使用Canvas2D渲染器，默认=false
disableWebAssembly	boolean	是否禁用WebAssembly并始终使用JavaScript解码器，默认=false(不建议设置为true)
preserveDrawingBuffer	boolean	WebGL上下文是否创建必要的“截图”
progressive	boolean	是否以块的形式加载数据(仅静态文件)。当启用时，回放可以在完整加载源之前开始
throttled	boolean	当不需要回放时是否推迟加载块。默认=progressive
chunkSize	number	使用时，以字节为单位加载的块大小。默认(1 mb)1024*1024
decodeFirstFrame	boolean	是否解码并显示视频的第一帧，一般用于设置画布大小以及使用初始帧作为"poster"图像。当使用自动播放或流媒体资源时，此参数不受影响。默认true
maxAudioLag	number	流媒体时，以秒为单位的最大排队音频长度。（可以理解为能接受的最大音画不同步时间）
videoBufferSize	number	流媒体时，视频解码缓冲区的字节大小。默认的512 * 1024 (512 kb)。对于非常高的比特率，您可能需要增加此值。
audioBufferSize	number	流媒体时，音频解码缓冲区的字节大小。默认的128 * 1024 (128 kb)。对于非常高的比特率，您可能需要增加此值。

• 事件：

名称	参数	说明
onVideoDecode	decoder, time	在每个解码和渲染的视频之后调用的回调
onAudioDecode	decoder, time	在每个解码音频帧后调用的回调
onPlay	player	当播放开始时调用的回调函数
onPause	player	当播放暂停时调用的回调函数(例如当.pause()被调用或源结束时)
onEnded	player	当播放到达源的末尾时调用(只在loop=false调用)
onStalled	player	当没有足够的数据播放时调用的回调
onSourceEstablished	source	当source第一次接收到数据时调用的回调
onSourceCompleted	source	当源接收到所有数据时调用的回调

• 方法与属性：

名称	参数	说明
play	none	开始播放
pause	none	暂停播放
stop	none	停止播放，并跳到视频开头
nextFrame	none	一个视频帧的高级回放。这并不解码音频。当没有足够的数据时，返回成功
destroy	none	停止回放，断开源并清理WebGL和WebAudio状态。player不能被再使用。
volume	number	获取或设置音频音量（0-1）
currentTime	number	获取或设置当前播放位置，以秒为单位
paused	boolean	只读，无论回放是否暂停

2.2 简易播放测试

（1）确保你有可用的rtsp流，我是有摄像机可以测试的，如果没有摄像机，可以使用ffmpeg推视频文件流，或者去网上找找免费的电视台rtsp流，也可以用一些软件推你电脑的桌面流（不过一般的软件都只能推rtmp流）

• 提供一个推桌面流的方案：EasyDarwin(rtsp服务端)+ EasyScreenLive(捕获屏幕并推rtsp流)
• Windows上通过VLC播放器搭建rtsp流媒体测试地址操作步骤
• 通过ffmpeg直接拉取本地桌面视频流[new]

（2）运行websocket server，打开cmd，cd到websocket-relay.js所在目录（注：此步骤需要安装node.js环境，请百度）- 以下步骤推荐大家在VSCode中操作

• 运行命令：node ./websocket-relay.js test 8890 8891 （第一个参数为接流url子目录，第二个参数为接流端口，第三个参数为推流端口），作者在源码中的介绍如下：
  
• 若成功运行后，见下图：
  （注：如果报错ws模块找不到，就运行下npm install ws）
  

（3）启用ffmpeg，拉取指定流转码后推给http server

• 转码海康摄像机流命令代码：

ffmpeg -rtsp_transport tcp -i rtsp://[用户名]:[密码]@[ip]:554/h264/ch1/main/av_stream -q 0 -f mpegts -codec:v mpeg1video -s 1280x720 -b:v 1500k -codec:a mp2 -ar 44100 -ac 1 -b:a 128k http://127.0.0.1:8890/test

• 其他流：

ffmpeg -rtsp_transport tcp -i rtsp流地址 -q 0 -f mpegts -codec:v mpeg1video -s 1280x720 -b:v 1500k -codec:a mp2 -ar 44100 -ac 1 -b:a 128k http://127.0.0.1:8890/test

• 本地桌面流：

ffmpeg -f gdigrab -i desktop -q 0 -f mpegts -codec:v mpeg1video -s 1280x720 -b:v 1500k -codec:a mp2 -ar 44100 -ac 1 -b:a 128k http://127.0.0.1:8890/jsmpeg

 运行后，ffmpeg控制台如下图：

http server控制台中可以看到一个客户端连入，此后http server会把接受到的流数据转发给所有连入ws://127.0.0.1:8891的客户端：

（4）web中使用jsmpeg.js接收流并播放

• 为了方便测试，我这写了个简易html，可直接测试，不用搭建vue、react框架测试了；
• 在存放jsmpeg.min.js目录下新建一个html文件，拷贝下面的代码到放入其中，保存后运行即可；

DOCTYPE html>
<html>
  <head>
	<title>JSMpeg TESTtitle>
	<meta name="viewport" content="width=device-width">
  head>
  <body>
    <div class="content">
      <h1>JSMpeg 测试 （为了播放声音，请先点击页面一次）div>
      <canvas id="jsmpeg-canvas">canvas >
    div>

    <script type="text/javascript" src="jsmpeg.min.js">script>
    <script type="text/javascript">
      document.addEventListener('click', () => {
		let player = new JSMpeg.Player("ws://127.0.0.1:8891",{
			canvas: document.getElementById('jsmpeg-canvas'),
			// 要在用户点击过页面后，才可以播放声音
			// audio: false,
		})
	  }, { once: true })
      
    script>
  body>
html>

 目录结构：

 双击运行到浏览器中，如下图：

2.3 延迟测试

• 测试1
  
• 测试2
  
• 测试3
  
• 录制了个gif，更加直观
  
• 延迟确实保持1s左右吧，整个延迟组合大概是：ffmpeg转码耗时+http server接流耗时+ws server转发耗时+client解码耗时，因为是本机测试，网络的延迟可忽略不计

3 优化与扩展

将jsmpeg使用到项目中的话，原生功能可能还是稍微不够的，需要对其二次开发

3.1 拆分模块

为了方便二次开发，建议各位将jsmpeg.min.js拆分为多个独立模块，在vscode中打开此文件，序列化之后，可以看到都已经分类好了，接下来将各个模块独立为js文件；

拆分后如下图：

各模块说明：

• modules
  • audio-output ：音频输出相关
    • webaudio： 缓冲器模块
  • decoder：解码相关
    • decoder：解码器基类
    • mp2-wasm：mp2音频解码模块（wasm技术，性能更好）
    • mp2：mp2音频解码模块（原生js解码，性能较差）
    • mpeg1-wasm：mp2音频解码模块（wasm技术，性能更好）
    • mpeg1：mp2音频解码模块（原生js解码，性能较差）
  • renderer：渲染器相关
    • canvas2d：canvas2d渲染模块
    • webgl：webgl渲染模块（性能更好）
  • source：视频流接收相关
    • ajax-progressive：使用ajax方案的稳定版本？没有深入了解
    • ajax：使用XMLHttpRequest获取视频流
    • fetch：使用原生的fetch方法获取视频流
    • websocket：websocket客户端模块，用于接收websocet server转发的视频流（常用）
  • buffer： 数据缓冲器模块
  • jsmpeg：jsmpeg导出模块
  • player： 播放器模块
• utils：工具方法相关

拆分后的源码见git

3.2 功能扩展

• 画面旋转

  /**
   * 旋转画布
   * @param {number} angle 角度
   * @param {boolean} append 是否为追加角度
   * @returns
   */
  rotate(angle, append = false) {
    if (!this.canvas || typeof angle !== 'number') return

    const canvas = this.canvas

    angle = append ? this.store.canvasAngle + angle : angle
    angle = angle >= 360 ? angle - 360 : angle <= -360 ? angle + 360 : angle

    if ((Math.abs(angle) / 90) % 2 === 1) {
      // 如果是90整数倍，表示为垂直状态
      const containerBound = this.contianer.getBoundingClientRect(),
        canvasBound = canvas.getBoundingClientRect()

      if (canvas.width > canvas.height) {
        // 宽>高，取容器高度作为canvas最大宽度
        canvas.style.width = containerBound.height + 'px'
      } else {
        // 宽<=高，取容器宽度作为canvas最大高度
        canvas.style.height = containerBound.width + 'px'
      }
    } else {
      canvas.style.width = null
      canvas.style.height = null
    }
    canvas.style.transform = `rotate(${angle}deg)`

    this.store.canvasAngle = angle
  }

• 截图
  这里的saveToLocal与savaAs方法相似

  /**
   * 截图
   * @param {string} name
   */
  snapshot(name = 'JSMPeg') {
    if (this.canvas) {
      const mime = 'image/png',
        url = this.canvas.toDataURL(mime)

      saveToLocal(url.replace(mime, 'image/octet-stream'), `${name}_截图_${new Date().toLocaleTimeString()}.png`, mime)
    }
  }
  
// saveToLocal方法如下
/**
 *
 * @param {object} param
 * @param {string|object|Array} param.data 数据，传入后url参数将被忽略
 * @param {string} param.url 文件下载地址
 * @param {string} param.name 文件名称
 * @param {string} param.mimeType 文件mime类型
 * @returns
 */
export function saveToLocal(blob, name = 'JSMpeg_' + Date.now(), mimeType = '') {
  if (!blob) return

  const a = document.createElement('a')
  a.style.display = 'none'
  a.download = name
  if (typeof blob === 'string') {
    a.href = blob
  } else {
    blob =
      blob instanceof Blob
        ? blob
        : new Blob(blob instanceof Array ? blob : [blob], {
            type: mimeType
          })
    a.href = URL.createObjectURL(blob)
  }

  setTimeout(() => {
    a.click()
  }, 0)
  setTimeout(() => {
    a.remove()
  }, 1)

  if (blob instanceof Blob) {
    setTimeout(() => {
      URL.revokeObjectURL(blob)
    }, 1000)
  }
}

• 录制
  这里需要注意的是MediaRecorder是新规范，有些浏览器不支持

 recorder = {
    /** 录制持续时间 */
    duration: 0,
    timer: null,
    /** @type {'canvas'|'ws'} */
    mode: '',
    running: false,
    saveName: '',
    /**
     * @type {MediaRecorder}
     * 媒体录制器
     */
    mediaRecorder: null,
    /**
     * @type {MediaStream}
     * 视频流
     */
    stream: null,
    /**
     * @type {ArrayBuffer[]}
     * 视频数据块
     */
    chunks: null,
    startTiming() {
      this.duration = 0
      this.timer = setInterval(() => {
        this.duration += 1
      }, 1000)
    },
    pauseTiming() {
      clearInterval(this.timer)
      this.timer = null
    },
    continueTiming() {
      this.timer = setInterval(() => {
        this.duration += 1
      }, 1000)
    },
    stopTiming() {
      this.pauseTiming()
      this.duration = 0
    },
    clear() {
      this.running = false
      this.mediaRecorder = null
      this.stream = null
      this.chunks = null
    }
  }
  
  /**
   * 视频录制
   * @param {string} name
   * @param {'ws'|'canvas'} mode
   */
  recording(name = 'JSMpeg', mode = 'ws') {
    try {
      if (!this.isPlaying) {
        return
      }
      if (this.isRecording || this.recorder.stream) {
        // 停止录制
        this.recorder.stopTiming()
        // https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
        if (this.recorder.mode === 'canvas' && this.recorder.mediaRecorder && this.recorder.stream instanceof MediaStream) {
          this.recorder.mediaRecorder.stop()
          saveToLocal(this.recorder.chunks, `${this.recorder.saveName}.webm`, 'video/webm;codecs=vp9')
        } else if (this.recorder.mode === 'ws' && this.recorder.chunks instanceof Array) {
          saveToLocal(this.recorder.chunks, `${this.recorder.saveName}.ts`, 'video/MP2T')
          this.source.recorder = undefined
        }
        this.recorder.clear()
        this.recorder.running = false
      } else {
        // 开始录制
        if (mode === 'canvas') {
          // 此方法兼容性较差，captureStream、MediaRecorder好像都是新规范，有些浏览器不支持
          let chunks = []
          /** @type {MediaStream} */
          let stream = this.canvas?.captureStream(25)
          let mediaRecorder = new MediaRecorder(stream, {
            mimeType: 'video/webm;codecs=vp9'
          })
          mediaRecorder.ondataavailable = (e) => {
            chunks.push(e.data)
          }
          mediaRecorder.start()
          this.recorder.mediaRecorder = mediaRecorder
          this.recorder.chunks = chunks
          this.recorder.stream = stream
          this.recorder.mode = 'canvas'
          this.recorder.running = true
          // this.recording.recorder = new MediaRecorder(this.recording.stream)
        } else if (mode === 'ws') {
          // 服务端转发过来的流就是ffmpeg已转码的ts视频流数据，所以在websocket收到数据的时候，存放到数组中即可实现录制

          this.recorder.chunks = []
          this.recorder.chunks.write = function(data) {
            this.push(data)
          }
          this.source.recorder = this.recorder.chunks
          this.recorder.mode = 'ws'
          this.recorder.running = true
        } else return
        this.recorder.saveName = `${name}_录制_${new Date().toLocaleTimeString()}`
        this.recorder.startTiming()
      }
    } catch (error) {
      console.error(error)
    }
  }

3.3 封装为vue组件

为方便项目使用，需要将jsmpeg封装为vue组件，源码就不贴在文章中了，见此处，组件介绍如下：

• 属性：

名称	类型	说明
url	string	视频流地址
title	string	播放器标题
options	object	jsmpeg原生选项，直接透传
closeable	boolean	是否可关闭（单击关闭按钮，仅抛出事件）
in-background	boolean	是否处于后台，如el-tabs的切换，路由的切换等
show-duration	boolean	是否现实持续播放时间
default-mute	boolean	默认静音
with-toolbar	boolean	是否需要工具栏

• 事件：

名称	参数	说明
包含所有jsmpeg原生事件		看2.1.2小节或具体看jsmpeg官方文档
onSourceConnected	无	当websocket连接上服务端时触发
onSourceStreamInterrupt	无	当websocket超过一定时间没有收到流时触发
onSourceStreamContinue	无	当onSourceStreamInterrupt触发后websocket第一次接收到流时触发
onSourceClosed	无	当websocket关闭后触发
onResolutionDecode	width,height	当获取到视频分辨率后触发

• 演示：
  无信号时
  
  正常播放：
  
  旋转：
  
  接流中断：
  
  截图测试：
  
  录制测试：
  

4 多路推流

由于后端不是我做，提供后端java思路仅供参考
我们知道websocket和http一样是支持子目录形式的url的，那么这个子目录我们可以用摄像机的主键来定义
这里建议将http server和websocket server封装到一个服务类中，这样在http server收到ffmpeg推过来的流之后可以直接调用websocet server转发给client

1. 创建一个类，包含http server和websocket server ，websocket server 监听8081端口，http server 监听8080端口
2. ws server将连接进来的客户端缓存到字典中，比如一个客户端连接地址为ws://127.0.0.1:8081/camera1，那么就知道这个客户端想获取camera1的视频流
3. 假设一个摄像机在数据库中主键为camera1，开启一条单链路流，ffmpeg拉取rtmp流转码推给http://127.0.0.1:8080/camera1，http server的接收事件中使用websocet server转发给camera1的客户端（即ws://127.0.0.1:8081/camera1）

PS: 使用ws多路传输时，后台需要优化转发处理，否则可能出现多链路混流现象，导致斑马纹或视频流异常

后语

• 交流群：56370082(QQ)
• 由于项目对实时性要求不是那么的高，所以本方案1s以内延时完全满足项目需求
• 由于是客户端解码，所以性能不会太好，在目前的i5 10代+8g这种配置机器上单个页面六路同屏应该是没问题的，再多就不行了，对性能有追求的只能用webrtc了，具体性能对比可见jsmpeg官网性能对比
• 本组件发布在github开源jsmpeg-player，欢迎各位一起优化和fork
• 仅支持mpeg1格式视频、mp2格式音频！！！仅支持mpeg1格式视频、mp2格式音频！！！仅支持mpeg1格式视频、mp2格式音频！！！不要随便拿个websocket流去给jsmpeg使用，播放不了的！！！也无法直接播放rtmp流！！！
• 感谢ffmpeg、jsmpeg作者

更新记录

2022-03-09: 公网下推荐使用开源库ZLMediaKit
2022-07-27: 封装为vue组件并发布到了npm上，可直接安装使用，详见仓库，npm