Recording Media

The Media Recorder API is a Web API allowing Web applications to record audio and video Media Streams, local and/or remote. It relies on the mediaStream object - see Audio & Video Capture.

API glimpse

recorder = new MediaRecorder(mediaStream, options)
Creates a media recorder out of a Media Stream. options selects e.g. the intended MIME type and/or the target bitrates.
MediaRecorder.isMimeTypeSupported(mimeType)
Static function checking if mimeType is, in principle, supported for recording.
recorder.start(interval)
Starts recording data, producing it as chunks in ondataavailable's event.data, every interval ms, if explicited.

Live Demo

Demo by Miguel Casas-Sanchez.

  • function getUserMedia(options, successCallback, failureCallback) {
      var api = navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;
      if (api) {
        return api.bind(navigator)(options, successCallback, failureCallback);
      }
    }
    
    var theStream;
    var theRecorder;
    var recordedChunks = [];
    
    function getStream() {
      if (!navigator.getUserMedia && !navigator.webkitGetUserMedia &&
        !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
        alert('User Media API not supported.');
        return;
      }
      
      var constraints = {video: true, audio: true};
      getUserMedia(constraints, function (stream) {
        var mediaControl = document.querySelector('video');
        if (navigator.mozGetUserMedia) {
          mediaControl.mozSrcObject = stream;
        } else {
          mediaControl.srcObject = stream;
          mediaControl.src = (window.URL || window.webkitURL).createObjectURL(stream);
        }
        
        theStream = stream;
        try {
          recorder = new MediaRecorder(stream, {mimeType : "video/webm"});
        } catch (e) {
          console.error('Exception while creating MediaRecorder: ' + e);
          return;
        }
        theRecorder = recorder;
        console.log('MediaRecorder created');
        recorder.ondataavailable = recorderOnDataAvailable;
        recorder.start(100);
      }, function (err) {
        alert('Error: ' + err);
      });
    }
    
    function recorderOnDataAvailable(event) {
      if (event.data.size == 0) return;
      recordedChunks.push(event.data);
    }
    
    function download() {
      console.log('Saving data');
      theRecorder.stop();
      theStream.getTracks()[0].stop();
    
      var blob = new Blob(recordedChunks, {type: "video/webm"});
      var url = (window.URL || window.webkitURL).createObjectURL(blob);
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      a.href = url;
      a.download = 'test.webm';
      a.click();
      
      // setTimeout() here is needed for Firefox.
      setTimeout(function () {
          (window.URL || window.webkitURL).revokeObjectURL(url);
      }, 100); 
    }
  • <video autoplay style="height:180px; width: 240px;" poster="https://image.freepik.com/free-icon/video-camera-symbol_318-40225.png"></video>
    <p><button class="btn btn-lg btn-default" onclick="getStream()">Grab video & start recording</button></p>
    <p><button class="btn btn-lg btn-default" onclick="download()">Download!</button></p>
      
    <p><small>Demo by <a href="http://www.mcasas.tk/" target="_blank">Miguel Casas-Sanchez</a>.</small></p>

Resources