पहले पेज लोड पर Google क्रोम में एचटीएमएल 5 और getUserMedia() का उपयोग करके वेबकैम से फोटो लेने में असमर्थ

Question

this article on HTML5Rocks से संदर्भ लेना मैं वेबकैम से फोटो लेने के लिए उपयोगिता बनाने की कोशिश कर रहा हूं।

<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 में डालता है शुरू:

नीचे मेरी HTML कोड स्निपेट है।

नीचे मेरी जावास्क्रिप्ट कोड है:

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 clickd पहली बार यह समारोह sizeCanvas() वीडियो की चौड़ाई & ऊंचाई को कैनवास और छवि चौड़ाई & ऊंचाई निर्धारित करने के लिए कहता है (यानी 320 & 240) । जब बटन दूसरी बार क्लिक किया जाता है तो यह का उपयोग करके वेबकैम से बेस 64 एन्कोडेड स्नैपशॉट लेता है और इसे capturedImage छवि में रखता है।

यह ओपेरा में काम करता है। लेकिन Google क्रोम में यह पृष्ठ पहली बार विफल रहता है जब पेज लोड होता है। लेकिन जब एक ही पृष्ठ ताज़ा किया जाता है तो यह काम करता है। डीबग करने का प्रयास करते हुए मैंने पाया कि कोड canvas.toDataURL छवि बेस 64 को data:, के रूप में पहली बार देता है जिसके कारण यह छवि खींचने में असमर्थ है जिसके परिणामस्वरूप Resource interpreted as Image but transferred with MIME type text/plain: "data:,". कंसोल में त्रुटि होती है। अगर मैं फ़ंक्शन sizeCanvas पर कॉल नहीं करता हूं तो यह पहली बार काम करता है लेकिन फिर चित्र की आवश्यकता के आयाम की नहीं है और फसल हो जाती है।

कोई विचार मैं इसे क्रोम में पहली बार sizeCanvas के साथ कैसे काम कर सकता हूं?

गूगल क्रोम: 24.0.1312.57 ओपेरा: 12,11

Answer 1

LIVE DEMO

क्रोम और एफएफ में अच्छी तरह से काम करता है।

(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

अद्यतन: क्योंकि getUserMedia() नहीं रह गया है असुरक्षित मूल पर काम करता है मैं JSFiddle करने के लिए मेरे लाइव डेमो अपडेट किया गया। इस सुविधा का उपयोग करने के लिए, आपको अपने एप्लिकेशन को एक सुरक्षित उत्पत्ति, जैसे HTTPS पर स्विच करने पर विचार करना चाहिए। अधिक जानकारी के लिए The Chromium Projects देखें।