use the camera [ 648 views ]
Goal: simple way to use the camera
I’ve read some articles about this, but there was no a simple one. So, here is:
<html>
<body>
<video autoplay="true" id="videoElement"></video>
<button id="snap">Take a Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var video = document.querySelector("#videoElement");
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError() { }
// Trigger photo take
document.getElementById('snap').addEventListener('click', function () {
setTimeout(function () {
context.drawImage(video, 0, 0, 640, 480);
}, 3000);
});
</script>
</body>
</html>
check it: here
Two thing to know.
1. the browser will say insecure connection. Just say do it anymore
2. Take a Photo will take a photo after 3 sec
Friday, April 7th, 2017 at 14:15.
Filed under html5
, web trick.
