ASCII-Camera-JS

How to make a ASCII Camera and Download the generated image

This application Uses These Two Javascripts Which Is developed By Andrei Gheorghe

Camera.js

A simple wrapper around the HTML5 getUserMedia API, offering cross-browser access to the user's webcam video stream.

Usage

Upon initalization, the library asks the user for permission, sets up the necessary getUserMedia code and starts the stream. All parameters are optional, their default values are explained below.
The onFrame callback function is called each time there is a new frame to be processed, with respect to the fps option.
If you want the video stream to also be rendered in a "canvas" element, set the targetCanvas option to an element reference.

To pause the video capture, call camera.pause(). To resume, call camera.start().

JS script

    
<script>
camera.init({
	width: 160, // default: 640
	height: 120, // default: 480
	fps: 30, // default: 30
	mirror: true,  // default: false
	targetCanvas: document.getElementById('webcam'), // default: null 
onFrame: function(canvas) {
	// do something with image data found in the canvas argument
},

onSuccess: function() {
	// stream succesfully started, yay!
	camera.start();
	//or camera.pause(); depend upon the logic.
},

onError: function(error) {
	// something went wrong on initialization
},

onNotSupported: function() {
	// instruct the user to get a better browser
}

});
</script>

Ascii.js

The library returns a global object named ascii , this object has only 1 property "fromCanvas". This function expects as first parameter the canvas which is going to be processed and as second parameter an object with the properties.

Working

• The library will use the following characters in the ascii string ".,:;i1tfLCG08@".

• By given contrast value its calculate the contrastFactor using this formula

• contrastFactor = (259 * (options.contrast + 255)) / (255 * (259 - options.contrast))
  http://www.dfstudios.co.uk/articles/image-processing-algorithms-part-5/

• Then it will use a loop with the retrieved pixel data using the getImageData function from the canvas and according to the brightness of every pixel.

• Color brightness is determined by the following formula:

• ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
  http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color

• a character from the characters variable will be choosen to be drawn (appended to the asciiCharacters variable).

Note: the contrast of the image will be changed to get a better result, you can increment the contrast using the contrast parameter in the fromCanvas function.

JS script

    
	<script>
	var canvas = document.getElementById("myCanvasId");
	ascii.fromCanvas(canvas, 
		{
			contrast: 64,
			callback: function(asciiString)
			{
				// Do something with the asciiString
				asciiContainer.innerHTML = asciiString;
		   	}
		});
	<script>