Làm cách nào để chụp ảnh qua webcam của người dùng bằng getUserMedia?

Tôi muốn tạo một chương trình trên web sẽ chụp ảnh qua webcam của người dùng.Làm cách nào để chụp ảnh qua webcam của người dùng bằng getUserMedia?

Tôi đang sử dụng API web getUserMedia. Đây là mã của tôi, nhưng nó không hoạt động. Làm thế nào tôi có thể thay đổi nó để chụp ảnh webcam?

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

    </video> 
</div> 
<script> 

</script>

Có JS:

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 
}

Nguồn

2015-11-28 PumpkinSeed

Khi bạn nói "nó không hoạt động", bạn có thể chỉ định lỗi nào bạn đang thấy và hành vi mong đợi sẽ là gì? Thêm một ví dụ hoạt động cũng sẽ hữu ích. – stef

Tôi không có lỗi, khi tôi thấy hướng dẫn, nó yêu cầu quyền cho webcam của tôi, nhưng trong ứng dụng của tôi không có gì xảy ra. – PumpkinSeed

Bạn có thể sử dụng mẫu làm việc này

<!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>

Nguồn

2015-11-28 21:29:04 scaisEdge

Nút dừng webcam không hoạt động đối với tôi. –

Tôi đề nghị bạn đăng câu hỏi mới với mã liên quan đến lỗi được ghi lại tài liệu mà bạn có .. – scaisEdge

Lỗi tôi nhận được là 'Loại không khớpError: webcamStream.stop không phải là chức năng tại stopWebcam (ảnh chụp: 78) tại HTMLButtonElement. onclick (snapshot: 21) ' –

Đã có bản cập nhật cho các api getUserMedia mà bây giờ phơi bày takePhoto và grabFrame. GrabFramemethod ít thú vị hơn bởi vì nó làm những gì chúng tôi đã làm và chỉ trả lại khung hình tiếp theo từ luồng nhưng takePhoto ngắt dòng để sử dụng máy ảnh "độ phân giải máy ảnh có độ phân giải cao nhất" để chụp một hình ảnh nén. Thông tin chi tiết tại đây: 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();

Nguồn

2017-03-21 01:02:26

'url.revokeObjectURL (blob);' nope. – Kaiido

Làm cách nào để chụp ảnh qua webcam của người dùng bằng getUserMedia?

Trả lời

Các vấn đề liên quan