Add antlers, mustaches, and more to apps in Hangouts

For NMovember we added mustaches in hangouts and now for the holidays we’ve added antlers. Today, we are adding media effects like these to the Google+ Hangouts API developer preview, so that you can add your own special effects to Hangouts apps.

This new API will let you detect the participant’s face and overlay your own image on it. Images can be attached to different parts of the face (nose, eyes, upper lip, etc.) and will track that point as the face moves. The image will rotate as the face rotates, and scale to the size of the face.

The following code snippet will give you a sense of how simple it is to detect the nose tip of a participant and overlay a custom image. See the API documentation for more details.

// Load the image file
var imageResource = gapi.hangout.av.effects.createImageResource(
   'http://your image file');

// Create the overlay
var overlay = imageResource.createFaceTrackingOverlay({
 trackingFeature: gapi.hangout.av.effects.FaceTrackingFeature.NOSE_TIP,
 scaleWithFace: true,
 rotateWithFace: true
});
overlay.setVisible(true);

We are also adding an API that lets developers add their own sound to the hangouts. Here is a snippet.

// Load an audio file
var audioResource = gapi.hangout.av.effects.createAudioResource(
   'http://your audio file');
// Play the sound
var sound = audioResource.play();

Give it a try and add some fun and interesting elements to your hangouts apps. Follow the conversation on Google+. #seasonforshipping.


Posted by Amit Fulay, Product Manager, Google+ Hangouts