Javascript HTML5：使用相机：尺寸问题

我正在编写这个HTML5摄像头演示，我想点击一个按钮就可以捕获视频。
问题是，我想用视频的原始尺寸或任何其他“大”尺寸保存图像。但是，我还想向用户展示一个小版本的图像

怎么做

我使用这些HTML标记：

<video width="500" style="margin:0 auto; border:1px;" height="auto" autoplay></video>
<canvas width="auto" height="auto" style="display:none;"></canvas>

HTML标记

---

怎么做？很简单。您只需要编写正确的代码。我使用这种语言：

JavaScript

您已经尝试了什么？你在哪一点上失败了？你对社区的期望是什么？您提供的HTML标签对我们来说非常无用。。。你已经在谷歌上搜索过了吗？顺便说一下，它不起作用了。我现在正在调试它为什么数据等于“data；”？这里是给定源代码的示例。也许你考虑给我们A，这样我们可以更好地帮助你。我运行了JSFIDLE示例，它对我最新的Firefox（27.0.1）不起作用。照相机能用，但我不能拍照。它在铬上确实有效。

<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">

(function() {

  var streaming = false,
      video        = document.querySelector('#video'),
      canvas       = document.querySelector('#canvas'),
      photo        = document.querySelector('#photo'),
      startbutton  = document.querySelector('#startbutton'),
      width = 320,
      height = 0;

  navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);

  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

  startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);

})();