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

Question

参考这篇关于HTML5Rocks的文章,我正在尝试构建一个从网络摄像头拍照的实用程序.

以下是我的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我启动网络摄像头并再次点击它从网络摄像头捕获照片并将其放入图像中capturedImage.

以下是我的JavaScript代码:

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var localMediaStream = null;
var capturedImage = document.getElementById("capturedImage");
var buttonTextCapturePicture = "Say Cheese!";

function onFailSoHard(e) {
    if (e.code == 1) {
        alert("Something went wrong! Either your webcam is not connected or you denied access to it.");
    } else {
        alert("getUserMedia() not supported in your browser. Try using latest version of Google Chrome or Opera.");
    }
}

function snapshot() {
    if (localMediaStream) {
        try {
            ctx.drawImage(video, 0, 0);
            capturedImage.src = canvas.toDataURL("image/png");
            document.getElementById("hdnImageBase64").value = canvas.toDataURL("image/png");
        } catch (e) {
            alert("Something went wrong while capturing you. Try refreshing the page. " + e);
        }
    }
}

video.addEventListener("click", snapshot, false);

function sizeCanvas() {
    setTimeout( function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        capturedImage.height = video.videoHeight;
        capturedImage.width = video.videoWidth;
    }, 50);
}

var button = document.getElementById("btnCapture");
button.addEventListener("click", function(e) {
    if (localMediaStream) {
        snapshot();
        return;
    }
    if (navigator.getUserMedia) {
        navigator.getUserMedia("video", function(stream) {
            video.src = stream;
            localMediaStream = stream;
            sizeCanvas();
            button.textContent = buttonTextCapturePicture;
        }, onFailSoHard);
    } else if (navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia({"video" : true}, function(stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            localMediaStream = stream;
            sizeCanvas();
            button.textContent = buttonTextCapturePicture;
        }, onFailSoHard);
    } else {
        onFailSoHard({
            target : video
        });
    }
}, false);

当btnCapture第一次点击按钮时,它会调用该功能sizeCanvas()将画布和图像宽度和高度设置为视频的宽度和高度(即320和240).第二次单击该按钮时,它会使用来自网络摄像头的Base64编码快照canvas.toDataURL并将其放入图像中capturedImage.

它适用于Opera.但是在谷歌浏览器中,它总是在第一次加载页面时失败.但是当刷新同一页面时,它会起作用.尝试调试我发现代码第一次canvas.toDataURL返回图像Base64,data:,因为它无法绘制图像,导致Resource interpreted as Image but transferred with MIME type text/plain: "data:,".控制台出错.此外,如果我不调用该函数sizeCanvas然后它第一次工作,但然后图片不是我需要的尺寸并被裁剪.

有关第一次如何让它在Chrome中运行的任何想法sizeCanvas？

谷歌浏览器:24.0.1312.57 Opera:12.11

Answer 1

现场演示

适用于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);
    }
  );

这个代码我在这里找到:LINK DEVELOPER MOZILLA

更新:我将我的Live Demo更新为JSFiddle,因为getUserMedia()它不再适用于不安全的起源.要使用此功能,您应该考虑将应用程序切换到安全的来源,例如HTTPS.有关详细信息,请参阅Chromium项目.