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

Posted 2023-05-07

【中文标题】无法在第一页加载时在 Google Chrome 中使用 HTML5 和 getUserMedia() 从网络摄像头拍照

【英文标题】：Unable to take photo from webcam using HTML5 and getUserMedia() in Google Chrome on first page load

【发布时间】：2013-01-29 21:19:35

【问题描述】：

参考this article on html5Rocks 我正在尝试构建一个实用程序来从网络摄像头拍照。

下面是我的 HTML 代码 sn-p:

<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）。当第二次单击该按钮时，它会使用canvas.toDataURL 从网络摄像头获取 Base64 编码快照并将其放入图像 capturedImage。

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

有什么想法可以让我第一次使用 sizeCanvas 在 Chrome 中工作吗？

谷歌浏览器：24.0.1312.57 歌剧：12.11

【问题讨论】：

这个问题你解决了吗？

很遗憾没有。它仍然没有解决。

so.. 我已经搜索了一段时间.. 我找到了这个解决方案：LIVE DEMO II.. 在 Chrome 和 FF 中测试并且可以工作！我在以下位置找到了这个：developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos

@aldanux：JSBIN 链接有效。如果您可以使用该代码创建答案，我将很乐意接受。

【参考方案1】：

LIVE DEMO

在 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。详情请见The Chromium Projects。

【讨论】：

上面的 LIVE DEMO 链接 (jsbin.com/EPOFOzI/2) 据说已被举报并撤下？

@ayjay - 现在又可以使用了 :) 感谢您的建议！