title: Html5 video recording and upload?
body: <p>I need to create an app that can record video using a webcam or mobile camera (it needs to be cross platform).</p>
  
  <p>So far I have written a small proof of concept using webrtc getusermedia. It can record the video and playback but I am not sure how to get the file to upload back to the server.</p>
  
  <p>Here is a link to this sample <a href="http://jsfiddle.net/3FfUP/" rel="nofollow">http://jsfiddle.net/3FfUP/</a></p>
  
  <p>And the javascript code:</p>
  
  <pre><code>(function ($) {
  window.URL = window.URL || window.webkitURL;
  navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia || navigator.msGetUserMedia;
  var video = document.querySelector('video');
  var onFailSoHard = function(e) {
      console.log('Reeeejected!', e);
  };
  $('#capture-button').click (function () {
      console.log ("capture click!");
      if (navigator.getUserMedia) {
          // Not showing vendor prefixes.
          navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
              var video = document.querySelector('video');
              video.src = window.URL.createObjectURL(localMediaStream);
  
              // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
              // See crbug.com/110938.
              video.onloadedmetadata = function(e) {
                  // Ready to go. Do some stuff.
              };
          }, onFailSoHard);
      } else {
          video.src = 'somevideo.webm'; // fallback.
      }
  });
  $('#stop-button').click (function (e) {
      video.pause ();
      localMediaStream.stop ();
  });
  })(jQuery);
  </code></pre>
  
  <p>How can I get what is recorded in this sample as a file so that it can be uploaded to the server.</p>