Skip to content

Instantly share code, notes, and snippets.

@mchelen mchelen/
Last active Aug 29, 2015

What would you like to do?
html5 webcam demo
<meta charset="UTF-8">
<title>HTML5 Webcam Demo</title>
<script src="script.js"></script>
<body style="font-family: monospace;">
<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="">js-aruco</a></strong></div>
var video, canvas, context, imageData;
function onLoad(){
video = document.getElementById("video");
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.width = parseInt(;
canvas.height = parseInt(;
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);
function tick(){
if (video.readyState === video.HAVE_ENOUGH_DATA){
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.