如何用JS拼接WebM视频片段？SaaS录屏架构优化求建议

可行的JS端视频拼接方案 #

1. 基于ffmpeg.wasm的快速拼接（推荐） #

利用浏览器端FFmpeg实现无编码拼接，核心前提是所有分段视频的编码参数完全一致（分辨率、帧率、码率、编码格式），这样能直接用-c copy模式跳过转码，速度极快。

• 操作步骤：
  • 从S3加载所有录屏片段到浏览器（或用IndexedDB暂存，避免占用过多RAM）
  • 引入ffmpeg.wasm库，执行拼接命令：

    await ffmpeg.run(
      '-i', 'concat:segment1.webm|segment2.webm|segment3.webm',
      '-c', 'copy',
      'output.webm'
    );
    

  • 将生成的完整视频上传回S3
• 优势：无需服务器，复用FFmpeg成熟的拼接逻辑，兼容多种格式，同参数下几乎无性能损耗

2. 手动解析WebM容器拼接（极致性能） #

如果用MediaRecorder生成WebM格式，可直接操作容器结构实现零编码拼接：

• WebM基于Matroska，每个分段包含独立的EBML头和Segment块，只需保留第一个片段的EBML头，后续片段只取Segment部分拼接
• 借助ebml.js库解析容器结构：
  • 解析第一个片段，提取EBML Header和初始Segment
  • 遍历后续所有片段，跳过EBML Header，仅提取Segment数据块
  • 将所有Segment拼接在第一个Header后，生成完整WebM文件
• 优势：纯容器操作，速度比ffmpeg.wasm更快，完全不占用编码资源，适合超长时间视频拼接

分段录屏架构优化建议 #

1. 替换EC2为AWS Lambda + EFS #

• 用Lambda按需触发拼接任务，相比EC2长期运行，成本可降低70%以上
• 将S3的录屏片段同步到EFS（Lambda可挂载EFS），使用预打包FFmpeg的Lambda层执行拼接命令
• 配置Lambda的并发数和内存大小（建议2GB以上内存提升FFmpeg速度），完成后将结果回传S3

2. 前端直接拼接后上传 #

• 若用户网络带宽充足，直接在前端完成拼接再上传到S3，彻底省去服务器拼接成本
• 配合IndexedDB存储分段片段，避免长时间录制占用过多RAM，拼接时再批量读取

3. 优化分段录制策略 #

• 调整分段触发条件：不是固定时长，而是当MediaRecorder的缓冲区达到指定大小（如500MB）再保存片段，减少总片段数量，降低拼接复杂度
• 录制时强制统一编码参数：固定分辨率、帧率、码率、编码格式（如强制用VP9编码WebM），确保所有分段参数一致，为后续无编码拼接打基础

4. 改用AWS MediaConvert处理拼接 #

• MediaConvert是AWS专门的媒体处理服务，支持批量视频拼接，无需自行维护EC2脚本
• 配置拼接任务时选择“直接复制流”模式，避免转码，处理速度和成本都比自定义EC2脚本更优
• 可结合S3事件触发，当所有分段上传完成后自动启动MediaConvert任务

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