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

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

目标：使用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）上才能查看的格式。

对我而言，唯一的跨平台工作视频是从野生动物园浏览器拍摄的视频，也是上图中从左起第5个视频。

在MediaCapture api中使用什么正确的容器/编码来使输出文件可跨平台播放？

编辑-

我们最终使用AWS ElasticTranscoder构建了一个转码管道，该管道将上载的视频转换为可以在所有平台上播放的常规预设进行转码，从而创建一个转换后的视频文件。

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

解决方法

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

$('#output_col').replaceWith("<%= j render 'output',capacité_emprunt_maximal: @capacité_emprunt_maximal,montant_mensuel_maximal: @montant_mensuel_maximal,taux_interet: @taux_interet,taux_assurance: @taux_assurance %>");

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

Chrome支持webm。 Safari并非如此（所有iOS浏览器均基于Safari，因此是您的手机问题）。

您说在Safari上运行，这会输出可播放的视频。使用ffprobe可以查看Safari上输出了哪些编解码器/容器-我猜想容器/编解码器中会发生变化。

由于视频是 h264，因此您只需将容器更改为mp4，它就可以在任何地方播放。这是从一个容器到另一个容器的“副本”，而不是代码转换，但是您仍然需要ffmpeg：）

以下信息可能会有所帮助：here