from https://github.com/jcmellado/js-aruco/blob/master/samples/getusermedia/getusermedia.html
Last active
April 9, 2020 13:48
-
-
Save mchelen/7c595af55da08c4ee986 to your computer and use it in GitHub Desktop.
html5 webcam demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>HTML5 Webcam Demo</title> | |
| <script src="script.js"></script> | |
| </head> | |
| <body style="font-family: monospace;"> | |
| <center> | |
| <div style="margin: 10px;"><strong>-= HTML5 Webcam Demo =-</strong></div> | |
| <video id="video" autoplay="true" style="display:none;"></video> | |
| <canvas id="canvas" style="width:640px; height:480px;"></canvas> | |
| <div style="margin: 15px;"><strong>Adapted from <a href="http://code.google.com/p/js-aruco/">js-aruco</a></strong></div> | |
| </center> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var video, canvas, context, imageData; | |
| function onLoad(){ | |
| video = document.getElementById("video"); | |
| canvas = document.getElementById("canvas"); | |
| context = canvas.getContext("2d"); | |
| canvas.width = parseInt(canvas.style.width); | |
| canvas.height = parseInt(canvas.style.height); | |
| navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; | |
| if (navigator.getUserMedia){ | |
| function successCallback(stream){ | |
| if (window.webkitURL) { | |
| video.src = window.webkitURL.createObjectURL(stream); | |
| } else if (video.mozSrcObject !== undefined) { | |
| video.mozSrcObject = stream; | |
| } else { | |
| video.src = stream; | |
| } | |
| } | |
| function errorCallback(error){ | |
| } | |
| navigator.getUserMedia({video: true}, successCallback, errorCallback); | |
| requestAnimationFrame(tick); | |
| } | |
| } | |
| function tick(){ | |
| requestAnimationFrame(tick); | |
| if (video.readyState === video.HAVE_ENOUGH_DATA){ | |
| snapshot(); | |
| } | |
| } | |
| function snapshot(){ | |
| context.drawImage(video, 0, 0, canvas.width, canvas.height); | |
| imageData = context.getImageData(0, 0, canvas.width, canvas.height); | |
| } | |
| window.onload = onLoad; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this is the error that I get when I try to run this.