Skip to content

Instantly share code, notes, and snippets.

@mchelen mchelen/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
html5 webcam demo
<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>
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
You can’t perform that action at this time.