如何使用媒体流录制

Question

好的，我会尽量让我的问题尽可能清楚，但我很困惑，所以如果我没有传达信息，请告诉我。

我正在尝试使用 getUserMedia 来使用网络摄像头，然后使用这个

http://www.w3.org/TR/mediastream-recording/

录制简短的捕获视频。问题是，当我尝试定义新的 MediaRecorder(stream) 时，我被告知它是未定义的。我以前没有使用过这个api，所以我真的不知道我错过了什么。以下是相关代码：

function onVideoFail(e) {
console.log('webcam fail!', e);
};

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||     navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia;


    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true, audio: false}, function(stream){
        var video = document.querySelector('video');
        var recorder = new MediaRecorder(stream); <<<<<< THIS IS MY PROBLEM SPOT
        video.src = window.URL.createObjectURL(stream);
        video.play();

        // webcamstream = stream;
        // streamrecorder = webcamstream.record();
        }, onVideoFail);
    } else {
    alert('failed');
    }
} else {
alert('getUserMedia() is not supported by this browser!!');
}

我一直在尝试查看此内容以供参考：

HTML5 getUserMedia record webcam, both audio and video

Answer 1

MediaStream Recording（或 Media Recorder API 在它定义的MediaRecorder JS 对象之后）现已在桌面上的 2 个主要浏览器中实现：

• Firefox 30 音频 + 视频
• Chrome 47, 48 仅适用于在 chrome://flags 中启用 experimental Web Platform 的视频。
• Chrome 49音视频

容器：

• 两者都记录到 .webm 容器中。

视频编解码器：

• 均录制 VP8 视频
• Chrome 49+ 可以录制 VP9 视频
• Chrome 52+ 可以录制 H.264 视频

音频编解码器：

• Firefox 以 44.1 kHz 录制 Vorbis 音频
• Chrome 49 记录 Opus 音频@48 kHz

演示/GitLab：

• https://simpl.info/mediarecorder/
• https://addpipe.com/media-recorder-api-demo/

确保在 HTTPS 或 localhost 上运行这些演示：

从 Chrome 47 开始，仅允许来自安全来源的 getUserMedia() 请求：HTTPS 或 localhost。

进一步阅读：

• MediaRecorder spec 在 w3c 上
• HTML5’s Media Recorder API in Action on Chrome and Firefox 在 addpipe.com 上
• MediaRecorder API 在 mozilla.org 上
• Chrome 47 WebRTC: media recording, secure originsdevelopers.google.com
• MediaRecorder API Available in Chrome 49developers.google.com

免责声明：我在 Pipe 工作，我们处理视频录制。

Answer 2

我目前正在使用这个API，我发现我们的它目前只在firefox的Nightly版本上实现，它只能录制音频。

它没有在 Chrome 上实现（据我所知）。

以下是我的使用方法，如果有帮助的话：

function record(length,stream) {
    var recorder = new window.MediaRecorder(stream);

    recorder.ondataavailable = function(event) {
        if (recorder.state == 'recording') {
            var blob = new window.Blob([event.data], {
                type: 'audio/ogg'
            });

            // use the created blob

            recorder.stop();
        }
    };

    recorder.onstop = function() {
        recorder = null;
    };

    recorder.start(length);
}

Answer 3

我在simpl.info/mediarecorder 放了一个 MediaStream Recording 演示。

这目前适用于 Firefox Nightly，正如@Apzx 所说，它只是音频。 Chrome 有一个Intent to Implement。

Answer 4

从版本 49 开始，Chrome 现在支持 MediaRecorder API。您现在可以录制 MediaStream 对象。不幸的是，如果您要构建的产品必须为比最新版本的 Chrome 更早的浏览器记录 MediaStreams（至少在撰写本文时），那么您将需要使用 WebRTC 媒体服务器/网关。

基本思想是在服务器上实例化对等连接，并且本地对等将视频和/或音频流附加到其连接对象以发送到服务器对等。然后，服务器侦听传入的 WebRTC 流并将其记录到文件中。您可能想查看几个媒体服务器：

• Kurento
• Janus

我个人正在使用 Kurento 并用它录制视频流并取得了巨大成功。

为了让媒体服务器正常工作，您需要启动自己的应用服务器来处理ICE Candidates 的信令和处理。这很简单，Kurento 用 Node 和 Java 提供了一些相当不错的 examples。

如果您的目标受众是普通观众并使用媒体服务器，那么您可能还需要 STUN 或 TURN 服务器。这些服务器本质上使用网络拓扑来获取媒体服务器的公共 IP 和客户端的公共 IP。请注意，如果任一端（媒体服务器或客户端）位于symmetric NAT 后面，则 STUN 服务器将不够用，您将需要使用 TURN 服务器（可以找到免费的 here）。没有太多细节，要记住的一件好事是 STUN 服务器充当信令网关，而 TURN 服务器充当中继网关。这意味着媒体流实际上将通过 TURN 服务器，而媒体流将从 RTC 对等连接直接传递到另一个连接。

希望这会有所帮助。如果您真的需要 RTC 录制功能，那么您将走上一条漫长的道路，因此请确保它是值得的。

Answer 5

另请参阅RecordRTC，它为 Chrome 提供了大致模拟 MediaStream Recording 功能的解决方法。火狐文档是here