MediaRecorder API

Web APIs

MediaRecorder

The MediaRecorder API lets you record media streams, i.e. moving images and audio

navigator.mediaDevices.getUserMedia({
    audio: true
}).then(function (stream) {

    var recorder = new MediaRecorder(stream);
}

Get a stream, pass it to the recorder

recorder.addEventListener('dataavailable', function(e) {
    // e.data contains the audio data! let's associate it to an <audio> element
    var el = document.querySelector('audio');
    el.src = URL.createObjectURL(e.data);
});

// start recording here...
recorder.start();

// and eventually call this to stop the recording, perhaps on the press of a button
recorder.stop();

Now with Video

navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true // <-- new!
})

 var options = {
      audioBitsPerSecond : 128000,
      videoBitsPerSecond : 2500000,
      mimeType : 'video/mp4'
    }

 var mediaRecorder = new MediaRecorder(stream,options);

Capturing Streams from the DOM

var canvasStream = canvas.captureStream();



var recorder = new MediaRecorder(canvasStream);

Capturing Modified

Content

Video Using Canvas

// set the stream as src for a video element
video.src = URL.createObjectURL(stream)

// periodically draw the video into a canvas
ctx.drawImage(video, 0, 0, width, height);

// get the canvas content as image data
var imageData = ctx.getImageData(0, 0, width, height);

// apply your pixel magic to this bitmap
var data = imageData.data; // data is an array of pixels in RGBA

for (var i = 0; i < data.length; i+=4) {
    var average = (data[i] + data[i + 1]  + data[i + 2]) / 3;
    data[i] = average >= 128 ? 255 : 0; // red
    data[i + 1] = average >= 128 ? 255 : 0; // green
    data[i + 2] = average >= 128 ? 255 : 0; // blue
    // note: i+3 is the alpha channel, we are skipping that one
}

var stream = canvas.captureStream();
recorder = new MediaRecorder(stream);

Audio Using Web Audio API

var sourceNode = audioContext.createMediaStreamSource(stream);

stream -> MediaStreamSource -> filter -> outputNode

stream -> MediaStreamSource -> filter -> outputNode

 navigator.mediaDevices.getUserMedia({
    audio: true
  })
  .then(function (stream) {

var streamDestination = audioContext.createMediaStreamDestination();
filter.connect(streamDestination);

var filteredRecorder = new MediaRecorder(streamDestination.stream);

stream -> MediaStreamSource -> filter -> outputNode

stream -> MediaStreamSource -> filter -> outputNode

var filter = audioContext.createBiquadFilter();

sourceNode.connect(filter);
//filter.connect(audioContext.destination);

Both Together

Separate Video

Separate Audio

var videoStream = new MediaStream();

var videoTracks = inputStream.getVideoTracks();
videoTracks.forEach(function(track) {
    videoStream.addTrack(track);
});

var audioStream = new MediaStream();

var audioTracks = inputStream.getAudioTracks();
audioTracks.forEach(function(track) {
    audioStream.addTrack(track);
});

Manipulate Both

// Manipulate videoStream into a canvas and then
var videoOutputStream = videoCanvas.captureStream();

// Manipulate audio with an audio context and then
var audioOutputStream = streamDestination.stream;

var outputStream = new MediaStream();
[audioOutputStream, videoOutputStream].forEach(function(s) {
    s.getTracks().forEach(function(t) {
        outputStream.addTrack(t);
    });
});

Join them Together

And Finally MediaRecorder

var finalRecorder = new MediaRecorder(outputStream);

Browser Support

Browser Support

Developer Edition 47+

Firefox for Android 48+

Browser Support

Chrome 47+ *

Opera 36+ *

 * Can only capture WebRTC and requires enabling

Browser Support

Browser Support

??

??

??

More info

API Documentation:

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API

More info

Mozilla Dev Blog:

https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/

Thank you

Thank you