如何使用MediaStream Recording

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记录网络摄像头,包括音频和视频

Answer 1

MediaStream Recording(或它定义的JS对象后的Media Recorder APIMediaRecorder)现已在桌面上的两个主要浏览器中实现:

• Firefox 30音频+视频
• Chrome 47,48仅用于在chrome://标志中使用实验性Web平台的视频.
• Chrome 49音频+视频

容器:

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

视频编解码器:

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

音频编解码器:

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

演示/ GitLab:

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

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

从Chrome 47开始,getUserMedia()请求仅允许来自安全来源:HTTPS或localhost.

进一步阅读:

• 关于w3c的MediaRecorder规范
• 在addpipe.com 上的Chrome和Firefox上的HTML5媒体录制器API
• mozilla.org上的MediaRecorder API
• Chrome 47 WebRTC:媒体录制,来自 developers.google.com的安全起源
• MediaRecorder API在developers.google.com上的Chrome 49中提供

免责声明:我在Pipe处理视频录制.

Answer 2

我目前正在使用这个API,我发现它目前只在firex的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);
}