如何通过HTML5 video标签播放WebSocket传输的ArrayBuffer视频流？

嘿，这个问题问到点子上了！直接给你明确结论：HTML5 video标签没办法直接播放通过WebSocket传来的原始ArrayBuffer视频流，但通过配套的API处理后是可以实现实时播放的，下面给你详细拆解：

为什么不能直接播放？ #

video标签本身需要的是符合标准媒体封装格式（比如MP4、WebM）的流数据，而且它依赖浏览器的媒体管道来解析编码、封装信息。你通过WebSocket传的ArrayBuffer如果只是原始的视频帧数据，没有封装格式的元数据（比如编码信息、时间戳、帧顺序），video标签根本不知道该怎么解析这些二进制数据，自然没法播放。

可行的实现方案（核心是MediaSource Extensions） #

要实现实时播放，关键是用MediaSource Extensions (MSE) API，它能让我们把分段的媒体数据喂给video标签，步骤大概是这样：

• 服务器端处理：
  不能直接传原始视频帧的ArrayBuffer，得先把视频按MSE要求的格式拆分：

  • 先发送媒体的元数据片段（比如MP4的moov盒子），让客户端知道视频的编码、分辨率等信息；
  • 然后分块发送媒体数据片段（比如MP4的mdat盒子），每个片段要足够小，保证实时性。

• 客户端处理（核心代码示例）：
  用MSE创建一个可写入的媒体源，把WebSocket收到的ArrayBuffer转换成合适的格式，再喂给video标签：

  // 获取页面上的video元素
  const video = document.getElementById('live-video');
  // 创建MediaSource实例
  const mediaSource = new MediaSource();
  // 将MediaSource的URL赋值给video的src
  video.src = URL.createObjectURL(mediaSource);
  
  let sourceBuffer;
  // 监听MediaSource的sourceopen事件，准备接收数据
  mediaSource.addEventListener('sourceopen', () => {
    // 添加SourceBuffer，这里的mime类型要和服务器端的视频格式完全匹配
    // 比如MP4的话：'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    
    // 建立WebSocket连接
    const ws = new WebSocket('ws://your-server-address');
    // 设置接收二进制数据的类型为arraybuffer
    ws.binaryType = 'arraybuffer';
  
    // 接收服务器传来的视频数据
    ws.onmessage = (event) => {
      if (event.data instanceof ArrayBuffer) {
        // 等待SourceBuffer处于可写入状态时再添加数据
        if (!sourceBuffer.updating) {
          sourceBuffer.appendBuffer(new Uint8Array(event.data));
        }
      }
    };
  });
  

几个关键注意事项 #

• 格式匹配：客户端SourceBuffer的mime类型必须和服务器发送的媒体片段格式完全一致，否则会报错；
• 分段顺序：服务器发送的媒体片段必须按时间顺序传递，否则会出现播放跳帧、卡顿的问题；
• 浏览器兼容性：大部分现代浏览器都支持MSE，但要注意一些旧版浏览器的限制，比如IE11只支持特定的MP4编码；
• 实时性优化：媒体片段的大小要适中，太大可能导致延迟，太小则会增加网络开销。

内容的提问来源于stack exchange，提问作者Vladyslav Hrytsenko