如何使用MediaStream录制

Question

好的，我会尽量把我的问题说清楚，但我还是很困惑，所以如果我没能理解你的意思，请告诉我。

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

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

录制一段简短的捕获视频。问题是，当我尝试定义新的流(MediaRecorder)时，我被告知它是未定义的。我以前没有使用过这个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录制(或媒体录制器API，在它定义的MediaRecorder JS对象之后)现在已经在桌面上的两个主要浏览器中实现：

在chrome:// video

• 中，
• Firefox 30音频+标志仅用于视频和实验网络平台。
• 音频+视频

容器

• 都会记录到.webm containers。

视频编解码器

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

音频编解码器

• 火狐录制Vorbis音频@ 44.1 kHz
• Chrome 49录制Opus音频@ 48 kHz

演示/GitLab：

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

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

从Chrome47开始，getUserMedia()请求只允许来自安全来源: HTTPS或localhost。

进一步阅读：

• MediaRecorder spec on w3c
• HTML5’s Media Recorder API in Action on Chrome and Firefox on addpipe.com
• MediaRecorder API on mozilla.org
• Chrome 47 WebRTC: media recording, secure origins on developers.google.com
• MediaRecorder API Available in Chrome 49 on developers.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录音演示。

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