For practical cases, we will use this HTML code:

<script src="WCGI/JS/mlCGI.e.js" type="text/javascript"> </script>

<video id="video1" src="" controls=true>
<img id="photo1" name="photo1" src="demo.jpg">
<img id="photo1" name="photo2" src="demo.jpg">

mlActiveWebCam

Allows to connect and display image from your WebCam to a HTML5 <video> control, if you have two or more WebCams the active browser will ask for choose one.

It has only one argument

Definition:
    function mlActiveWebCam( destDevice )

Example:
    var video = document.getElementById("video1");
    mlActiveWebCam( video );

mlBinarize

Turn source image in grayscale and based in a Threshold turn it in black or white

The second argument is optional, when it miss the result overwrites in sourceDevice

Definition:
    function mlBinarize( sourceDevice [, destDevice] )

Example:
    var photo = document.getElementById("photo1");
    var resul = document.getElementById("photo2");

    mlBinarize( photo );         // gets image - process in memory - overwrite 
    mlBinarize( photo, resul );  // gets image - process - display new

mlBigerPixels

Increase the pixel resolution leaving a pixelized image, it may used to hide some features or faces partially, this effect reduces the image's quality once used.

The second argument is optional, when it miss the result overwrites in sourceDevice

Definition:
    function mlBigerPixels( sourceDevice [, destDevice] )

Example:
    var photo = document.getElementById("photo1");
    var resul = document.getElementById("photo2");

    mlBigerPixels( photo );         // gets image - process in memory - overwrite 
    mlBigerPixels( photo, resul );  // gets image - process - display new

mlDisplay

Display source image from any HTML5 device like IMG, CANVAS, VIDEO over any device, it acts like a copy to make a backup or process currently withou modifies the source image.

Both arguments going here, source and destiny.

Definition:
    function mlDisplay( sourceDevice, destDevice )

Example:
    var photo = document.getElementById("photo1");
    var resul = document.getElementById("photo2");

    mlDisplay( photo, resul );   // gets a copy in [result]

mlConvEdgeSobel

The edge detection based in Sobel Derive sweps in two senses, horizontally and vertically that becomes in an increasilly time in CPU over big images.

The second argument is optional, when it miss the result overwrites in sourceDevice

Definition:
    function mlConvEdgeSobel( sourceDevice [, destDevice] )

Example:
    var photo = document.getElementById("photo1");
    var resul = document.getElementById("photo2");

    mlConvEdgeSobel( photo );         
    mlConvEdgeSobel( photo, resul ); 

mlConvolutionByUser

Allows to developer apply a customized filter, requiries use mlConvMatrix() function to create it, it has to be defined previously and tested if it can otherwise a wrong data in convolution gets a wrong result

The third argument is optional, when it miss the result overwrites in sourceDevice

Definition:
    function mlConvolutionByUser( sourceDevice, convMatrix, [, destDevice] )

Example:
    var photo = document.getElementById("photo1");
    var resul = document.getElementById("photo2");

    var kernel = new mlConvMatrix();
    kernel.offset = 3;
    kernel.factor = 1;
    kernel.M = [ [ 1, 0, -1 ], 
                 [ 2, 0, -2 ], 
                 [ 1, 0, -1 ] ];

    mlConvolutionByUser( photo, kernel );         
    mlConvolutionByUser( photo, kernel, resul ); 






Created by Ramiro Pedro Laura Murillo
Universidad Nacional del Altiplano
MASTERS DEGREE PROJECT - 2014