如何使用JavaScript提取视频中的内嵌字幕流

问题根因 #

当前W3C关于MediaStream及captureStream()的规范确实未要求浏览器暴露音视频之外的内嵌字幕轨道，你观测到的仅返回音视频轨是标准实现下的正常表现。

可行解决方案 #

方案1：使用原生textTracksAPI读取（优先推荐）

只要你使用的视频封装格式、字幕编码符合浏览器支持范围（如MP4内嵌mov_text字幕、WebM内嵌WebVTT字幕），直接通过<video>元素自带的textTracks属性即可获取所有内嵌字幕轨，无需调用captureStream：

const videoEle = document.querySelector('video');
// 需等待视频元数据加载完成后读取轨道
videoEle.addEventListener('loadedmetadata', () => {
  const subtitleTracks = Array.from(videoEle.textTracks).filter(track => track.kind === 'subtitles');
  subtitleTracks.forEach(track => {
    // 开启字幕原生显示
    track.mode = 'showing';
    // 监听字幕变化可获取实时字幕内容做自定义渲染
    track.addEventListener('cuechange', () => {
      const activeCues = track.activeCues;
      if(activeCues.length) {
        console.log('当前字幕：', activeCues[0].text);
      }
    })
  })
})

方案2：前端FFmpeg解析提取字幕

如果是MKV等浏览器不支持原生解析字幕的封装格式，可以使用ffmpeg.wasm在前端直接提取内嵌字幕流，无需后端参与：

1. 把视频文件加载为ArrayBuffer传入ffmpeg.wasm实例
2. 执行导出命令ffmpeg -i 输入视频文件名 -map 0:s:0 输出字幕.vtt提取字幕轨为SRT/WebVTT格式
3. 提取完成后通过<track>标签关联到视频元素，或者自行实现字幕渲染逻辑

方案3：实时流场景适配

如果你的场景必须通过MediaStream链路传输（如直播、实时通话），可以提前把字幕烧录到视频轨中，或者单独把字幕内容通过WebRTC DataChannel按时间戳同步传输，接收端对齐视频时间渲染即可。

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