Javascript 无法在第一页加载时使用Google Chrome中的HTML5和getUserMedia（）从网络摄像头拍照

以参考，我正试图建立一个实用工具，从网络摄像头拍照

下面是我的HTML代码片段：

<button type="button" name="btnCapture" id="btnCapture">Start my camera</button><br />
<video autoplay="true" id="video" style="height:240px;width:320px"></video><canvas id="canvas" style="display: none; height:240px;width:320px"></canvas><br />
<img id="capturedImage" src="/blank.gif" style="height:240px;width:320px"><input type="hidden" id="hdnImageBase64" name="hdnImageBase64"><br />

当按钮

btnCapture

第一次被点击时，它调用函数

sizeCanvas（）

将画布和图像的宽度和高度设置为视频的宽度和高度（即320和240）。第二次单击该按钮时，它会使用

canvas.toDataURL

从网络摄像头中获取Base64编码的快照，并将其放入image

capturedImage

它在歌剧中有效。但是在Google Chrome中，页面第一次加载时总是失败。但是当同一个页面被刷新时，它就工作了。尝试调试时，我发现代码canvas.toDataURL第一次将image Base64返回为

数据：，

，因此无法绘制图像，这导致

资源被解释为图像，但在控制台中使用MIME类型text/plain：“data:，”

传输时出错。另外，如果我没有调用函数

sizeCanvas

，那么它会第一次工作，但是图片不是我需要的尺寸，会被裁剪

有什么想法可以让我第一次使用

sizeCanvas

在Chrome上工作吗

谷歌浏览器：24.0.1312.57 歌剧：12.11

在Chrome和FF中工作良好

(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);
    }
  );

我在这里找到了以下代码：

---

更新：我将我的实时演示更新为JSFIDLE，因为

getUserMedia（）

不再适用于不安全的源代码。要使用这个特性，您应该考虑将应用程序切换到安全的原点，例如HTTPS。有关更多详细信息，请参阅。

您解决了这个问题吗？不幸的是，没有。它仍然没有解决。因此。。我已经找了一段时间了。。我找到了这个解决方案：。。经过铬合金和FF测试，效果良好！我在：@aldanux:JSBIN链接起作用了。如果你能用这些代码创建一个答案，我很乐意接受。上面（）的实时演示链接据说已经被报告并删除了？@ayjay-现在它又能工作了：）谢谢你的建议！

(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);
    }
  );