How to make a ASCII Camera and Download the generated image
How to make a ASCII Camera and Download the generated image
This application Uses These Two Javascripts Which Is developed By Andrei Gheorghe
A simple wrapper around the HTML5 getUserMedia API, offering cross-browser access to the user’s webcam video stream.
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().
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.
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.