Home > HTML5 > Google Hangout Effects using HTML5 and JavaScript facedetection

Google Hangout Effects using HTML5 and JavaScript facedetection

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.

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


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.


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

Arunkumar Gudelli
I am a Simple Guy, Standing Infront of the World, asking you to Follow Me. Don't miss any posts from Me,Subscribe to the RSS Feed. You can connect me via @twitter or @facebook or Google+ or e-mail.
  • Really nice one 🙂 Thank you .