在Chrome上捕获的MediaRecorder不能在移动或Safari上播放

Question

目标:使用MediaRecorder (或其他) api生成可查看的跨平台视频文件。

失败:当前api返回到google上的容器/编解码器，它只能在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 }))
    }

尝试了各种不同的容器和编解码器组合。还试图用mimeType文件容器覆盖Blob的MP4。无论发生什么事都没有成功。

也曾尝试过：

https://github.com/streamproc/MediaStreamRecorder

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

同样的问题。iI看起来就像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上运行，这会输出一个可播放的视频。使用ff探头查看Safari上输出了哪些编解码器/容器--我猜容器/编解码器中有一个变化。

因为您的视频是h264，所以您必须简单地将容器更改为mp4，它将在任何地方播放。这是一个从一个容器到另一个容器的“副本”，不是代码转换，但是您仍然需要ffmpeg :)

这里有一篇可能有帮助的帖子：Recording cross-platform (H.264?) videos using WebRTC MediaRecorder