getUserMedia का उपयोग कर उपयोगकर्ता के वेबकैम के माध्यम से मैं एक छवि कैप्चर कैसे कर सकता हूं?

मैं वेब पर एक प्रोग्राम बनाना चाहता हूं जो उपयोगकर्ता के वेबकैम के माध्यम से एक छवि को कैप्चर करेगा।getUserMedia का उपयोग कर उपयोगकर्ता के वेबकैम के माध्यम से मैं एक छवि कैप्चर कैसे कर सकता हूं?

मैं getUserMedia वेब एपीआई का उपयोग कर रहा हूँ। मेरा कोड यहाँ है, लेकिन यह काम नहीं करता है। वेबकैम छवि को कैप्चर करने के लिए मैं इसे कैसे बदल सकता हूं?

<div id="container"> 
    <video autoplay="true" id="videoElement"> 

    </video> 
</div> 
<script> 

</script>

जे एस नहीं है:

var video = document.querySelector("#videoElement"); 

navigator.getUserMedia, elem = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; 

console.log(navigator.getUserMedia); 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({video: true}, handleVideo, videoError); 
} 

function handleVideo(stream) { 
    video.src = window.URL.createObjectURL(stream); 
} 

function videoError(e) { 
    // do something 
}

स्रोत

2015-11-28 PumpkinSeed

जब आप कहते हैं कि "यह काम नहीं करता", तुम क्या त्रुटि आप देख रहे हैं और क्या अपेक्षित व्यवहार किया जाना चाहिए निर्दिष्ट कर सकते हैं? एक कार्य उदाहरण जोड़ना भी सहायक होगा। – stef

मुझे कोई त्रुटि नहीं है, जब मैंने ट्यूटोरियल देखा तो यह मेरे वेबकैम को अनुमति मांगता है, लेकिन मेरे आवेदन में कुछ भी नहीं हुआ। – PumpkinSeed

आप इस काम के नमूने का उपयोग कर सकते

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body onload="init();"> 
    <h1>Take a snapshot of the current video stream</h1> 
    Click on the Start WebCam button. 
    <p> 
    <button onclick="startWebcam();">Start WebCam</button> 
    <button onclick="stopWebcam();">Stop WebCam</button> 
     <button onclick="snapshot();">Take Snapshot</button> 
    </p> 
    <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video> 
    <p> 

     Screenshots : <p> 
     <canvas id="myCanvas" width="400" height="350"></canvas> 
    </body> 
    <script> 
     //-------------------- 
     // GET USER MEDIA CODE 
     //-------------------- 
      navigator.getUserMedia = (navigator.getUserMedia || 
          navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || 
          navigator.msGetUserMedia); 

     var video; 
     var webcamStream; 

     function startWebcam() { 
     if (navigator.getUserMedia) { 
      navigator.getUserMedia (

       // constraints 
       { 
       video: true, 
       audio: false 
       }, 

       // successCallback 
       function(localMediaStream) { 
        video = document.querySelector('video'); 
       video.src = window.URL.createObjectURL(localMediaStream); 
       webcamStream = localMediaStream; 
       }, 

       // errorCallback 
       function(err) { 
       console.log("The following error occured: " + err); 
       } 
      ); 
     } else { 
      console.log("getUserMedia not supported"); 
     } 
     } 

     function stopWebcam() { 
      webcamStream.stop(); 
     } 
     //--------------------- 
     // TAKE A SNAPSHOT CODE 
     //--------------------- 
     var canvas, ctx; 

     function init() { 
     // Get the canvas and obtain a context for 
     // drawing in it 
     canvas = document.getElementById("myCanvas"); 
     ctx = canvas.getContext('2d'); 
     } 

     function snapshot() { 
     // Draws current image from the video element into the canvas 
     ctx.drawImage(video, 0,0, canvas.width, canvas.height); 
     } 

    </script> 
</html>

स्रोत

2015-11-28 21:29:04 scaisEdge

रोकें वेब कैमरा बटन मेरे लिए काम नहीं कर रहा है। –

मैं संबंधित कोड ईए अच्छी तरह से त्रुटि दस्तावेज आपके पास .. के साथ एक नया प्रश्न पोस्ट के सुझाव – scaisEdge

त्रुटि मैं प्राप्त 'है Uncaught TypeError: HTMLButtonElement पर: webcamStream.stop नहीं एक समारोह stopWebcam पर (78 स्नैपशॉट) है। ऑनक्लिक (स्नैपशॉट: 21) ' –

वहाँ getUserMedia API कि अब takePhoto और grabFrame बेनकाब करने के लिए अद्यतन किया गया है। GrabFramemethod कम रोमांचक है क्योंकि यह वही करता है जो हम सभी के साथ कर रहे हैं और स्ट्रीम से अगले वीडियो फ्रेम को वापस कर रहे हैं, लेकिन ले जाएं फोटो संपीड़ित छवि ब्लॉब को कैप्चर करने के लिए कैमरे "उच्चतम उपलब्ध फोटोग्राफिक कैमरा रिज़ॉल्यूशन" का उपयोग करने के लिए स्ट्रीम को इंटरप्ट करता है। यहाँ अधिक विवरण: google devs

var stream, imageCapture; 

function getMediaStream() 
{ 
    window.navigator.mediaDevices.getUserMedia({video: true}) 
    .then(function(mediaStream) 
    { 
     stream = mediaStream; 
     let mediaStreamTrack = mediaStream.getVideoTracks()[0]; 
     imageCapture = new ImageCapture(mediaStreamTrack); 
     console.log(imageCapture); 
    }) 
    .catch(error); 
} 

function error(error) 
{ 
    console.error('error:', error); 
} 

function takePhoto(img) 
{ 
    const img = img || document.querySelector('img'); 

    imageCapture.takePhoto() 
    .then(blob => { 
     let url = window.URL; 
     img.src = url.createObjectURL(blob); 
     url.revokeObjectURL(blob); 
    }) 
    .catch(error); 
}; 

/* just call */ 
getMediaStream(); 

/* and when you want to capture an image */ 
takePhoto();

स्रोत

2017-03-21 01:02:26

'url.revokeObjectURL (ब्लॉब);' नहीं: ब्लॉब। – Kaiido

getUserMedia का उपयोग कर उपयोगकर्ता के वेबकैम के माध्यम से मैं एक छवि कैप्चर कैसे कर सकता हूं?

उत्तर

संबंधित मुद्दे