title: HTML5 capture and save video
body: <p>I am building a site for sing-alongs where the user can capture a video of themselves singing along with an mp3. I have gotten to the point that I can access the camera and display the live stream, but how can i save the video so the user can download and keep it? </p>
  
  <p>My code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;link href="css/bootstrap.css" rel="stylesheet""&gt;
  &lt;style&gt;
  #container {
  margin: 0px auto;
  width: 500px;
  height: 375px;
  border: 10px #333 solid;
  }
  #videoElement {
  width: 500px;
  height: 375px;
  background-color: #666;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button class="btn" onclick="show();"&gt;Record!&lt;/button&gt;
  
  
  &lt;div id="record" style="display:none; text-align:center;"&gt;
  &lt;div id="container"&gt;
  &lt;video autoplay="false" id="videoElement"&gt;
  &lt;/video&gt;
  &lt;/div&gt;
  &lt;button id="play" class="btn" onclick="play()"&gt;Start Recording!&lt;/button&gt;
  &lt;audio id="song" style="hidden"&gt;
  &lt;source src="love.mp3" type="audio/mpeg"&gt;
  Your browser does not support the audio element.
  &lt;/audio&gt;
  &lt;/div&gt;
  
  
  
  &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var video = document.querySelector("#videoElement");
  
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||    navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
  
  if (navigator.getUserMedia) {       
  navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
  }
  
  function handleVideo(stream) {
  video.src = window.URL.createObjectURL(stream);
  document.getElementById("videoElement").pause();
  }
  
  function videoError(e) {
  alert("There was an error with the video stream.\nCheck that your webcam is connected.");
  }
  
  function play()
  {
  var video = document.getElementById("videoElement");
  var music = document.getElementById("song");
     var button = document.getElementById("play");
     if (video.paused) {
        video.play();
        music.play();
        button.textContent = "Stop Recording";
     } else {
        video.pause();
        music.pause();
        button.textContent = "Continue Recording";
     }
  }
  
  function show()
  {
  document.getElementById("record").style.display="block";
  }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>is there a way in handleVideo i can save the stream as it comes or something?</p>