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.
Setting up the Emotion API
First and foremost you will have to create an API key. This can be done using the Azure Portal.
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!
At last, check out the generated keys to use in your project further on:
Visual Studio Project
For Visual Studio, there are no specific features to set up. Just create a blank WPF application.
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!
Peter Rombouts 