6

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

Community
  • 1
  • 1
wvm2008
  • 2,864
  • 4
  • 21
  • 25
  • any errors in the browser console? lib not loaded or something? – intuitivepixel Jul 20 '13 at 23:02
  • Just this: Uncaught ReferenceError: MediaRecorder is not defined – wvm2008 Jul 20 '13 at 23:04
  • 1
    since the MediaRecorder is a very recent addition, if you are using chrome check if it's enabled chrome://flags etc. – intuitivepixel Jul 20 '13 at 23:06
  • Cross-Browser audio stream recording implementations: 1) https://github.com/muaz-khan/WebRTC-Experiment/tree/master/MediaStreamRecorder or 2) https://github.com/streamproc/MediaStreamRecorder / RecordRTC also supports it: https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC – Muaz Khan Sep 06 '13 at 08:28
  • Anybody know whether there's a way to get at the MediaStream's bytes via RTCPeerConnections? I'm need a way to get at the bytes without MediaStreamRecorder's emulated recorder (canvas elements of a video's frame). It results in very poor video quality. – Vinay Feb 02 '16 at 04:08

5 Answers5

6

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:

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:

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

octavn
  • 3,154
  • 32
  • 49
  • 2
    Shameless self promotion, but you may also want to take a look at the post on Web Fundamentals: https://developers.google.com/web/updates/2016/01/mediarecorder – Sam Dutton Feb 05 '16 at 15:31
5

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.

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

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);
}
Apzx
  • 367
  • 1
  • 3
  • 12
4

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

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

Sam Dutton
  • 14,775
  • 6
  • 54
  • 64
  • Do you know whether there's a way to get at the MediaStream's bytes via RTCPeerConnections? I'm need a way to get at the bytes without MediaStreamRecorder's emulated recorder (canvas elements of a video's frame). It results in very poor video quality. – Vinay Feb 02 '16 at 04:08
  • Not sure if this helps, but MediaRecorder is now implemented in Chrome, and you can get access to the remote audio and video from a peer connection. (Can't remember versions — you may need Canary with the Experimental Platform Features flag enabled.) Take a look at http://webrtc.github.io/samples. – Sam Dutton Feb 03 '16 at 14:17
  • Yeah saw this - unfortunately you have to enable an "Experimental Platform Tools" flag to get the recorder, and it's not full-fledged and without a flag until version M49 (current shipped version is M48). It's ok though - for my use case I think what I need to do is set up a WebRTC Media Server to get at the streams and save them to S3. – Vinay Feb 03 '16 at 20:51
2

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.

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:

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

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 examples with Node and 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.

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.

Community
  • 1
  • 1
Vinay
  • 6,204
  • 6
  • 38
  • 55
  • I'm going down the same road with `janus`. Is it worth - facing challenges at every step although janus is pretty solid ? – coding_idiot Apr 12 '16 at 19:55
  • WebRTC has nothing to do with the MediaRecorder API. – octavn Apr 13 '16 at 16:09
  • @coding_idiot never tried out `janus`, but that completely depends on your product requirements and what it's for. For us it was absolutely necessary since recording WebRTC streams is a core part of our product. For you it may be different. Speaking for Kurento vs. Janus - all I can say is that Kurento is *very* solid. Love it. – Vinay May 08 '16 at 06:57
  • @OctavianNaicu I never said it was the same thing. But they're both implemented by the same MediaStream abstract type in browsers, so the security and capability concerns for one vs. the other when it comes to recording are one and the same. In all practicality for the OP, they can treat any types as recordable by the `MediaRecorder` API as one and the same this high up in the stack. – Vinay May 08 '16 at 07:01
1

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

jesup
  • 6,765
  • 27
  • 32