Project Highlight: Contextual Billboards With APIs

Billboards, or out of home (OOH) advertising, generate more than $7.3 billion in ad revenue a year.  What if developers could use APIs to make them a lot more relevant?

Today, we’re highlighting Karunanidhi Devanidhi and Ganeshbabu Thavasimuthu for their HackTX project around contextual billboards. To better visualize their project, imagine this scenario:

You’re walking by a billboard in the subway. When you turn to look at the display, the advertisement changes to a promotion for a movie that you’ve been wanting to see. Or a clothing brand that you like. All by recognizing your face and matching it to your interests on Facebook.

Pretty cool, right? Here’s how they used the Microsoft Computer Vision and Facebook Graph APIs to build the Context Sensitive Advertisement project. Read on or jump straight to the GitHub repo.

The Mission:

Build a billboard that analyzes the user and serves more tailored, relevant ads based on their Facebook profiles and demographic data.

The Method:

Overview

In order to build a context-sensitive billboard, the team needed to film the user, freeze and analyze an image, identify the user and pull his or her Facebook profile. Finally, they needed a web app for the advertiser to buy ads that target specific segments (age, gender, and interests).  Not an easy task to complete in just 24 hours!

Drilldown

The team used a Microsoft Kinect to film the user. Then, they built a program using the Microsoft Computer Vision API’s cognitive functionalities to recognize and identify the user. They used RapidAPI to connect to the Microsoft Computer Vision API and export the code in NodeJS.

Next, they built a web app for advertising using MongoDb. They used RapidAPI to connect to the Facebook Graph API. Connecting to Facebook allowed them to build an interface for advertisers to segment their audience by age, gender and pages that the user had liked.

The application is written in NodeJS and is hosted on Microsoft Azure.

APIs Used:
Here are the APIs that the team used to make this project possible. Click the links below to see the endpoints and start experimenting.

• Microsoft Computer Vision API
• Facebook Graph API

Demo:

See the team walk through their design in this brief demo below.

Have you built any projects using these APIs? Let us know in the comments!