Created
September 21, 2012 16:20
-
-
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.
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
| <!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