Skip to content

Instantly share code, notes, and snippets.

@danielflower
Created September 21, 2012 16:20
Show Gist options
  • Save danielflower/3762442 to your computer and use it in GitHub Desktop.
Save danielflower/3762442 to your computer and use it in GitHub Desktop.
An HTML5 page that takes a feed from a webcam and displays it multiple time using different effects. Note: running this as a local file won't work; it needs to be run from a webserver due to security restrictions.
<!DOCTYPE html>
<html>
<head>
<title>Video capture tests</title>
<script>
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
function onVideoLoaded(video) {
var width = video.clientWidth;
var height = video.clientHeight;
var canvases = document.querySelectorAll("canvas");
for (var i = 0; i < canvases.length; i++) {
var canvas = canvases[i];
canvas.width = width;
canvas.height = height;
}
var backCanvas = document.createElement("canvas");
backCanvas.width = width;
backCanvas.height = height;
setTimeout(draw, 20, video, width, height, backCanvas);
}
function drawDuplicate(canvas, backCanvas, width, height) {
var context = canvas.getContext("2d");
context.drawImage(backCanvas, 0, 0, width, height);
}
function nullTransform(pixels, i, rowWidth) {
}
function makeGrayscale(pixels, i, rowWidth) {
var r = pixels[i];
var g = pixels[i + 1];
var b = pixels[i + 2];
pixels[i] = r;
pixels[i + 1] = r;
pixels[i + 2] = r;
}
function redify(pixels, i, rowWidth) {
pixels[i + 1] = 0;
pixels[i + 2] = 0;
}
function greenify(pixels, i, rowWidth) {
pixels[i] = 0;
pixels[i + 2] = 0;
}
function blueify(pixels, i, rowWidth) {
pixels[i] = 0;
pixels[i + 1] = 0;
pixels[i + 2] = Math.min(256, pixels[i + 2] * 10);
}
function outline(pixels, i, rowWidth) {
if (pixels.length <= (i + 6)) return;
var col = 2 * pixels[i] + pixels[i + 2] + pixels[i + 3];
var next = 2 * pixels[i + 4] + pixels[i + 5] + pixels[i + 6];
var result = Math.abs(col - next);
pixels[i] = result;
pixels[i + 2] = result;
pixels[i + 3] = result;
}
function blockify(pixels, i, rowWidth) {
var curRow = Math.floor((i/4) / rowWidth);
// horizontally, only process every 8th pixel
var blockSize = 8;
var curCol = (i / 4) % rowWidth;
if ((curCol % blockSize) !== 0) return;
// vertically, only process every 8th row
if ((curRow % blockSize) !== 0) return;
var r = pixels[i];
var g = pixels[i + 1];
var b = pixels[i + 2];
for (var row = 0; row < blockSize; row++) {
for (var j = 0; j < blockSize; j++) {
var offset = ((curRow + row) * rowWidth * 4) + ((j + curCol) * 4);
pixels[offset] = r;
pixels[offset + 1] = g;
pixels[offset + 2] = b;
}
}
}
function drawToCanvas(canvas, backContext, width, height, transformer) {
var sourceImageData = backContext.getImageData(0, 0, width, height);
var context = canvas.getContext("2d");
var pixels = sourceImageData.data;
for (var i = 0; i < pixels.length; i += 4) {
transformer(pixels, i, sourceImageData.width);
}
//var contextImageData = context.getImageData(0, 0, width, height);
sourceImageData.data = pixels;
context.putImageData(sourceImageData, 0, 0);
}
function draw(video, width, height, backCanvas) {
var backContext = backCanvas.getContext("2d");
backContext.drawImage(video, 0, 0, width, height);
var canvases = document.querySelectorAll("canvas");
drawToCanvas(canvases[0], backContext, width, height, makeGrayscale);
drawToCanvas(canvases[1], backContext, width, height, redify);
drawToCanvas(canvases[2], backContext, width, height, greenify);
drawToCanvas(canvases[3], backContext, width, height, blueify);
drawToCanvas(canvases[4], backContext, width, height, outline);
drawToCanvas(canvases[5], backContext, width, height, blockify);
drawToCanvas(canvases[6], backContext, width, height, nullTransform);
drawToCanvas(canvases[7], backContext, width, height, nullTransform);
drawToCanvas(canvases[8], backContext, width, height, nullTransform);
drawToCanvas(canvases[9], backContext, width, height, nullTransform);
drawToCanvas(canvases[10], backContext, width, height, nullTransform);
setTimeout(draw, 40, video, width, height, backCanvas);
}
navigator.getUserMedia({video:true}, function (stream) {
var video = document.querySelector("#video");
video.src = window.URL.createObjectURL(stream);
setTimeout(onVideoLoaded, 2000, video);
}, function (e) {
alert("Failed to capture video: " + JSON.stringify(e, null, 2));
});
</script>
<style type="text/css">
video {
height: 200px;
}
</style>
</head>
<body>
<video id="video" autoplay></video>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment