CODEWITHSUNDEEP
javascripthtml
wvm2008
wvm2008

Reputation: 3034

How to use MediaStream Recording

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

Upvotes: 7

Views: 29061

Answers (5)

octavn
octavn

Reputation: 3285

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.

Upvotes: 7

Vinay
Vinay

Reputation: 6322

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.

Upvotes: 2

jesup
jesup

Reputation: 6984

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

Upvotes: 1

Sam Dutton
Sam Dutton

Reputation: 15269

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.

Upvotes: 4

Apzx
Apzx

Reputation: 367

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);
}

Upvotes: 5

Related Questions