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

Question

目标:使用 MediaRecorder(或 else)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 中使用以使输出文件可跨平台播放的正确容器/编解码器是什么。
编辑 -
我们最终使用 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 :)
这是一个可能有帮助的帖子: Recording cross-platform (H.264?) videos using WebRTC MediaRecorder