使用WebRTC MediaRecorder录制跨平台（H.264？）视频

Question

我在我的MediaRecorder实现中指定了以下内容：

const getMediaRecorderOptions = function () {
    var options = { mimeType: "video/webm;codecs=vp8" }; // 9 was lagggy, cpu-intensive

    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        logger.recorderLog(options.mimeType + " is not Supported");
        options = { mimeType: "video/webm;codecs=vp8" };

        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
            logger.recorderLog(options.mimeType + " is not Supported");
            options = { mimeType: "video/webm" };

            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                logger.recorderLog(options.mimeType + " is not Supported");
                options = { mimeType: "" };
            }
        }
    }
    return options;
}

很显然，这只是针对不支持iOS Safari或MacOS的webm格式而言。我试图避免双倍存储和引入编码复杂性。是否有任何方法让Chrome上的MediaRecorder可以直接记录到跨平台容器格式，无论平台如何？

- SB2055

Answer 1

您应该能够录制为webm/h.264格式

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

media_recorder = new MediaRecorder(stream, options);

所以您已经拥有了适合跨平台的视频格式（H.264）在WebM容器中。

现在，您可以尝试使用ffmpeg.js，并将容器从WebM更改为mp4-复制H.264流-无需转码（-vcodec copy）。

我在Chrome中记录为webm / h.264，但我没有尝试使用ffmpeg.js重新包装它。

- Markus Schumann

---

整洁 - 我能在iOS / macOS上播放它们吗？我印象中Safari / Chrome iOS不支持播放任何webM容器。 - SB2055

我怀疑WebM/H.264在Safari中无法播放，但从理论上讲 - 因为我没有尝试过 - 您可以尝试使用ffmpeg.js将容器从WebM/H.264更改为MP4/H.264，直接在录制浏览器内作为录制过程的一部分。由于您不需要进行转码 - 视频仍然是H.264格式 - 这应该是一个相对轻量级的操作。 - Markus Schumann

我已经在这个问题上工作了很长时间，仍在努力弄清楚。像华为P9这样的Android设备附带的Chrome Android不会有H.264，尽管它通过了上面的测试，但它不会以H.264格式记录。Safari不认识WebM，它只认识带有H264的MP4/mpeg。此外，三星S9的非默认浏览器通过了测试，并且可以仅使用WebM容器记录H.264。 - Nisim Joseph

@Tom 我希望只有“浏览器”播放视频。你需要处理浏览器、浏览器版本、操作系统和操作系统版本。你的编解码器字符串可能是错误的或者与视频/音频流不匹配。 - Markus Schumann

@Tom - 你需要解析录制的视频，找到SPS/PPS并组装正确的编解码器字符串。由于你的视频在没有它的情况下播放得很好 - 我不确定你想要实现什么。 - Markus Schumann