Stap 4: Instellen van de Webcam
Nu dat we de twitter-bibliotheek die we nodig hebben, kunnen we naar het opzetten van onze webcam. Ik gebruikte een Rosewill 1.3Mega Pixel Webcam (ongeveer $30). Op de client-zijde van dit project, we gonna gebruiken HTML en Javascript. Bekijk David Walsh awesome blog, dat is waar ik heb de basiscode voor het gedeelte van de webcam van ons project.
Krijgen we:
<p><*html><br><*head> <*script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"><*/script> <*/head> <*body> <*video id="video" width="640" height="480" autoplay><*/video> <*button id="snap" class="sexyButton">Snap Photo<*/button> <*canvas id="canvas" width="640" height="480"><*/canvas></p><p> <*script> // Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); };</p><p> // Put video listeners into place if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // WebKit-prefixed navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // Trigger photo take // Trigger photo take document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); <*/script> <*/body> <*/html></p>
Dit is de code die ons toelaten zal om foto's nemen met de webcam. (Zorg ervoor dat u alles verwijderen de * s, ze zijn alleen hier te houden van de code van AutoOpmaak)
Deze code is luisteraars naar de camera instellen, dan met behulp van loting beeld te schrijven naar het canvas. Sla dit op als webcam.php.