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中使用哪种正确的容器/编解码器，以使输出文件在各个平台上都可以播放。

编辑 -

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

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

- David Ben Ari

---

你能提供两个短视频供我们检查字节和编解码器设置吗？需要1个在所有浏览器中工作（是Safari制作的文件吗？），另一个不能工作（如果可能，使用MP4格式）。 - VC.One

@VC.One，我该如何在SO上分享mp4文件？ - David Ben Ari

你需要使用一个文件共享网站（例如：Dropbox 或 Google Drive）或将其放在你的网站上，并在此处粘贴一个直接的 mp4 链接。 - VC.One

Answer 1

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

。

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

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

Chrome支持webm。Safari不支持(webm)，所有iOS浏览器都是基于Safari的，因此您在移动端遇到了问题。

您说在Safari上运行时，输出了一个可播放的视频。使用ffprobe查看在Safari上输出的是什么编解码器/容器——我猜测容器/编解码器发生了变化。

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

以下是可能有帮助的文章：Recording cross-platform (H.264?) videos using WebRTC MediaRecorder

- Doug Sillars

---

谢谢，我通过使用AWS ElasticTranscoder避免了使用ffmpeg。顺便说一句，Safari支持webm格式。在特定的组合中，Chrome的问题在于它使用了一种谷歌VP8编解码器，这种编解码器不被其他浏览器支持，甚至包括移动版的Chrome。 - David Ben Ari