Webbkamera
Uppdaterad april 2021: Metoden createObjectURL() har fasats ut. Istället sätter man bara .srcObject till videoströmmen och sedan funkar det.
Ett minimalt test med webbkameran. Oroa dig inte, allt körs bara lokalt så bilden som du tar försvinner om du laddar om sidan. Den skickas inte till någon server.
Jag hittade några bra verktyg på vägen. Den här webbsidan som räknar ut aspect ratio var praktisk och välfungerande och inte allt för förstörd av reklam.
Så här ser koden ut just nu. Jag har snott den härifrån.
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Ta en bild</button>
<canvas id="camSnapshot" width="640" height="480"></canvas>
<script>
var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
var canvas = document.getElementById('camSnapshot');
var context = canvas.getContext('2d');
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
</script>