Emotion Recognition using WPF

A lot of examples of the Cognitive Services include UWP applications and samples. But sometimes you have to support older operating systems, that force you to fall back on techniques like WPF. The use of webcams in WPF is not included by default in the framework.

In this blog I will explain how to implement the Emotion API and build a WPF application capturing your webcam.

A sample of an application you can create shown in the following screenshot. This application shows the realtime spline chart of emotions, and the average bubble chart of the recorded session.

Emotion App with near realtime tracking

Setting up the Emotion API

First and foremost you will have to create an API key. This can be done using the Azure Portal.

Cognitive Services Blade

Make sure to select the S0 pricing tier. At 0,08 euro per 1000 calls the recognition is pretty cheap in use and you can call the API 10 times per second!

Pricing Blade; Choose West US as location as this is a preview API

At last, check out the generated keys to use in your project further on:

API Keys for use in your application

Visual Studio Project

For Visual Studio, there are no specific features to set up. Just create a blank WPF application.

Visual Studio WPF template

Using a webcam within WPF

There is no default webcam available when coding in WPF. For this, I’ve used the AvCapWpf project.

The only thing to include in your WPF XAML page is:

<cap:CapPlayer x:Name="player">

This will enable the webcam and will allow you to capture video’s.

Using the Emotion API

Microsoft has NuGet packages to enable easy consumption of the API:

Install-Package Microsoft.ProjectOxford.Emotion

This will enable you to instantiate the EmotionServiceClient with the API keys, and allow you to submit a captured image and read the results.

The following gist shows how to save the webcam feed to a temporary file, sending it to the API and consuming the results.

Timers in WPF

To measure the emotions every x-seconds, we need to setup a timer. Because the default DispatcherTimer does not work with async/await patterns, I’ve used something like this proposal on StackOverflow for fixing that issue.

Graphs

The graphs I’ve used in my demo are created with the Syncfusion Essential Studio. They have awesome components for many frameworks, ranging from javascript to UWP. For small companies or indie developers they have a free community license, be sure to check it out!

Conclusion

In this blog I’ve explained how to use the new Cognitive Services Emotion API with a simple WPF application, using a webcam.. This will allow your program to run on any Windows from version 7 and up. This scenario is ideal if you don’t have the ability to go UWP on your project.

Please feel free to contact me on any questions relating these techniques!

Leave a Reply

Your email address will not be published. Required fields are marked *