前言

  • web播放实时视频流的几种方案对比,详见此处
  • 本组件发布在git开源giteegithub,欢迎各位一起优化和fork,拉取后可直接运行demo,同时发布到了npm中,可直接安装使用vue-jsmpeg-player
  • jsmpeg相关地址:giteegithub官网地址
  • 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比较重要的两个技术点:webglwasm,只需大致了解即可,若不对这两个模块进行二次开发,则无需深究
  • 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'
  1. 使用
    创建实例方式:
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参数:
名称类型说明
canvasHTMLCanvasElement用于视频渲染的HTML Canvas元素。如果没有给出,渲染器将创建自己的Canvas元素。
loopboolean是否循环播放视频(仅静态文件),默认=true
autoplayboolean是否立即开始播放(仅限静态文件),默认=false
audioboolean是否解码音频,默认=true
videoboolean是否解码视频,默认=true
posterstring预览图像的URL,用来在视频播放之前作为海报显示。
pauseWhenHiddenboolean当页面处于非活动状态时是否暂停播放,默认=true(请注意,浏览器通常会在非活动选项卡中限制 JS)
disableGlboolean是否禁用WebGL,始终使用Canvas2D渲染器,默认=false
disableWebAssemblyboolean是否禁用WebAssembly并始终使用JavaScript解码器,默认=false(不建议设置为true)
preserveDrawingBufferbooleanWebGL上下文是否创建必要的“截图”
progressiveboolean是否以块的形式加载数据(仅静态文件)。当启用时,回放可以在完整加载源之前开始
throttledboolean当不需要回放时是否推迟加载块。默认=progressive
chunkSizenumber使用时,以字节为单位加载的块大小。默认(1 mb)1024*1024
decodeFirstFrameboolean是否解码并显示视频的第一帧,一般用于设置画布大小以及使用初始帧作为"poster"图像。当使用自动播放或流媒体资源时,此参数不受影响。默认true
maxAudioLagnumber流媒体时,以秒为单位的最大排队音频长度。(可以理解为能接受的最大音画不同步时间)
videoBufferSizenumber流媒体时,视频解码缓冲区的字节大小。默认的512 * 1024 (512 kb)。对于非常高的比特率,您可能需要增加此值。
audioBufferSizenumber流媒体时,音频解码缓冲区的字节大小。默认的128 * 1024 (128 kb)。对于非常高的比特率,您可能需要增加此值。
  • 事件:
名称参数说明
onVideoDecodedecoder, time在每个解码和渲染的视频之后调用的回调
onAudioDecodedecoder, time在每个解码音频帧后调用的回调
onPlayplayer当播放开始时调用的回调函数
onPauseplayer当播放暂停时调用的回调函数(例如当.pause()被调用或源结束时)
onEndedplayer当播放到达源的末尾时调用(只在loop=false调用)
onStalledplayer当没有足够的数据播放时调用的回调
onSourceEstablishedsource当source第一次接收到数据时调用的回调
onSourceCompletedsource当源接收到所有数据时调用的回调
  • 方法与属性:
名称参数说明
playnone开始播放
pausenone暂停播放
stopnone停止播放,并跳到视频开头
nextFramenone一个视频帧的高级回放。这并不解码音频。当没有足够的数据时,返回成功
destroynone停止回放,断开源并清理WebGL和WebAudio状态。player不能被再使用。
volumenumber获取或设置音频音量(0-1)
currentTimenumber获取或设置当前播放位置,以秒为单位
pausedboolean只读,无论回放是否暂停

2.2 简易播放测试

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

(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 TEST</title>
	<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组件,源码就不贴在文章中了,见此处,组件介绍如下:

  • 属性:
名称类型说明
urlstring视频流地址
titlestring播放器标题
optionsobjectjsmpeg原生选项,直接透传
closeableboolean是否可关闭(单击关闭按钮,仅抛出事件)
in-backgroundboolean是否处于后台,如el-tabs的切换,路由的切换等
show-durationboolean是否现实持续播放时间
default-muteboolean默认静音
with-toolbarboolean是否需要工具栏
  • 事件:
名称参数说明
包含所有jsmpeg原生事件看2.1.2小节或具体看jsmpeg官方文档
onSourceConnected当websocket连接上服务端时触发
onSourceStreamInterrupt当websocket超过一定时间没有收到流时触发
onSourceStreamContinue当onSourceStreamInterrupt触发后websocket第一次接收到流时触发
onSourceClosed当websocket关闭后触发
onResolutionDecodewidth,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
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐