Microsoft explains how its brilliant Magic Mirror was built

(Image Credit: Microsoft)

Microsoft demonstrated a 'Magic Mirror' during the InnovFest Unbound conference last month which offered an impressive look at how everyday objects can deliver useful information to a user without getting in the way. 

The mirror is connected to the internet and uses facial recognition to detect the user standing in front of it. A personalised morning update is then shown under the mirror which includes the latest news and traffic information for their commute – all whilst remaining functional as a mirror.

(Image: Magic Mirror UI)

“Imagine when you wake up in the morning, you’re able to use the mirror to style your hair, do your makeup, and while doing that, you can also view the weather,” explained Izzat Khair of Microsoft's developer experience team. 

Needless to say, it caused some excitement with many people asking when it will be available to purchase. Their hopes were soon dashed when it was found to just be a concept, but for those who are prepared to invest some time building it themselves Microsoft has detailed how their Magic Mirror was built. 

Powering the mirror is the low-cost and readily-available Raspberry Pi running Windows 10 IoT Core. To provide the interface and basic functionality, Microsoft decided to use a simple Hosted Web App. In fact, the company has open-sourced the application source code and bill of materials on GitHub for you to give it a go yourself. 

The web app is created in HTML, CSS, and JavaScript and served from a Node instance hosted on Azure. Using the Hosted Web apps bridge, Microsoft converted their web app into a Universal Windows App which provided access to Windows Native APIs and enabled it to run across Windows-powered devices, such as the Raspberry Pi 3. 

(Image: Web App Architecture)

One important API utilised by the mirror is the Face API which uses facial recognition to match a user's face to their profile for a seamless experience without requiring logins to break the "magic" experience of just standing in front of the mirror and receiving the personalised information. 

Don't forget to grab the source code if you want to see more about how the software was built and/or use it to create your own mirror (if you do, please send us one!) 

Were you impressed with the Magic Mirror demonstration? Share your thoughts in the comments. 

Related Stories

Leave a comment

Alternatively

This will only be used to quickly provide signup information and will not allow us to post to your account or appear on your timeline.