浏览器端将图片、音频、文本流合并导出为视频的方案问询

核心依赖浏览器原生提供的WebCodecs API实现内存编解码，无需WASM依赖，也不需要实时播放音视频等待，处理速度只和设备算力挂钩，远快于逐帧实时渲染方案。

前置准备 #

首先完成三类资源的预处理：

• 调用createImageBitmap()方法将内存中的海报图数据解码为ImageBitmap对象，避免后续重复解码开销
• 若音频缓冲区为编码后数据（如MP3、AAC），调用AudioDecoder接口解码为原始PCM音频帧；若已经是PCM格式可直接使用
• 解析SRT/WebVTT字幕文件为结构化数组，每个元素包含startTime（开始时间戳，单位微秒）、endTime（结束时间戳）、text（字幕内容）三个属性

核心处理流程 #

1. 批量生成视频帧 #

不需要使用可见Canvas也不需要实时播放，直接通过OffscreenCanvas在内存中批量生成：

• 根据你需要的输出视频分辨率创建对应尺寸的OffscreenCanvas，获取2D渲染上下文
• 先将海报图一次性绘制到Canvas上下文，后续无字幕变化的时间段可直接复用该画面，不需要重复绘制
• 遍历字幕列表，在字幕开始和结束的时间点，先清除之前的字幕绘制区域，再将新的字幕文本绘制到Canvas指定位置，生成对应时间戳的视频帧
• 所有视频帧统一传入VideoEncoder接口，编码为H.264等标准编码格式的编码帧

2. 音频编码 #

调用AudioEncoder接口，将预处理得到的PCM音频帧编码为AAC等和视频编码兼容的音频编码帧

3. 容器封装 #

使用纯JS实现的轻量封装库，无需依赖FFmpeg，直接在内存中将编码后的视频帧、音频帧合并为标准MP4文件：

• 若需要字幕独立为轨道，可将解析后的字幕数据封装为MP4的字幕轨道一同写入
• 若需要将字幕烧录到视频画面中，只需要在之前生成视频帧的步骤中完成字幕绘制即可，不需要额外处理字幕轨道

降级兼容方案 #

如果目标浏览器不支持WebCodecs API，可使用优化后的MediaRecorder方案，也不需要实时播放：

• 将OffscreenCanvas的输出流、音频缓冲区转换得到的MediaStream合并为单一媒体流
• 修改流的时间戳倍率，不需要按照实时速度推帧，可快速将所有音视频帧推送给MediaRecorder完成录制，处理速度远快于实时播放方案

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