如何用MediaSource+Socket.io实现逐帧PNG直播？解决MediaSource提前关闭问题

问题背景 #

我正尝试通过Socket.io从服务器传输PNG帧搭建直播流。由于后续计划添加音频，选择使用MediaSource Extensions（MSE）进行测试，而非仅更新img标签或canvas。当前代码如下：

import { io } from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js";

const videoElement = document.getElementById('videoPlayer');
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);

const socket = io();

mediaSource.addEventListener('sourceopen', () => {
    sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

    socket.on('video-frame', (frame) => {
        const frameBlob = new Uint8Array(frame);

        sourceBuffer.appendBuffer(frameBlob);
    });
});

mediaSource.addEventListener("sourceclose", () => {
    console.log("Source Closed");
});

遇到的异常 #

抛出以下错误：

Uncaught (in promise) InvalidStateError: Failed to execute 'appendBuffer' on SourceBuffer': This SourceBuffer has been removed from the parent MediaSource.

经排查是MediaSource在添加任何帧前已关闭导致，请问原因是什么？如何用MediaSource Extensions实现逐帧PNG图片的直播？

问题原因 #

1. MIME类型完全不匹配：你创建SourceBuffer时指定的是video/mp4; codecs="avc1.42E01E, mp4a.40.2"，对应H.264视频+AAC音频的MP4容器格式，但实际传输的是PNG裸帧。浏览器检测到无法解析的媒体数据，会直接关闭MediaSource，导致后续调用appendBuffer报错。
2. 未处理SourceBuffer状态（次要）：即使MIME类型正确，appendBuffer也需要在SourceBuffer的updating状态为false时调用，但当前核心问题是格式不兼容。

基于MSE实现PNG帧直播的解决方案 #

MSE本质是为处理流式媒体容器（如MP4、WebM）设计的，直接传入PNG裸帧无法被解析，需按以下方式处理：

方案1：将PNG帧编码为标准媒体流（推荐，适配后续音频需求）

这是生产环境的标准做法，需在服务器端将PNG帧序列编码为浏览器支持的视频容器格式：

• 服务器端：用FFmpeg等工具将PNG帧实时编码为WebM（VP8/VP9）或MP4（H.264）流，示例命令（通过管道读取PNG帧并输出WebM流）：

  ffmpeg -f image2pipe -framerate 25 -i - -c:v libvpx-vp9 -f webm -
  

  编码后的流通过Socket.io发送给前端。
• 前端调整：

  import { io } from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js";
  
  const videoElement = document.getElementById('videoPlayer');
  const mediaSource = new MediaSource();
  videoElement.src = URL.createObjectURL(mediaSource);
  const socket = io();
  let sourceBuffer;
  const chunkQueue = [];
  
  mediaSource.addEventListener('sourceopen', () => {
      // 匹配服务器编码的WebM格式
      sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
      
      // 处理SourceBuffer空闲状态，依次发送队列中的流块
      sourceBuffer.addEventListener('updateend', () => {
          if (chunkQueue.length > 0 && !sourceBuffer.updating) {
              const chunk = chunkQueue.shift();
              sourceBuffer.appendBuffer(chunk);
          }
      });
  
      socket.on('video-stream', (chunk) => {
          const uint8Chunk = new Uint8Array(chunk);
          if (!sourceBuffer.updating) {
              sourceBuffer.appendBuffer(uint8Chunk);
          } else {
              chunkQueue.push(uint8Chunk);
          }
      });
  });
  
  mediaSource.addEventListener("sourceclose", () => {
      console.log("Source Closed");
  });
  

方案2：使用Chrome实验性ImageTrack API（仅限Chrome）

Chrome支持MSE的ImageTrack特性，可直接传输PNG/JPEG帧序列：

import { io } from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js";

const videoElement = document.getElementById('videoPlayer');
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);
const socket = io();
let imageTrack;
let frameIndex = 0;

mediaSource.addEventListener('sourceopen', async () => {
    const imageSourceBuffer = mediaSource.addSourceBuffer('image/png');
    imageTrack = await mediaSource.addImageTrack({ kind: "main" });
    
    socket.on('video-frame', (frame) => {
        const uint8Frame = new Uint8Array(frame);
        // 按25fps计算每帧时间戳（微秒单位）
        const timestamp = frameIndex * 40_000;
        imageTrack.addFrame(uint8Frame, { timestamp });
        frameIndex++;
    });
});

注意：该API为实验性特性，仅Chrome支持，不适合生产环境。

方案3：用Canvas快速验证（适合测试阶段）

若仅需验证PNG帧传输，后续再切换到标准媒体流，可直接用Canvas绘制：

import { io } from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js";

const canvas = document.getElementById('canvasPlayer');
const ctx = canvas.getContext('2d');
const socket = io();

socket.on('video-frame', (frame) => {
    const blob = new Blob([frame], { type: 'image/png' });
    const img = new Image();
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        URL.revokeObjectURL(img.src);
    };
    img.src = URL.createObjectURL(blob);
});

此方案无需编码，但后续添加音频时需额外处理音画同步问题。

内容的提问来源于stack exchange，提问作者Rui Gonçalves