Html5 canvas 从html5网络摄像头拍摄快照后显示缩略图

情况是这样的

对，我有一个html5网络摄像头脚本，可以让我拍照并保存快照

见下面的代码：

     function startWebcam() {
        if (navigator.getUserMedia) {
        navigator.getUserMedia (

          // constraints
          {
             video: true,
             audio: false
          },

          // successCallback
         function(localMediaStream) {
              video = document.querySelector('video');
             //video.src = window.URL.createObjectURL(localMediaStream);
             video.srcObject = localMediaStream;
             webcamStream = localMediaStream;
             video.play();
         },

          // errorCallback
         function(err) {
             console.log("The following error occured: " + err);
         }
       );
    } else {
       console.log("getUserMedia not supported");
    }
  }


   function snapshot() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
     // Draws current image from the video element into the canvas
    context.drawImage(video, 0,0, 640, 480);
  }

这是我目前的画布

     <canvas id="canvas" width="640" height="480"></canvas>

这是我喜欢做的事。我会在用户拍照后将其显示为画布下方的缩略图，并删除他们不想保存的图片

我该怎么做呢

谢谢,， 凯文