title: Export HTML5 blob video to MP4
body: <p>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 <a href="https://figgycity50.kd.io/screencap.html" rel="nofollow">https://figgycity50.kd.io/screencap.html</a> (include https!) and the code is:</p>
  
  <pre><code>&lt;video autoplay&gt;&lt;/video&gt;
  &lt;button&gt;start&lt;/button&gt;
  &lt;script&gt;
  
  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);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I do this?</p>