HTML5 录制中等质量的视频以供 Safari 播放

Posted 2023-05-07

【中文标题】HTML5 录制中等质量的视频以供 Safari 播放

【英文标题】：HTML5 record moderate video quality for upload to be playable by Safari

【发布时间】：2018-01-26 18:24:30

【问题描述】：

我正在创建一个基于网络的移动应用程序，应该可以在其中上传视频记录。 有两种方法可以实现：

使用输入：

<input type="file" name="video" accept="video/*" capture></input>

使用 RTC MediaRecorder：

var recordedBlobs = [];
function handleDataAvailable(event) 
    if (event.data && event.data.size > 0) 
        recordedBlobs.push(event.data);
    


var options = 
    mimeType: 'video/webm',
    audioBitsPerSecond : 128000,
    videoBitsPerSecond : 2500000


mediaRecorder = new MediaRecorder(window.stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);

虽然第一个选项总是有效，但主要问题是它使用内置的移动相机应用程序，使我们无法控制质量，这再次导致文件可能非常大（尤其是在 android 上）

第二个版本让我们可以完全控制质量，并让操作系统创建适度的文件大小，这些文件大小在应用程序中作为内容是可以接受的。 ios/Safari 尚不支持此功能，但这没关系，因为 iPhone 在从浏览器启动时默认记录小文件。因此，当用户代理是 iOS 时，我可以激活选项 1。

现在的问题：

如果可以的话，第一个选项会很好：

控制移动应用的视频录制质量 在上传前对录制进行后期处理以更改分辨率

选项2的问题是只支持.webm容器类型，Safari不支持这种类型。

所以我有点卡住了 - 现在看来我唯一的选择是在上传时将传入的 .webm 文件后转换为服务器上的 .mp4。但这似乎是服务器上一个非常消耗 CPU 的进程。

有什么好主意吗？

【问题讨论】：

如果要进行后处理，则必须将.webm 文件存储在客户端或服务器上，并将其转换为.mp4 文件。在服务器端，您可以使用 FFMpeg 来完成。在客户端，您可以使用开源库进行转换。

我可以说我一直在使用服务器端的 ffmpeg 将 webm 转换为 mp4。我什至做了一个很好的脚本，可以用百分比显示进度。但是转换既费时又费 CPU。我想做一个 ffmpeg -c 复制，从而省略重新编码。但不幸的是，这对于 webm 容器是不可能的。如果我可以运行一个 ffmpeg 命令，无需重新编码就可以转换，那么这就是解决方案。

“如果我可以运行一个 ffmpeg 命令，它可以在不重新编码的情况下进行转换” - 不可能。如果不重新编码，就无法将一种格式转换为另一种格式，.webm 和 .mp4 截然不同。

为什么 Safari 不能像所有其他浏览器一样处理 webm ......这不是一个真正的问题，只是我的挫败感。

因为苹果必须与众不同。他们每天早上醒来都在想“我们今天怎么才能摧毁圆顶开发商？”

【参考方案1】：

您可以将 H.264 录制到 webm 容器中。 Chrome 支持此功能。

var options = mimeType: 'video/webm;codecs=h264';

media_recorder = new MediaRecorder(stream, options);

虽然它是视频格式和容器的常见组合 - 它是有效的。

现在您可以将 H.264/webm 更改为 H.264/mp​​4，而无需使用 ffmepg（-vcodec 复制）对视频流进行转码。

您也可以尝试使用 ffmpeg.js 在 javascript 中从 webm 重新包装到 mp4 客户端。

【讨论】：

我刚刚尝试在视频/webm 上使用 -vcodec 副本；codecs=h264 录制的提要。我运行了这个命令：ffmpeg test.webm -vcodec copy test.mp4 得到以下错误：输出文件 #0 不包含任何流

如果我可以做非转码格式更改，那肯定是我需要的解决方案。

我忘了-i :-D

该死的，它可以在 Chrome 桌面浏览器上运行，但不能在 Android 手机上运行 :-( 它似乎完全忽略了 codecs=h264，只使用 VP8。

什么版本的安卓？在 MediaRecorder 中启用 H.264 是相对的。