如何从JPG图片序列生成兼容HTML5 video元素的MediaStream？

你已经持有帧URL、帧率、单帧时长参数，完全可以生成兼容HTML5 video的MediaStream，两种方案的适配场景和实现逻辑如下：

方案1：Canvas.captureStream() 方案（改造成本最低） #

你当前已经在用requestAnimationFrame绘制canvas播放序列帧，只需要加少量代码即可适配video播放：

• 创建和序列帧尺寸一致的canvas（不需要挂载到DOM），调用canvas.captureStream(fps) 即可获取MediaStream实例，参数填你已有的帧率值
• 将MediaStream直接赋值给video元素的srcObject属性，就能通过video播放
• 原有序列帧绘制逻辑完全可复用，只需要保持绘制节奏和预设帧率对齐即可

代码示例 #

// 预设参数
const frameUrls = [/* 你的JPG序列URL列表 */];
const fps = 30; // 替换为你的实际帧率
const frameDuration = 1000 / fps;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let isPlaying = true;
let currentFrame = 0;

// 加载第一帧初始化画布尺寸
const firstImg = new Image();
firstImg.crossOrigin = 'anonymous'; // 跨域场景需要加
firstImg.onload = () => {
  canvas.width = firstImg.width;
  canvas.height = firstImg.height;
  // 获取MediaStream绑定到video
  const stream = canvas.captureStream(fps);
  const video = document.querySelector('#target-video'); // 替换为你的video元素选择器
  video.srcObject = stream;
  video.play();

  // 原有帧绘制逻辑
  function renderFrame() {
    if (!isPlaying || currentFrame >= frameUrls.length) return;
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      currentFrame++;
      setTimeout(renderFrame, frameDuration);
    };
    img.src = frameUrls[currentFrame];
  }
  renderFrame();
};
firstImg.src = frameUrls[0];

适用场景 #

• 不需要进度拖动、快进快退等非线性播放能力，仅需要线性播放
• 追求最小改造成本，复用现有播放逻辑
• 兼容性覆盖Chrome 51+、Firefox 43+、Safari 11+，适配绝大多数现代浏览器

方案2：MSE实时编码为fMP4（支持完整视频控制能力） #

如果需要和普通MP4一致的进度控制、快进快退能力，可以选择在前端将JPG序列实时编码为碎片化MP4（fMP4），通过MediaSource Extensions喂给video播放：

• 不需要持续运行canvas绘制逻辑，编码完成后播放行为和原生MP4完全一致
• 可以直接复用video原生的进度条、音量控制等能力，不需要额外封装控制逻辑
• 改造成本比方案1高，需要引入fMP4编码逻辑，且需要预加载足够的帧才能开始播放

内容的提问来源于stack exchange，提问作者Dominic Bou-Samra