Sep 152013
 
Google Effects

Google hangouts very popular because of Google effects like face masks and background effects.

I tried to implement Google Effects using HTML5 Canvas,HTML5 getUserMedia API via javaScript face detection library by  Liuliu.

To simplify I divided this tutorial into two parts First getUserMedia basics and Second Face detection & Google Effects.

Please go through the getUserMedia basics then you will understand the logic clearly.

Continuous to previous post, we learnt how to take snapshot using getUsermedia and Canvas. Here is the Demo

 

Just remove capture button and replace onclick event with setInterval Method as shown below

 

The Logic is simple I am injecting local media stream video into HTML5 Canvas.For every 30msec one latest image snapshot will be drawn on canvas. As the Time Interval is very less both video and canvas look like exactly same. Here is the Demo.

Now we will understand face detection JavaScript by LiuLiu. The library contains two js file ccv.js and face.js.

 Go to the A Not-so-slow JavaScript Face Detector, upload your image it takes some time and then an Orange color circle will be drawn on image.here is the sample demo

Face Detection Using javascript

Face Detection Using javascript

It took almost 1537ms to detect the faces.The Library is capable of detection multiple faces. I have gone through the page source actually it’s HTML5 canvas element.
  •  First Image is drawn in Canvas.
  • And then the library has one method ccv.detect_objects() which takes canvas(which contains image) element as argument and it returns array of  coordinates of faces.
  • Finally looping through the coordinates,drawing circle on canvas using context.arc method.

The code behind is

 

Also Read : basics of LocalStorage API

Detect_objecta take so many arguments like cascade,interval,min_neighbours I don’t know about these arguments I have not explored much about it.I am using this detech_objects alone to detect face.

I modified the snapshot method as shown below

 

The Logic here is

  • whenever snapshot called a new image drawn onto the canvas.
  • I am passing that canvas to detect_objects method it will return coordinates of faces.
  • And I increase interval time to 800 because detect_objects taking 1500ms to detect the face coordinates.
  • And Finally instead of drawing circle on our face we will draw Mask Image(I am using three images batman mask and Glasses with Mask,PirateCaptain).

I modified HTML as shown below

 

I created two buttons with Id’s GlassesWithMask and Batman which are two effects in our Google Effects Web App. Onclick we are calling selectMask method. And the Javascript is

  • I declared one variable MaskImage of type Image()
  • In selectmask() method I am assigning MaskImage with id of button.
  • And in Snapshot() method I am replacing ctx.arc with ctx.drawImage as explained above.
  • In the snapshot method I am drawing MaksImage on each face (based on selected mask you have add or substract positions the mentioned metrix will works for most of the Masks)
  • If two people are in Webcam they will be masked with selected feature.
  • I am adding “.png” at the end. i.e., id of buttons and Images should be same so that onclick we can easily change the MaskImage
  • Refer below Image The Mentioned Images are our two Google Effects.
TheLogicBehindSelectingFeature

TheLogicBehindSelectingFeature

I Added some CSS code to style our Google Effects page.Here is the Final HTML Code.

 

Here is the Final Google Effects Demo.

You have to enable getUserMedia in your browser. That I explained in previous post If you have any queries feel free to comment.

Remember getUserMedia does’not work on file:// URL you have host html in IIS or Apache.Use Chrome or Mozilla or Opera

NOTE:

It’s not perfect. Keep Your Face straight and Close to Webcam(with Clean Background) and Remove your Eye Glasses if you have.

And Your suggestions are always welcome Please Add your valuable feedback to improve this App.

GoogleEffectsDemo

GoogleEffectsDemo

I prefer you to read this awesome book on Canvas
Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

I hope you’ve enjoyed this article and that it gives you more ideas face detection and getUserMedia API.If so share this post with your friends and also join our mailing list I will be sharing my learning’s and experiments with HTML5

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List. Read Popular tutorial on HTML5

Sep 152013
 
HTML5 getUserMedia Demo

In this tutorial I will explain how to capture video and audio using getUserMedia  in HTML5 with an example.Then I will explain how to take snapshot using HTML5 getUserMedia API.

And Finally You will learn how to implement Google Hangout Effects using html5 getUserMedia API

First take a look at browser support for javascript getUserMedia API.

HTML5 getUserMedia browser support:

Currently chrome,mozilla,opera supports getUsermedia API.

For chrome and Mozilla we have to prefix corresponding web engine i.e., for chrome we have to use “webkitGetUserMedia” function and for mozilla “mozGetUserMedia” function.

For Opera no need to add any prefix simply use “getUserMedia”.

By default getUserMedia disabled in chrome and mozilla.

To enable getUserMedia in Chrome type ‘chrome://flags/’ in URL bar and enable “Enable screen capture support in getUserMedia(). Mac, Windows, Linux, Chrome OS” option.

To enable getUserMedia in Mozilla type ‘about:config’ in URL bar search for “media.navigator.enabled” and set it True.

Safari and InternetExplorer does not support getUserMedia.

For more information check getUserMedia Browser Support

getUserMedia Example:

One important thing you should remember is

You cannot use getUserMedia on web pages served using file:// URLs.

So host your HTML file in Apache or IIS , then browse better use Visual Studio.

Here is the sample HTML file

 

And next we will write javascript code. Instead of if else loops to support different browser we will define navigator.getUserMedia as shown below.

 

Now we will understand HTML5 getUserMedia function it will take three arguments like constraints,successCallback,FailureCallback. The syntax is shown below.

constraints:

getUserMedia constraints are nothing but which media streams to use i.e., audio or video.And it is required field

successCallback:

successcallback is the function we call when media stream is loaded successfully in our case put it into video tag.success callback is required field.

The getUserMedia function will call the function specified in the successCallback with the LocalMediaStream object that contains the media stream.

  • First we are getting video element using document.querySelector()
  • And Then creating a object URL for the localMediaStream provided by the getUserMedia using window.URL.createObjectURL
  • Finally use this URL for the source of Video element.

errorCallback:

Failure callback is the function we call when media stream cannot be loaded.The function called with different types of code arguments as mentioned below.And it is optional however in mozilla it’s required field.

ErrorDescription
PERMISSION_DENIEDThe user denied permission to use a media device required for the operation.
NOT_SUPPORTED_ERRORA constraint specified is not supported by the browser.
MANDATORY_UNSATISFIED_ERRORNo media tracks of the type specified in the constraints are found.

 

Sample errorCallback function

 

err.name will display the corresponding error codes

And here is the Final Code. Load your document (remember host it on apache or IIS) and grant permission.

 

And Next step we will take snapshot and display it into HTML5 Canvas element.

Add Canvas tag and Capture Button to our HTML Code.

 

And then add javaScript code

 

I added snapshot() method

  • Canvas width and height we are assigning to video element width and height
  • And then We are drawing Image on canvas using drawImage() function which takes argument video element and X,Y Coordinate position.
  • And Finally we added this method to capture button click event.
HTML5 getUserMedia Demo

HTML5 getUserMedia Demo

Here is the Final Demo.

Actually I tried to implement Google Hangout effects using HTML5 Canvas and getUserMedia, so in this post I tried to cover all basics of  HTML5 getUserMedia.

Go through this awesome article  Learn how to implement Google Hangout effects

Google Effects

Google Effects

 

I prefer you to read this awesome book on Canvas
Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

I hope you’ve enjoyed this article and that it gives you more ideas on HTML5 getUserMedia API .If so share this post with your friends and also join our mailing list I will be sharing my learnings and experiments with HTML5

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List. Read Popular tutorial on HTML5

 

Sep 082013
 
Matrix Effect

Now a days I am playing around with HTML5 Canvas API and Java Script. It’s an amazing option to create animations.

This weekend I saw The Matrix movie.This film known for it’s visual effect.

Then I thought is it possible to Create Matrix effects using HTML5 and JavaScript   something like below.

Matrix Effect

Matrix Effect

First I wrote some JavaScript code as mentioned below.

 

I wrote one Matrix function In which I am filling canvas with “Matrix” word at random locations using Canvas fillText method(Line 10). And I am calling that function using Javascript setInterval Method (Line  12)(Interval Time 30.)

Line 7 and 8 will fill the screen with background color black and opacity of 0.05.

When each time the Matrix function is called,Canvas fillStyle will draw the background on the screen.Because of this you can see text has different colors at different places on canvas.Some text will have green color without transparent background color. This is because there will be a new layer drawn on the screen each time the Matrix is called

Line 10 will draw “Matrix” word at random locations. I am using JavaScript Math.random() to do the same. Here is the Simple Matrix Effect Demo.

But this is not what we expected,Carefully observe the above Matrix Effect Gif Image: All alphabets are drawn along Y-Axis while X-Coordinates are constant.So I changed my code little bit as shown below.This is the key point in our Algorithm to Create Matrix effect using HTML5

 

Algorithm Behind Matrix Effects using HTML5 Canvas And JavaScript:

Here I declared an array (YPositions) to store Y-Coordinates.Initially array will contain all zero’s.And Inside draw() function I am using Java script Array Map function, basically It Creates a new array with the results of calling a provided function on every element in this array.

Here is the quick Example of Java Script Array Map

 

The Array index starts at ‘0’ zero so, For X -co ordinate I am adding 10,Our X coordinates are (10,20,30,40………290)(Line 12)

And Y co-ordinates will vary from (0 to 110) If  Y value > 100 I am resetting array element to ‘0’ otherwise incrementing 10.(Line 14 to 21). Here I am not using new Array I am changing existing(YPositions) array itself using Java Script Array Map function.

I am drawing ‘a’ character on canvas at (x,y) locations. (Line 13).

  • i.e., on first Iteration we will draw “a” at (10,10)(20,10)(30,10)……(290,10)
  • Second Iteration  (10,20)(20,20)(30,20)……….(290,20) and this goes until Y >100 then we will reset the value to ‘0’

Also Read   :  Simple Algorithm to Draw Polygon using HTML5 Canvas

I think now you understood the Logic behind this implementation if you are still in doubt refer below image.

HTML5CanvasTutorial

HTML5CanvasTutorial

I think now your clear with Logic.

Now we have to replace “a” with random alphabets and Y positions to some random coordinates to create actual Matrix Effect using HTML5 and javaScript  Here is the final Code.

 

I am using Java script String Char from Code Method(Line 27) to generate random alphabets which take ASCII Value as input and gives corresponding character. In short it will convert ASCII Codes to Characters.

And also I added two buttons to Play and Pause Matrix Effects. I prefer you to read Simple Snake Game using HTML5 Canvas to understand this buttons mechanism.

Here is the Final demo of Matrix effects using HTML5 and JavaScript

Learn how to implement  Google Hangout webcam Effects using HTML5 getUserMedia 

I prefer you to read this awesome book on Canvas
Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

I hope you’ve enjoyed this article and that it gives you more ideas on how we can implement animations using the HTML5 Canvas API.If so share this post with your friends and also join our mailing list I will be sharing my learnings and experiments with HTML5

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List. Read Popular tutorial on HTML5

Aug 282013
 
HTML5 Canvas Polygon

How to Draw Polygons using Html5 canvas?

First we have to identify the points on HTML5 canvas and then use context.lineto() method for drawing lines and finally use stroke or fill method to make polygon visible. Here is the sample code for Drawing HTML5 Canvas Polygon

Html5 canvas API comes with so many options and we can draw anything using Javascript  based upon path abstractions.

 

But the problem is how identify the points to draw polygon?

In this post I will explain how to draw a regular polygon using HTML5 Canvas. 

And also pattern to identify the points to draw polygon.

What exactly this regular polygon is.In a regular polygon all angles and all sides are equal.

HTML5 Canvas Polygon

HTML5 Canvas Polygon

If we observe the above images we can come to know that all vertices of regular polygon can be located on a circle.In other words regular polygon can be inscribed within a circle.

Also read: How to develop simple snake game using HTML5 cavas

We will go to our school days and understands some trigonometry functions cosine sine etc. Any point in a circle can be identified as  (r cos e,r sin e) where r is the radius and e is the angle.Refer below images. This is the key point in our algorithm to draw regular  HTML5 Canvas Polygon.

Html5CanvasPolygon

Html5CanvasPolygon

For instance we will take equilateral triangle,as explained above this triangle divides circle into three equal parts and each part will make an angle of 120 degrees at the center(360/3=120).

Now identify the three vertices

  • First vertex     : at 0 degree i.e., (r cos 0,r sin 0)=(r,0)
  • Second vertx  : at 120 degree i.e., (r cos 120,r sin 120)
  • Third vertex    : at 240 degree i.e., (r cos 240,r sin 240)
Html5CanvasPolygon

Html5CanvasPolygon

Now our algorithm is ready.

  • First take number of sides(n) and radius of circle(r)
  • And calculate angle made by the each side of regular polygon at center (360/n)
  • Identify the first vertex (r,0)
  • Loop through the angles to identify the points
  • And draw the polygon using store or fill method

Observe the below code carefully I will explain each line one by one.

 

We are passing context(ctx),center of regular polygon(x,y),radius(r),number of sides(sides) as parameter to regular polygon function.if sides < 3 we cannot make a polygon so return directly.

Next angle calculation,HTML5 canvas and Javascript trigonometric functions will take radian  as unit to specify angles rather than degrees.And 2*,Math.PI(Javascript notation for PI) is equal to 360 degrees.

Now moving the center to (x,y) using translate method.

Next We will move to the first point of regular polygon using moveTo() method that is nothing but (r,0) as explained above.

Loop through the sides to identify remaining two points and then close the path using closePath() .

Draw Triangle using HTML5 Canvas:-

However this function will not draw anything just it will define drawing path and we have to use storke or fill method to make polygon visible. Here is the sample HTML5 Code.

 

This will draw the triangle exactly as shown in above figure (with radius (3,0)) But that is not visually straight because we made first point as (3,0)

To make triangle straight we have to rotate the context about 90 degrees(negative direction i.e., -Math.PI/2) so we will slightly change our method as shown below

 

And now below code will draw exactly straight triangle

 

If you don’t want to rotate the triangle do not pass the last argument i.e., rotateAngle.

I hope you understand  how to draw a regular polygon using HTML5 canvas.

But how we can generalize these to any polygon simply follow the below steps.For instance a take pentagon which is not regular pentagon

  •  Identify any five points on a circle.
  • To identify the points we have to divide 360 degrees into 5 parts which are not equal(Say 80,90,100,30,60 degrees)
  • These angles are nothing but angles made by the each side at center of circle.
  • Now we know the points draw the lines using LineTo and finally stroke it. Please look into the below code.

Draw Polygon using HTML5 Canvas:-

 

For regular polygons all angles are equal so we took a for loop to identify the points but this is not the case for normal polygon so we have to add angles one by one to identify the points.

The above code looks somewhat tricky, But I feel this is the best way to identify the points of a polygon on HTML5 Canvas instead of giving points normally like c.lineTo(120,50) where we have to guess so many points to Draw HTML5 Canvas Polygon.

Live Demo For HTML5 Canvas Polygon

I prefer you to read this awesome book on Canvas
Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

I hope you’ve enjoyed this article and that it gives you more ideas on how you can use the HTML5 Canvas API.If so join our mailing list I will be sharing my learnings and experiments with HTML5

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me

And Finally Don’t Forgot to Join Our Reader List.

Optimization WordPress Plugins & Solutions by W3 EDGE