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.

0appdemo

Setting up the Emotion API

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

0TextAnalysisAzure

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!

2pricingblade

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

3keyblade

Visual Studio Project

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

4wpfapp

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:


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.
https://gist.github.com/prombouts/6b8e27940278126606e6a69b23742f91.js

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s