HTML5记录了适中的视频质量，以便Safari可以播放上传

Question

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

使用输入：

<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上）

第二个版本使我们可以完全控制质量，并让os创建适度的文件大小，该大小在大小上可以接受，作为应用程序中的内容。iOS / Safari目前尚不支持此功能，但是可以这样做，因为默认情况下，iPhone从浏览器启动时会记录小文件。因此，当用户代理为iOS时，我可以激活选项1。

现在的问题：

如果我可以的话，第一种选择会很好：

1. 控制移动应用程序的视频录制质量
2. 后期制作录音以在上传之前更改分辨率

选项2的问题在于仅支持.webm容器类型，而Safari不支持该类型。

因此，我有点停滞不前-现在看来，我唯一的选择是在上传时将传入的.webm文件转换为服务器上的.mp4文件。但这似乎是服务器上CPU成本很高的过程。

有什么好主意吗？

Answer 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 copy）对视频流进行转码。

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