Initial commit

Code, readme, license
idevelop · Feb 14, 2013 · 609b50e · 609b50e
1 parent 570388a
commit 609b50e
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+Copyright (c) 2013 Andrei Gheorghe
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,4 +1,21 @@
-ascii-camera
+ASCII Camera
 ============
 
-ASCII Camera
+ASCII Camera uses the HTML5 getUserMedia API to transform a video stream from your webcam into an ASCII representation.
+
+[See it in action](http://idevelop.github.com/ascii-webcam).
+
+## Browsers supported
+
+* Chrome &ge; 21
+
+## Author
+
+**Andrei Gheorghe**
+
+* LinkedIn: [linkedin.com/in/idevelop](http://www.linkedin.com/in/idevelop)
+* Twitter: [@idevelop](http://twitter.com/idevelop)
+
+## License
+
+- This code is licensed under the MIT License.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,26 @@
+h1 {
+	font-family: 'Helvetica neue', 'Helvetica', 'Arial', sans-serif;
+	font-size: 48px;
+	font-weight: 300;
+	color: #999;
+	text-align: center;
+
+	margin: 50px;
+}
+
+#ascii {
+	font-family: 'Courier New', 'Courier', monospace;
+	font-size: 10px;
+	line-height: 10px;
+	letter-spacing: -1.5px;
+	text-align: center;
+
+	margin: 50px;
+}
+
+#fork {
+	 position: absolute; 
+	 top: 0; 
+	 right: 0; 
+	 border: 0;
+}
diff --git a/images/forkme.png b/images/forkme.png
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+	<title>ascii cam</title>
+	<link rel="stylesheet" href="css/main.css"/>
+</head>
+<body>
+	<h1 id="info">Please allow this page to access your camera</h1>
+
+	<pre id="ascii"></pre>
+
+	<a href="https://github.com/idevelop/ascii-camera" id="fork" target="_blank"><img src="images/forkme.png" alt="Fork me on GitHub"></a>
+
+	<script src="script/camera.js"></script>
+	<script src="script/ascii.js"></script>
+	<script src="script/app.js"></script>
+</body>
+</html>
diff --git a/script/app.js b/script/app.js
@@ -0,0 +1,24 @@
+(function() {
+	var asciiContainer = document.getElementById("ascii");
+
+	camera.init({
+		width: 160,
+		height: 120,
+		fps: 30,
+		mirror: true,
+
+		onFrame: function(canvas, context) {
+			ascii.fromCanvas(canvas, context, {
+				contrast: 5
+			}, function(asciiString) {
+				asciiContainer.innerText = asciiString;
+			});
+		},
+
+		onSuccess: function() {
+			document.getElementById("info").style.display = "none";
+		},
+
+		onError: console.error
+	});
+})();
diff --git a/script/ascii.js b/script/ascii.js
@@ -0,0 +1,79 @@
+var ascii = (function() {
+	function asciiFromCanvas(canvas, context, options, callback) {
+		// Original code from http://www.nihilogic.dk/labs/jsascii/
+		// Heavily modified by Andrei Gheorghe: http://github.com/idevelop
+
+		var characters = (" .,:;i1tfLCG08@").split("");
+
+		var canvasWidth = canvas.width;
+		var canvasHeight = canvas.height;
+		var contrastAmount = options.contrast || 5;
+
+		var asciiCharacters = "";
+
+		// apply contrast
+		context = applyContrast(canvas, context, contrastAmount);
+
+		var imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
+		for (var y = 0; y < canvasHeight; y += 2) {
+			for (var x = 0; x < canvasWidth; x++) {
+				var offset = (y * canvasWidth + x) * 4;
+
+				var color = {
+					red: imageData.data[offset],
+					green: imageData.data[offset + 1],
+					blue: imageData.data[offset + 2],
+					alpha: imageData.data[offset + 3]
+				};
+
+				// http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color
+				var brightness = (0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;
+
+				var character = characters[(characters.length - 1) - Math.round(brightness * (characters.length - 1))];
+
+				asciiCharacters += character;
+			}
+
+			asciiCharacters += "\n";
+		}
+
+		callback(asciiCharacters);
+	}
+
+	function applyContrast(canvas, context, contrast) {
+		var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+		var contrastedCanvas = document.createElement("canvas");
+		var contrastedContext = contrastedCanvas.getContext("2d");
+		var contrastedImageData = contrastedContext.createImageData(imageData.width, imageData.height);
+
+		var imageDataLength = imageData.data.length;
+		for (var i = 0; i < imageDataLength; i+=4) {
+			var color = {
+				red: imageData.data[i],
+				green: imageData.data[i + 1],
+				blue: imageData.data[i + 2],
+				alpha: imageData.data[i + 3]
+			};
+
+			var result = {
+				red: ((color.red - 125) * contrast) + 125,
+				green: ((color.green - 125) * contrast) + 125,
+				blue: ((color.blue - 125) * contrast) + 125,
+				alpha: color.alpha
+			};
+
+			contrastedImageData.data[i] = result.red;
+			contrastedImageData.data[i + 1] = result.green;
+			contrastedImageData.data[i + 2] = result.blue;
+			contrastedImageData.data[i + 3] = result.alpha;
+		}
+
+		contrastedContext.putImageData(contrastedImageData, 0, 0);
+		return contrastedContext;
+	}
+
+	return {
+		fromCanvas: asciiFromCanvas
+	};
+})();
diff --git a/script/camera.js b/script/camera.js
@@ -0,0 +1,72 @@
+var camera = (function() {
+	var doNothing = function(){};
+
+	function initCamera(options) {
+		var video = document.createElement("video");
+		video.setAttribute('width', options.width);
+		video.setAttribute('height', options.height);
+
+		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+		window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+
+		if (navigator.getUserMedia) {
+			navigator.getUserMedia({
+				video: true
+			}, function(stream) {
+				options.onSuccess();
+
+				if (video.mozCaptureStream) { // hack for Mozilla
+					video.mozSrcObject = stream;
+				} else {
+					video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
+				}
+
+				startVideoStream(video, options);
+			}, options.onError);
+		} else {
+			options.onError("getUserMedia not supported");
+		}
+	}
+
+	function startVideoStream(video, options) {
+		var canvas = options.targetCanvas || document.createElement("canvas");
+		canvas.setAttribute('width', options.width);
+		canvas.setAttribute('height', options.height);
+
+		var context = canvas.getContext('2d');
+
+		// mirror video
+		if (options.mirror) {
+			context.translate(canvas.width, 0);
+			context.scale(-1, 1);
+		}
+
+		var drawInterval = Math.round(1000 / options.fps);
+		var draw = function() {
+			context.drawImage(video, 0, 0, video.width, video.height);
+			options.onFrame(canvas, context);
+
+			setTimeout(draw, drawInterval);
+		};
+
+		video.play();
+		draw();
+	}
+
+	return {
+		init: function(options) {
+			options = options || {};
+			options.fps = options.fps || 30;
+			options.width = options.width || 640;
+			options.height = options.height || 480;
+			options.mirror = options.mirror || false;
+			options.targetCanvas = options.targetCanvas || null;
+
+			options.onSuccess = options.onSuccess || doNothing;
+			options.onError = options.onError || doNothing;
+			options.onFrame = options.onFrame || doNothing;
+
+			initCamera(options);
+		}
+	};
+})();