Export HTML5 blob video to MP4

Question

I am trying to use Chrome's screen sharing feature to make a screen recorder and save the video in MP4 format. However, I have no idea how I do this. The demo is at https://figgycity50.kd.io/screencap.html (include https!) and the code is:

<video autoplay></video>
<button>start</button>
<script>

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;

var stream = null;
button = document.querySelector("button");

function start(e) {
  // Seems to only work over SSL.
  navigator.getUserMedia({
    video: {
      mandatory: {
        chromeMediaSource: 'screen',
         maxWidth: 1280,
         maxHeight: 720
      }
    }
  }, function(s) {
    stream = s;

    button.textContent = 'Stop';
    button.removeEventListener('click', start);
    button.addEventListener('click', stop);

    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
    video.autoplay = true;

    stream.onended = function(e) {
      //The save code should go here.
    };

    //document.body.appendChild(video);
  }, function(e) {
  });
}

function stop() {
  stream.stop();
  button.addEventListener('click', start);
  button.textContent = 'Capture your screen';
}

button.addEventListener('click', start);

</script>

How do I do this?

Answer 1

You cannot save directly to MP4 format with the way the current state of getUserMedia API is working, you can however save in webm format and convert it afterwards.

Several attempts have been made, webRTC experiment project has several versions of recording in the browser implemented: https://www.webrtc-experiment.com/RecordRTC/

You can however save directly in MP4 format using HTML Media Capture. This works by extending the <input type="file"/> and adding new values for the accept parameter with options for audio, video and photo/snapshot. This however works only for mobile browsers, as the desktop browser will only interpret it as a simple file upload.

HDFVR has a demo of this, if you access their demo from a mobile device.

More details can be read in the following article: http://hdfvr.com/html5-video-recording