JavaScript MediaRecorder 不同浏览器之间的视频格式兼容性

Question

简介

在浏览器上使用 MediaRecorder 录制视频流时，根据浏览器（Chrome、Safari 或 Firefox），MediaRecorder 可以以特定格式录制视频。

下表显示了 MediaRecorder 可以在每个浏览器中录制的视频格式/容器（我通过使用 isTypeSupported 静态方法获得此信息）。 另外，这篇文章使用 isTypeSupported 方法显示了不同浏览器上所有支持的 MediaRecorder 格式的表格。

浏览器	录音格式
铬	.WEBM、.MKV
歌剧	.WEBM、.MKV
边缘	.WEBM、.MKV
火狐	.WEBM
野生动物园	.MP4

当您想播放视频时，并非所有浏览器都支持相同的格式。 下表显示了每个浏览器可以播放的视频格式（可能不准确）。

浏览器	可以播放视频格式
铬	.MP4、.WEBM、.MKV
歌剧	.MP4、.WEBM、.MKV
边缘	.MP4、.WEBM、.MKV
火狐	.MP4、.WEBM
野生动物园	.MP4

问题

我有一个网络应用程序，用户可以在他/她的浏览器上录制视频，然后将该视频上传到数据库。

之后，其他用户可以访问该网站并在他们的浏览器上观看该视频。 如果用户在 Safari 浏览器上录制视频，则录制的视频格式受所有浏览器支持（MP4），但如果用户使用 Chrome 或 Firefox，则录制的视频格式受除 Safari 之外的所有浏览器支持（WEBM）。

有没有办法以可以在所有浏览器上播放的格式录制视频（例如 MP4）？

1. 我尝试使用 video.js npm 包但没有成功。
2. 我也尝试过使用FFMPEG在客户端转换视频，但与网站相比，处理量巨大，并且需要很长时间。

我正在寻找一种只能在浏览器上完成而无需转换视频格式的解决方案。

Answer 1

使用 cloudinary 或类似的 CDN。我编写了一些代码来检测设备记录的浏览器（如您所说，在桌面 chrome 或 firefox webm 的情况下是首选），然后将其上传到像 cloudinary 这样的服务时，您可以即时以任何格式将其拉回更改后缀（例如 mp4 才有意义）。

注意：Safari 上的 chrome 实际上被认为是 Safari，因为它基于 Safari（我花了一段时间才弄清楚！）

希望业界都坚持一个标准！