• This repository has been archived on 24/Sep/2024
  • Stars
    star
    1,231
  • Rank 38,130 (Top 0.8 %)
  • Language
    JavaScript
  • License
    Other
  • Created almost 9 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A โšกMagic Mirrorโšก powered by a UWP Hosted Web App ๐Ÿš€

This repository is not actively maintained by anyone. Services associated with running magic mirror have been shutoff.

โšกMagic Mirrorโšก

##Overview

We took the magic mirror concept a step further by enabling user recognition ๐Ÿ˜ƒ. The mirror can recognize registered users and personalize the experience accordingly.

The Magic Mirror is a fun weekend IoT project that showcases the power of Universal Windows Platform (UWP) hosted web apps. Please check out the instructions below to see how you can build it yourself ๐Ÿš€.

The client side was coded against standard web technologies (CSS, HTML, JS) โค๏ธ, and the back-end leverages the power of NodeJS and Mongo hosted on Azure. The client side implements Windows API (mediaCapture) to detect faces from the devices camera, and the Microsoft's Cognitive Services Face API to match Faces to profiles.

##User Flow

Before using the magic mirror, users need to create a profile using the desktop app. You need a profile so the mirror can recognize you and adapt to your needs.

##Assembly Process

Please see the assembly process section.

##Installing the apps

You have to deploy two Hosted Web apps (HWA). The first HWA allows you to create your profile and is meant to run on your desktop. The second HWA powers the Magic Mirror UI that runs on the Raspberry Pi 2/3.

###Deploying on a PC

Prerequisites:

  • Visual Studio (2013+)
  • Windows 10 SDK installed in Visual Stuido

Steps to deploy the Profile Creator app to your desktop:

  1. In Visual Studio, go to Solution explorer, click on package.appxmanifest > Application and set http://webreflections.azurewebsites.net/create as the start page
  2. On the ribbon, change the target architecture to match that of your PC (e.g. x64)
  3. Set the debugging target to "Local machine" (changing the architecture in step 2 probably did this for you)
  4. Click play to start the app running on your local machine
  5. Follow the prompts on the create experience to save a profile for yourself

Steps to deploy the Magic Mirror app to the Raspberry Pi 2:

  1. In Visual Studio, click File > New Project > JavaScript Templates > Windows > Hosted Web apps
  2. Go to Solution explorer, click on package.appxmanifest > Application and set http://webreflections.azurewebsites.net/mirror as the start page
  3. Within the package.appxmanifest view, click the Content URIs tab and insert http://webreflections.azurewebsites.net/ with WinRT Access All
  4. Click the Capabilities tab and select Webcam ๐Ÿ“ท
  5. On the ribbon, Change the taget architecture from Any CPU to ARM
  6. Click play (it should say Remote Machine)
  7. A prompt should appear asking you for the Machine Name. Set the IPv4 of your RP as the Machine Name and select Universal for the Require Authentication
  8. and voilร ! ๐ŸŽ You have succesfully installed the Magic Mirror hosted web app in your RP running Windows IoT core.

You can find a tutorial of how to deploy HWA using Visual Studio here.

###Deploying on a Mac

Coming soon...

Contributing

For guidelines on contributing to this project, please refer to the contributing section.

##Run Locally

Please see the run locally section.

Credits

The weather icons were created by Yorlmar Campos under a Creative Commons Attribution 3.0 license.

##Code of Conduct This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

More Repositories

1

MSEdge

Microsoft Edge
2,828
star
2

MSEdgeExplainers

Home for explainer documents originated by the Microsoft Edge team
HTML
1,308
star
3

static-code-scan

Run this quick static code scan on any URL to check for out-of-date libraries, layout issues and accessibility.
JavaScript
1,047
star
4

WebView2Samples

Microsoft Edge WebView2 samples
C++
868
star
5

JSBrowser

๐ŸŒฒ A web browser built with JavaScript as a Windows app
JavaScript
795
star
6

WebGL

Microsoft Edge WebGL Implementation
C++
714
star
7

Status

This repository tracks the roadmap for the Microsoft Edge web platform. This data is usedย onย https://status.microsoftedge.com/ toย provideย implementationย status and forward-looking plans forย web standards in Edge and other browsers.
JavaScript
534
star
8

WebView2Feedback

Feedback and discussions about Microsoft Edge WebView2
449
star
9

Demos-old

Open source and interoperable demos for Microsoft Edge Dev site
JavaScript
438
star
10

WebView2Browser

A web browser built with the Microsoft Edge WebView2 control.
JavaScript
410
star
11

MicrosoftEdge-Documentation

Microsoft Edge documentation
239
star
12

Demos

Web pages and apps used to demo various DevTools, PWA, WebView, Extensions, and Web Platform features of Microsoft Edge
JavaScript
212
star
13

JsDbg

Debugging extensions for Microsoft Edge and other Chromium-based browsers
JavaScript
177
star
14

DevTools

Feedback and discussions about Microsoft Edge Developer Tools
HTML
154
star
15

Sudoku

In this demo we take the well-known game of Sudoku, and demonstrate how developers can use HTML5 and JavaScript to create an efficient algorithm to solve these puzzles. The algorithms draw heavily on the Chakra engineโ€™s support for ECMAScript 5 standard array operations to rapidly solve many Sudoku games. You can also manually solve Sudoku puzzles.
HTML
149
star
16

MicrosoftEdge-Extensions-Demos

JavaScript
134
star
17

pushnotifications-demo

Demo for cross browsers push notifications with server side code
JavaScript
119
star
18

WebView2Announcements

Subscribe to this repo to be notified of Announcements and changes in Microsoft WebView2 controls.
111
star
19

generator-appx

Yeoman generator for building websites and Windows 10 Apps
JavaScript
90
star
20

webauthnsample

JavaScript
85
star
21

dev.microsoftedge.com-vms

Scripts used to generate the free VMs available at https://dev.microsoftedge.com
PowerShell
81
star
22

edge-launcher

A simple command line exe to launch Microsoft Edge at a URL.
C++
78
star
23

BrowserEfficiencyTest

BrowserEfficiencyTest is a Selenium WebDriver based web browser test automation project.
C#
65
star
24

css-usage

This script is used within our Bing and Interop crawlers to determine the properties used on a page and generalized values that could have been used.
JavaScript
65
star
25

EdgeWebDriver

Feedback and discussions about WebDriver for Microsoft Edge
57
star
26

enterprise-mode-site-list-portal

C#
52
star
27

Gamepad-Sample

A basic sample on how to use the W3C GamePad API across browsers.
JavaScript
52
star
28

pushnotifications-demo-aspnetcore

Demo for cross-browser push notifications with ASP.NET Core server side code
C#
46
star
29

A11y

Automated testing for HTML5Accessibility.com
C#
39
star
30

hwa-cli

Command-Line Interface for converting Windows Hosted Web Apps locally and remotely
TypeScript
31
star
31

webauthn-polyfill

Polyfill that maps the Web Authentication API on top of Edge preliminary implementation.
JavaScript
30
star
32

WebAppsDocs

Windows 10 web apps and frameworks documentation
HTML
30
star
33

Elevator

Elevator is a utility that allows other programs to collect traces through Windows Performance Recorder.
C#
28
star
34

DevToolsSamples

A collection of samples from Edge Developer Tools
JavaScript
22
star
35

webpayments

Polyfill to map Apple Pay APIs to the latest spec for Web Payments.
22
star
36

APICatalogData

This project contains the data for https://aka.ms/apicatalog, a tool to visualize and analyze the API overlap between standards specifications and support across browsers.
15
star
37

edgevr

Edge
HTML
15
star
38

appx-starter

JavaScript
15
star
39

fps-emitter

Measure the FPS of a page and emit it whenever it updates. Designed for the browser.
JavaScript
15
star
40

videotest

Video streaming battery rundown test methodology
CSS
14
star
41

pan-tool

A tool that injects touch input on the screen. It sends pointerdown, pointerupdate and pointerup to simulate pan, scrolling and fling gestures.
C++
14
star
42

wptest

JavaScript
14
star
43

serviceworker-demo

Service Worker demos
JavaScript
13
star
44

hwa-starter

Everything you need to get started building a Windows Universal Hosted Web App.
HTML
13
star
45

WebOnPi

Home application that comes pre-loaded on the #WebOnPi project
C++
13
star
46

hwa-server

Server for deploying HWAs in conjunction with the HWA-CLI tool.
TypeScript
12
star
47

hwa

PowerShell
12
star
48

edge-launch

Launcher for Microsoft Edge
JavaScript
12
star
49

CloudAppX

Cloudy with a chance of AppX
JavaScript
11
star
50

noin

Takes inline scripts and puts them into separate files
JavaScript
11
star
51

DevToolsDeviceList

Repo that contains the list of devices displayed in the emulation tool of the developer tools in Edge.
10
star
52

MicrosoftWebDriver-chocolatey

Microsoft WebDriver chocolatey package so installation is easier
PowerShell
9
star
53

SurfacePresenter

ISurfacePresenter API with D3D9 and D3D10/11, and contrasts with GDI
C++
8
star
54

css-usage-for-crawlers

This is where we will store our crawler specific code.
JavaScript
8
star
55

Sprache

A NuGet package for managing and using the Accept-Language header in C#
C#
7
star
56

generator-lasagnajs

Generator for the LasagnaJS architecture
JavaScript
6
star
57

A11yDevTool

This repo contains a mapping of UIA properties to ARIA properties that is used by the F12 developer tools in Edge.
6
star
58

CloudAppX-cli

JavaScript
6
star
59

timing-allow-origin-test

Demo of Timing-Allow-Origin with multiple origins
JavaScript
5
star
60

microsoftedge.github.io

4
star
61

edge-devtools-crash-analyzer-support

Enables un-minification of call stacks in the Microsoft Edge DevTools Crash Analyzer tool
TypeScript
4
star
62

.github

Default Community Health Files for the Microsoft Edge organization on GitHub
3
star
63

action-issue-to-workitem

GitHub Action that creates a Azure DevOps work item when an Issue is created
JavaScript
2
star
64

TopDeveloperNeeds

Web platform top developer needs dashboard
JavaScript
1
star