title: HTML5 video frame capture to bitmap
body: <p>I got this script:</p>
  
  <pre><code>function capture(video, scaleFactor) {
      if(scaleFactor == null){
          scaleFactor = 1;
      }
      var w = video.videoWidth * scaleFactor;
      var h = video.videoHeight * scaleFactor;
      var canvas = document.createElement('canvas');
      canvas.width  = w;
      canvas.height = h;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, w, h);
  
  
      return canvas;
  } 
  
  
  function shoot(){
      var video  = document.getElementById(videoId);
      var output = document.getElementById('output');
      var canvas = capture(video, scaleFactor);
      canvas.onclick = function(){
          window.open(this.toDataURL());
      };
      snapshots.unshift(canvas);
      output.innerHTML = '';
      for(var i=0; i&lt;1; i++){
          output.appendChild(snapshots[i]);
      }
  
  }
  </code></pre>
  
  <p>What I want to do is export the snapshot to a bitmap image. I read that I could use this line:</p>
  
  <pre><code>canvas.toDataURL('image/jpeg');
  </code></pre>
  
  <p>But I don't know where to add it.</p>
  
  <p>Any ideas?</p>