You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
3.1 KiB
HTML
83 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
<title>Camera</title>
|
|
<script type="text/javascript">
|
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
|
|
|
|
function getUserMedia(constraints, success, failure) {
|
|
navigator.getUserMedia(constraints, function(stream) {
|
|
var videoSrc = (window.URL && window.URL.createObjectURL(stream)) || stream;
|
|
success.apply(null, [videoSrc]);
|
|
}, failure);
|
|
}
|
|
|
|
|
|
function initCamera(constraints, video, callback) {
|
|
getUserMedia(constraints, function (src) {
|
|
video.src = src;
|
|
video.addEventListener('loadeddata', function() {
|
|
var attempts = 10;
|
|
|
|
function checkVideo() {
|
|
if (attempts > 0) {
|
|
if (video.videoWidth > 0 && video.videoHeight > 0) {
|
|
console.log(video.videoWidth + "px x " + video.videoHeight + "px");
|
|
video.play();
|
|
callback();
|
|
} else {
|
|
window.setTimeout(checkVideo, 100);
|
|
}
|
|
} else {
|
|
callback('Unable to play video stream.');
|
|
}
|
|
attempts--;
|
|
}
|
|
|
|
checkVideo();
|
|
}, false);
|
|
}, function(e) {
|
|
console.log(e);
|
|
});
|
|
}
|
|
|
|
function copyToCanvas(video, ctx) {
|
|
( function frame() {
|
|
ctx.drawImage(video, 0, 0);
|
|
window.requestAnimationFrame(frame);
|
|
}());
|
|
}
|
|
|
|
window.addEventListener('load', function() {
|
|
var constraints = {
|
|
video: {
|
|
mandatory: {
|
|
minWidth: 1280,
|
|
minHeight: 720
|
|
}
|
|
}
|
|
},
|
|
video = document.createElement('video'),
|
|
canvas = document.createElement('canvas');
|
|
|
|
document.body.appendChild(video);
|
|
document.body.appendChild(canvas);
|
|
|
|
initCamera(constraints, video, function() {
|
|
canvas.setAttribute('width', video.videoWidth);
|
|
canvas.setAttribute('height', video.videoHeight);
|
|
copyToCanvas(video, canvas.getContext('2d'));
|
|
});
|
|
}, false);
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html> |