HTML中如何将序列图像合成为视频 能否使用OpenCV.js实现

可以通过OpenCV.js实现序列帧合成视频的需求，且全程不需要SharedArrayBuffer支持，也不需要额外配置跨域隔离响应头，适配大多数无法修改服务端响应头的部署场景。

和ffmpeg.wasm的差异 #

你提到的ffmpeg.wasm要求SharedArrayBuffer，本质是因为默认分发的版本是多线程编译构建，WASM多线程能力必须依赖SharedArrayBuffer做内存共享，如果你不想做跨域隔离配置，要么换单线程编译版的ffmpeg.wasm，要么就可以用OpenCV.js的方案。

具体实现步骤 #

• 统一序列帧参数：提前把页面上所有要合成的图像、canvas帧对齐成相同分辨率、匹配对应输出帧率的时序，避免合成后出现画面拉伸、跳帧问题。
• 初始化视频写入器：引入OpenCV.js后，通过cv.VideoWriter类初始化写入实例，根据需求选择编码格式：
  • 优先选VP8编码输出WebM格式，是OpenCV.js默认构建支持度最高的选项，不会出现编码缺失问题
  • 如果需要输出MP4格式，要确认你使用的OpenCV.js构建包内置了AVC/H.264编码支持，否则导出的文件会无法播放
• 帧格式转换：从canvas、img标签拿到的图像数据默认是RGBA色彩空间，要通过cv.cvtColor接口转成BGR格式，再写入VideoWriter，避免出现色彩倒置问题。
• 逐帧写入后导出：所有帧写入完成后调用release方法释放写入器资源，即可从内存中拿到合成完成的视频Blob，直接用于页面播放或者本地下载。

简单示例代码 #

// 等待OpenCV.js初始化完成后执行
cv.onRuntimeInitialized = () => {
  const fps = 30;
  const frameWidth = 1280;
  const frameHeight = 720;
  // 初始化VP8编码的WebM写入器
  const fourcc = cv.VideoWriter.fourcc('V', 'P', '8', '0');
  const writer = new cv.VideoWriter();
  writer.open('output.webm', fourcc, fps, new cv.Size(frameWidth, frameHeight), true);

  // 逐帧处理序列图像，frameList是提前收集的所有页面帧对应canvas
  frameList.forEach(canvas => {
    const ctx = canvas.getContext('2d');
    const imgData = ctx.getImageData(0, 0, frameWidth, frameHeight);
    const mat = cv.matFromImageData(imgData);
    const bgrMat = new cv.Mat();
    // RGBA转BGR适配写入要求
    cv.cvtColor(mat, bgrMat, cv.COLOR_RGBA2BGR);
    writer.write(bgrMat);
    // 释放临时Mat资源避免内存泄漏
    mat.delete();
    bgrMat.delete();
  });

  // 完成写入，拿到视频Blob
  writer.release();
  // 后续可通过URL.createObjectURL处理Blob实现下载/页面播放
}

注意事项 #

• 大分辨率、长时长视频合成时，单线程计算会占用较多主线程资源，可以把合成逻辑放到普通Web Worker中执行，不需要SharedArrayBuffer也能正常运行，只是合成速度比多线程版ffmpeg稍慢。
• 注意及时调用delete()方法释放不再使用的cv.Mat对象，否则会出现内存溢出导致页面崩溃。

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