SayHello - Microsoft Face API Demo

This is a project created for a competition to demonstrate the Microsoft Face API. The classes I created, Camera and FaceAPI, can be used in any JavaScript project. Demo.

Features

• (Nearly) completely done using Microsoft's Face API
• Real-time tracking (depending on your license this might be slow because of rate limits)
• Real-time identification with name
• Multiple faces, multiple persons
• Makes you happier by forcing you to smile (scientifically proven: source)

The project was created using ES6, SCSS, Webpack (to transpile ES6 and SCSS) and ESDoc. I only used those to simplify the development, it could have just as well been done without these resources. I have not thoroughly tested compatibility, but it works in relatively up-to-date Google Chrome and Firefox.

Getting started

This is only if you want to set it up yourself. You can access a demo online.

Clone the repository, install node modules (npm install) and run npm start. You might need to install some of the modules globally as needed (trial & error, sorry, but I'm on a deadline! It's probably just webpack and esdoc). I was restricted to the free trial of Microsoft's cognitive services and I suspect it works much better with a paid version.

Using the FaceAPI class

The FaceAPI class can be used in any other project. Here, it is used for a very specific example: identifying a user by their face to display their name.

If you wanted to, let's say, tag people on a picture (given that the personGroup was already set up) and needed the coordinates for that, you could do the following:

import FaceApi from './faceapi';
const api = new FaceApi('your-key-inserted-here');
const image = { url: 'http://example.com/1.jpg' };
const personGroupId = 'your-person-group-id';

// uh oh, try not to nest it.
api.detect(image)
  .then(detectedFaces => {
      api.identify(personGroupId, detectedFaces.map(f => f.faceId))
        .then(identifiedFaces => {
            // Determine the identified persons.
          });
    });

Please note that each call of the FaceAPI corresponds to a resulting fetch request to Microsoft's API server. Thus, they are limited in rate (not regulated by the class) and asynchronously completed.

Motivation

I created this for IT-Talent's March competition and it took me a little less than a week. It was difficult to wrap my head around Microsoft's API and I had never used Vue.js before.

API reference

The documentation I created was done inline with ESDoc for simplicity, it's available here on GitHub. It's not great but it has 100% coverage.

More information

I used ESLinter with Airbnb's style guide and scss-linter with default settings.