在 Chrome 上捕获的 MediaRecorder 无法在移动设备或 Safari 上播放

Question

目标：使用 MediaRecorder（或其他）api 生成可跨平台查看的视频文件。

失败：当前 api 回退到 google chrome 上的容器/编解码器，只能在 chrome 和高级桌面媒体播放器上查看，而不能在 Safari 或移动设备上查看。

！在 safari 上运行时相同的代码会在所有平台上生成一个工作视频文件。

    const mimeType = 'video/webm;codecs=H264'
    rec = new MediaRecorder(stream.current, { mimeType })
    rec.ondataavailable = e => blobs.push(e.data)
    rec.onstop = async () => {
      saveToFile(new Blob(blobs, { type: mimeType }))
    }

尝试了所有不同的容器和编解码器组合。还尝试用 MP4 文件容器覆盖 Blob 的 mimeType。从来没有成功过。

也试过：

https://github.com/streamproc/MediaStreamRecorder

https://github.com/muaz-khan/RecordRTC

同样的问题。我似乎 chrome 的容器/编解码器组合总是退回到只能在 chrome 或像 vlc 这样强大的桌面视频播放器上开箱即用的格式。

对我来说唯一的跨平台工作视频是从 safari 浏览器中截取的，是上图左起第 5 个。

在 MediaCapture api 中使用什么正确的容器/codac 以使输出文件可跨平台播放。

编辑 -

我们最终使用 AWS ElasticTranscoder 构建了一个转码管道，它获取上传的视频并使用可在所有平台上播放的通用预设对其进行转码，从而创建转换后的视频文件。

• 不幸的是，我提供的赏金已过期，但如果有人回答了最初的问题，我很乐意再次用赏金奖励他。

Answer 1

我认为你的问题可能在第一行：

    const mimeType = 'video/webm;codecs=H264'

您使用的容器是 webm，它通常使用编解码器 VP8、VP9。H264 是 mp4 容器中使用的编解码器。

Chrome 支持 webm。Safari 不支持（并且所有 iOS 浏览器都基于 Safari - 因此存在移动问题）。

你说在 Safari 上运行，这会输出一个可播放的视频。使用 ffprobe 查看 Safari 上输出的编解码器/容器 - 我猜测容器/编解码器发生了变化。

由于您的视频是h264，因此您只需将容器更改为 mp4，它就会在任何地方播放。这是从一个容器到另一个容器的“复制”，而不是转码，但您仍然需要 ffmpeg :)

这是一篇可能有帮助的文章：使用 WebRTC MediaRecorder 录制跨平台（H.264？）视频