0
getUserMedia를 사용하여 스냅 샷을 찍으려면 다음 코드를 사용하려고합니다. 문제는 웹캠이 활성화되지만 이미지 스트림을 볼 수 없으며 작동하지 않습니다. html5로 웹캠에 액세스 할 수 없습니까?
은 매우 간단합니다, 여기에 코드입니다 ... 내가에서 getUserMedia는 HTTPS를 사용하여 보안 사이트에서 작동 들었 페이지는 어디 호스팅되지 않기 때문에 그것의 가능 :(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);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight/(video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
})();<body>
<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img id="photo" alt="photo">
브라우저에서 카메라에 액세스하지 못할 수 있습니다. 크롬에서는 주소 표시 줄을 살펴보십시오. 카메라 아이콘이 있어야합니다. 사이트에서 카메라에 액세스 할 수있게해야합니다. 파이어 폭스는 HTTPS 연결과 Edge를 허용하지 않을 것입니다. 아무 것도하지 않습니다. – jeff