javascript - 如何使用 MediaStream 录制

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 中打开实验性网络平台的视频。
• Chrome 49音频+视频

容器:

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

视频编解码器:

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

音频编解码器:

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

演示/GitLab:

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

确保在 HTTPS 或本地主机上运行这些演示:

Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or 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 origins在 developers.google.com 上
• MediaRecorder API Available in Chrome 49在 developers.google.com 上

免责声明:我在处理视频录制的 Pipe 工作。