前言

前端原生不支持直接播放H264裸流，在实时视频监控、屏幕投流等场景中并没有很好的办法。目前常用的解决方案有以下几种：

方案一：WASM 解码（最佳方案）

使用 WebAssembly 将h264解码器编译到浏览器中运行，直接在前端进行解码。

• 实测：此方案虽然也是软解，但实测性能不错（能实时高帧率播放20路屏幕流），后续有空讲解此方案

方案二：FFmpeg 服务端转发

在服务端使用 FFmpeg 将 H264 裸流转封装为 WebM/HLS/FLV 等浏览器支持的格式。

• 实测：兼容性好，前端实现简单，但是需要服务端部署转码服务，实测转码+传输无法达到实时性要求

方案三：Broadway.js（不推荐）

• 此库年久失修，且输出的YUV数据色彩范围也有问题，但是此YUV+Canvas方案，性能略高于JMuxer

这里开始介绍使用 JMuxer 库，结合 WebSocket 和 MSE ，实现前端H264裸流的解码和实时播放。

正文开始

1. 安装jmuxer

这个不多说，npm直接装：

npm install jmuxer

2. 创建一个video元素用于播放

<div class="screen">
  <video id="video" playsinline ref="video"></video>
  <el-button type="primary">开始播放</el-button>
</div>

3. 初始化JMuxer

...

const jmuxer = new JMuxer({
    node: this.$refs.video,
    mode: 'video',      
    fps: 30,              
    flushingTime: 0,     
})
...

4. 连接WebSocket接收裸流

const connect = new WebSocket('ws://192.168.1.68:34188/player/stream');
connect.binaryType = 'arraybuffer'

connect.onopen = () => {
    console.log('WebSocket连接已建立');
}

connect.onmessage = (_event) => {
    jmuxer.feed({
        video: new Uint8Array(_event.data)
    })
}

5. 寥寥几行代码，到这里视频就可以正常播放了，且能达到帧数和实时性要求，jmuxer同时也支持H265

• 但是要注意的是，大量多路视频解码播放场景中，不适合采用此方案，实测10路视频解码只有几帧且CPU飙升

参考资料

• JMuxer NPM
• Media Source Extensions API - MDN