javascript 如何使用 MediaStream 录制

How to use MediaStream Recording

提问by wvm2008

Ok, I'm going to try and make my question as clear as possible, but I'm pretty confused, so let me know if I'm not getting the message across.

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

I'm trying to use getUserMedia to use the webcam, and then use this

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

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

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

to record a brief captured video. Problem is, when I try to define new MediaRecorder(stream), I'm told that it is undefined. I haven't used this api before, so I don't really know what I'm missing. Here is the relevant code:

录制简短的拍摄视频。问题是，当我尝试定义新的 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!!');
}

I've been trying to look at this for reference:

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

HTML5 getUserMedia record webcam, both audio and video

HTML5 getUserMedia 记录网络摄像头，包括音频和视频

回答by Octavian Naicu

MediaStream Recording (or Media Recorder APIafter the MediaRecorderJS object it defines) has now been implemented in 2 major browsers on desktop:

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

• Firefox 30audio + video
• Chrome 47, 48only for video with experimental Web Platformon in chrome://flags.
• Chrome 49audio + video

• Firefox 30音频 + 视频
• Chrome 47、48仅适用于在 chrome://flags 中启用了实验性 Web 平台的视频。
• Chrome 49音频 + 视频

Containers:

容器：

• Both record to .webm containers.

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

Video codecs:

视频编解码器：

• Both record VP8 video
• Chrome 49+ can record VP9 video
• Chrome 52+ can record H.264 video

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

Audio codecs:

音频编解码器：

• Firefox records Vorbis audio @ 44.1 kHz
• Chrome 49 records Opus audio @ 48 kHz

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

Demos/GitLab:

演示/ GitLab：

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

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

Make sure you run these demos on HTTPS or localhost:

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

Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or localhost.

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

Further reading:

进一步阅读：

• MediaRecorder specon w3c
• HTML5's Media Recorder API in Action on Chrome and Firefoxon addpipe.com
• MediaRecorder APIon mozilla.org
• Chrome 47 WebRTC: media recording, secure originson developers.google.com
• MediaRecorder API Available in Chrome 49on developers.google.com

• w3c 上的MediaRecorder 规范
• HTML5 的媒体记录器 API 在addpipe.com上的 Chrome 和 Firefox上运行
• mozilla.org 上的MediaRecorder API
• Chrome 47 WebRTC：developers.google.com 上的媒体录制、安全来源
• MediaRecorder API在 developer.google.com 上的Chrome 49 中可用

Disclaimer: I work at Pipe where we handle video recording.

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

回答by Apzx

I am currently using this API, and I've found our it is currently only implemented on the Nightly version of firefox, and it can only record audio.

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

It isn't implemented on Chrome (to my knowledge).

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

Here is how I use it, if it can help:

这是我如何使用它，如果它可以帮助：

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);
}

回答by Sam Dutton

I put a MediaStream Recording demo at simpl.info/mediarecorder.

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

This currently works with Firefox Nightly and, as @Apzx says, it's audio only. There is an Intent to Implementfor Chrome.

这目前适用于 Firefox Nightly，正如@Apzx 所说，它只是音频。有一个为 Chrome实现的意图。

回答by Vinay

As of version 49, Chrome now has support for the MediaRecorder API. You may now record MediaStream objects. Unfortunately, if you're building a product that must record MediaStreams for browsers older than literally the latest version of Chrome (at least as of this writing), then you will need to make use of a WebRTC Media Server/Gateway.

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

The basic idea is that a peer connection is instantiated on a server and that your local peer attaches a video and/or audio stream to its connection object to be sent to the server peer. The server then listens to the incoming WebRTC stream and records it to a file. A couple of media servers you may want to check out:

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

• Kurento
• Janus

• 库伦托
• 雅努斯

I personally am using Kurento and recording streams with it with great success.

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

In order to get a media server to work, you will need to spin up your own app server that handles signaling and handling of ICE Candidates. This is pretty simple, and Kurento has some pretty good exampleswith Node and Java.

为了让媒体服务器工作，你需要启动你自己的应用服务器来处理ICE Candidates 的信令和处理。这很简单，Kurento 有一些很好的Node 和 Java示例。

If you are targeting a general audience and are using a media server, you will also probably need a STUN or TURN server. These servers essentially use the network topology to get your media server's public IP and your client's public IP. Beware that, if either end (the media server or client) lies behind a symmetric NAT, the STUN server will not be enough and you will need to use a TURN server (a free one can be found here). Without too much detail, a good thing to remember is that a STUN server acts as a signaling gateway where as a TURN server is a relay gateway. What that means is that the media streams will literally pass through a TURN server, whereas the media streams will pass from RTC peer connection to the other connection directly.

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

Hopefully this was helpful. If you really need RTC recording capabilities, then you're going to be going down a long road, so make sure it's worth it.

希望这是有帮助的。如果您真的需要 RTC 录音功能，那么您将走很长的路，所以请确保它是值得的。

回答by jesup

See also RecordRTC, which has workarounds for Chrome to roughly emulate the capability of MediaStream Recording. Firefox documentation is here

另请参阅RecordRTC，它具有 Chrome 的变通方法，可以粗略地模拟 MediaStream Recording 的功能。Firefox 文档在这里