Microsoft provides some details on building a magic mirror with Hosted Web Apps and Windows 10 IoT

Reading time icon 3 min. read


Readers help support Windows Report. We may get a commission if you buy through our links. Tooltip Icon

Read our disclosure page to find out how can you help Windows Report sustain the editorial team Read more

Waking up in the morning is about to get a little more technical. We’ve seen sneak peeks and demos of Microsoft’s Magic Mirror. The ‘smart mirror’ can easily recognize facial identification and tailor a display individually for you as you look in it. Earlier this month we learned about the backbones of the Magic Mirror, but today Microsoft has released a blog post giving more depth to the project.

The physical creation of the mirror seems relatively simple. In front is the one-way mirror. Behind it, however, is a black LCD screen that shows a high contrast white interface. As you brush your teeth, get dressed, and straighten your tie, all of the information that you deem noteworthy is made available on the display for you. Time and weather, being the primary factors in morning preparation, have a dominant display at the top of the mirror with less important information at the bottom.

Magic Mirror Interface
Magic Mirror Interface

Built with Windows IoT Core on Raspberry Pi 3, the Hosted Web App is able to utilize very basic coding from HTML, CSS, and JavaScript making it an ideal opportunity for novice developers. By making the Magic Mirror app into a UWP through the Hosted Web App’s bridge, it has capabilities to use APIs provided by Microsoft Cognitive Services. Facial recognition is a key element to the Magic Mirror, and through Cognitive Services, users can save a picture of themselves into the mirror’s database and the camera can load it once they are in front of the mirror again.

The Node instance sends the image as ‘octet-stream’ to Cognitive Services through the REST API which then binds the face_id to the user’s preferences:
1111111111

While the mirror isn’t being used, it will fall into a rest mode that displays only the clock in the corner. This does two things: it allows the Magic Mirror to use up fewer resources and it lets the mirror greet the user. Upon someone approaching, the Magic Mirror attempts to recognize the face but displays a message such as “Is that you?” to encourage users to come closer to the mirror.

The ‘facedeteced’ event only triggers to retrieve information from Cognitive Services after a face is detected:
11111111

Microsoft designed the Magic Mirror to be user-friendly, making it easy to put together and use. Interested parties are even encouraged to try their own smart mirror with instructions available on Github. After the mirror is assembled and all connected, users on both PC and Mac will be able to install the Magic Mirror app.

The potential is nearly limitless with the open source on Github being available to developers, allowing them to play with the code and provide feedback for the project. It will be interesting to watch the current status of stocks and driving conditions develop into a list of available interfaces that will be personalized by each user’s profile.