How to use MediaStream Recording

Question

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

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:

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

Answer 1

MediaStream Recording (or Media Recorder API after the MediaRecorder JS object it defines) has now been implemented in 2 major browsers on desktop:

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

Containers:

• Both record to .webm containers.

Video codecs:

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

Audio codecs:

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

Demos/GitLab:

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

Make sure you run these demos on HTTPS or localhost:

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

Further reading:

• 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

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