Git Product home page Git Product logo

magic-mirror-demo's Introduction

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.

magic-mirror-demo's People

Contributors

andypavia avatar cchannon avatar gr8gatsby avatar jarennert avatar jberenhaus avatar jdalton avatar jobeland avatar josephshum-msft avatar marc-schumann avatar melanierichards avatar reevesl avatar seksenov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

magic-mirror-demo's Issues

uk

i got the app up and running but it doesnt take any images or anything. it recognizes a face but sumbit doesnt do anything any help with please guys ?

Unable to capture a picture and initialise inbuilt camera

Hi,

I have managed to get the initial PC application deployed, but I'm stuck at the capturing a picture stage. I'm currently using a Windows 10 laptop with an inbuilt camera, but the camera pane window in the 2nd stage remains black and I can't get it to detect my camera. I have also tried plugging in an old Logitech Webcam C160 to see whether that would work.

Is there something I should change in the coding or could I possibly create the profile on the Pi using the Pi Camera which I've purchased.

Thanks in advanced,
Kevin

Assembly Process

The Assembly Process needs more details.

  • Step 4: Requires an image to know how is the monitor going to rest on those legs.
  • Step 5: Where do I put it? How about the connections?
  • Step 7: How it is supposed to look when finished? An image will help a lot.

NPM update causes problems

Like an idiot i did a simple npm update on my project folder and killed the project...

Everything has been working fine for months without issues..
Now i get the following error on start, seems to be trying to start mongo and fails

D:\mm\node_modules\mongodb-core\lib\topologies\server.js:353
throw MongoError.create(f('server instance in invalid state %s', self.s.state));
^
MongoError: server instance in invalid state undefined
at Function.MongoError.create (D:\mm\node_modules\mongodb-core\lib\error.js:29:11)
at Server.connect (D:\mm\node_modules\mongodb-core\lib\topologies\server.js:353:21)
at Server.connect (D:\mm\node_modules\mongodb\lib\server.js:361:17)
at new MongoStore (D:\mm\node_modules\connect-mongodb\lib\connect-mongodb.js:93:19)
at Object. (D:\mm\server.js:67:12)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3

Readme instructions causes errors

This doesnt' repro on the release branch.

The error I get from running node server.js, after running npm i, and manually installing nconf:

Error: Cannot find module './routes/serverRoutes.js'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:289:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (C:\Users\jshum.REDMOND\documents\projects\magic-mirror-demo\server.js:62:14)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:138:18)
at node.js:974:3

Looks like the routes folder is missing.

Step 2/2 submit issue

After filling out the form and getting a 'success' on the face recognition on step 2/2...the submit button never seems to fully go through. I did notice multiple XHR request to /addFace and did get some 500 responses back.

Error output:

HTTP500: SERVER ERROR - The server encountered an unexpected condition that prevented it from fulfilling the request.
(XHR)POST - http://webreflections.azurewebsites.net/face/addFace

Tried to run the Pi version locally on desktop to check and see if it would the webcam could still identify me but it just gives the "Hello, is that you?" message. I really enjoy the idea of using the web stack for this particular project but a little bummed things seem to be kind of flaky.

US Only - Again?!

Seriously?!

I'm in the UK, we don't have ZIP codes, we have Postcodes.
It really is annoying the way big American developers ignore the rest of the world.
(Anyone tried getting an Echo to work outside of the U.S.?)

Adding transport info to mirror + how to start project (beginner)

Hi all,

I'm a beginner at this project and I'm learning how to do this. But I am not sure where to start. Also I would like to add a bus timetable onto the program so that I can see it before I leave for school. Can anyone please help me as to where to begin.

Thank You.

face_id Null

I have setup my own local server, but it is not working the same as your hosted server. I can get some entries into my mongoDB, but not a face_Id. Also, I do not have the autocomplete on the stocks...any ideas?

  "_id": {
    "$oid": "57596b0c8707b1c81c086069"
},
"name": "Skillful Chinchilla",
"email": "[email protected]",
"zipcode": "98052",
"homeAddress": "800 Occidental Ave S, Seattle, WA",
"workAddress": "1 Microsoft Way Redmond, WA",
"stock": "ert",
"__v": 0,
"face_id": null

Do we need/have a mechanism to reduce a size of an image taken for authentication?

Came across this issue when debugging UAP app. Basically, If I try to authenticate myself on my desktop with built-in camera, the error is thrown. I looked up similar errors and it looks like this is the type of error that is usually thrown when a server can't take a file due to it's size.

It doesn't repro on my laptop though.

Error: request entity too large
at readStream (E:\Projects\Github\Magic-Mirror\node_modules\body-parser\node_modules\raw-body\index.js:196:17)
at getRawBody (E:\Projects\Github\Magic-Mirror\node_modules\body-parser\node_modules\raw-body\index.js:106:12)
at read (E:\Projects\Github\Magic-Mirror\node_modules\body-parser\lib\read.js:76:3)
at rawParser (E:\Projects\Github\Magic-Mirror\node_modules\body-parser\lib\types\raw.js:75:5)
at Layer.handle as handle_request
at trim_prefix (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:312:13)
at E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:280:7
at Function.process_params (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:330:12)
at next (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:271:10)
at expressInit (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\middleware\init.js:33:5)
at Layer.handle as handle_request
at trim_prefix (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:312:13)
at E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:280:7
at Function.process_params (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:330:12)
at next (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\router\index.js:271:10)
at query (E:\Projects\Github\Magic-Mirror\node_modules\express\lib\middleware\query.js:49:5)

Raspberry pi os

When I read the instructions, it wasn't clean in which OS my raspberry pi is supposed to run

Uhhhhhhhh no

Why would i want to send my image over the web to have my mirror turn on? That's just not smart... sorry not happening.

Time does not update

The time is correct once when the page is navigated to. While the page is up the time does not update.

Map weather icons with API

Let's use these icons as SVG: https://thenounproject.com/Yorlmar%20Campos/collection/good-weather/?oq=weather&cidx=44. We can use the weather vane rooster for responses without a matching icon! It's so cute.

I also like this set if you'd rather use it instead: https://thenounproject.com/99avery/collection/weather-forecast/?oq=weather&cidx=47

I have a class .weather-icon that you should place on the SVG. This will position the icon correctly. Please also put another class on the SVG icon identifying which icon it is (.icon-rain or something) so I can do any other positioning or sizing as necessary. If you could comment here with the full list of classes that will be returned, that would be great!

master and release branches are both up to date with the weather icon class.

Image Capture

Can anyone help me with the following error when trying to capture an image so I can get passed step 2 of setting up my mirror...
HTTP500: SERVER ERROR - The server encountered an unexpected condition that prevented it from fulfilling the request.
(XHR)POST - http://webreflections.azurewebsites.net/face/addFace

Any help would greatly be appreciated... I am very new to doing these kinda projects and I would love to see this work for me and my wife..

How to actually 'Install' the Pi application

Hi

Just about have this running now, but I can't find any information on how to actually install the application on the Pi3 so that it'll fire up after a reboot & I don't have to have it running in VS on my PC. It's got to be doable, but how please?

Note: I get the following errors & warnings as it fires up (ignoring the multiple "unexpected head elements outside of " messages) :

JavaScript critical error at line 1, column 7 in http://api.openweathermap.org/data/2.5/weather?zip=98261&cnt=1&appid=6097f99594e4b40d3bbe1be191201d0c&callback=jsonp_callback__6891\n\nSCRIPT1004: Expected ';'
JavaScript critical error at line 1, column 7 in http://api.openweathermap.org/data/2.5/forecast?zip=98261&cnt=1&appid=6097f99594e4b40d3bbe1be191201d0c&callback=jsonp_callback__6226\n\nSCRIPT1004: Expected ';'
SEC7117: Network request to https://cdn.jsdelivr.net/momentjs/2.11.2/moment.min.js did not succeed.
Your application manifest does not declare the following capabilities: internetClient privateNetworkClientServer

SEC7117: Network request to https://cdn.jsdelivr.net/momentjs/2.11.2/moment.min.js did not succeed.
Your application manifest does not declare the following capabilities: internetClient privateNetworkClientServer

Many thanks,

Mirror not recognizing me

As @afreeland mentioned on the other thread, i am wondering if the public 'facelist' still works? I am on the final stage setting up my magic mirror (very fun), but it doesn't seem to be recognizing me? Could it be because of the 1000 entries limitation that he mentioned?

Thanks in advance.

Trying to deploy on a Mac. Any alternative implementation of mediaCapture to guarantee Cross Device capability?

See the headline,
as you can see i´m trying to run this Project on a Macbook Pro with newest node & npm version.
As mediaCapture is a WinApi other Devices aren't capable of using this Project even though it is said that Mac OSX deployment support is coming soon.
So, i´m thinking about opencv and sockets but this would only add more boilerplate code to this project and makes the use of microsofts face recognition api useless.
I appreciate any help, ty.

Frustrated

I've tried everything I know to get this to work. I cannot get past the CREATE phase. I hangs there with a big X BOX on the screen. I would appreciate any help I could get. Thanks!

LifeCam vs. Raspberry Pi Camera v2

Since we're using the Cognitive Services Face API to recognize the face and not Hello (don't even know if the life cam supports hello), anyone think the RP camera might be usable through the mirror so as to avoid the kibble sticking out visibly?

App sometimes hang?

I checked this out and it is currently running well on my raspberry 3. Problem is sometimes it just hangs. I cannot use the mouse or press the num lock or caps lock (indicating that it does not listen to the keyboard either). Nothing works. I have then to restart the device. This can happen at any time, either if I am recognizing a lot or just letting it run idle.

Is this known?

running locally

Hello,

could you provide us the version of nodejs and mongodb you are using.
I download the latest nodejs (6.9.2) and mondodb (3.4), i run the server.js, but i have some error when i trying to reach the localhost:3000/create
when I compiled, I should chenge some folder due to the version

hereby the log
nodejs
E:\Projets\magic-mirror-demo-master>node server.js
Express server listening on port 3000
we're connected!

//when I reached the page http://localhost:3000/create
E:\Projets\magic-mirror-demo-master\node_modules\connect-mongodb\lib\connect-mongodb.js:146
_collection.update({_id: sid}, update, {upsert: true}, function (err, data) {
^

TypeError: Cannot read property 'update' of null
at MongoStore.MONGOSTORE.set (E:\Projets\magic-mirror-demo-master\node_modules\connect-mongodb\lib\connect-mongodb.js:146:14)
at Session.save (E:\Projets\magic-mirror-demo-master\node_modules\express-session\session\session.js:72:25)
at Session.save (E:\Projets\magic-mirror-demo-master\node_modules\express-session\index.js:372:15)
at ServerResponse.end (E:\Projets\magic-mirror-demo-master\node_modules\express-session\index.js:330:21)
at ServerResponse.send (E:\Projets\magic-mirror-demo-master\node_modules\express\lib\response.js:205:10)
at done (E:\Projets\magic-mirror-demo-master\node_modules\express\lib\response.js:956:10)
at Immediate. (E:\Projets\magic-mirror-demo-master\node_modules\express-handlebars\lib\utils.js:26:13)
at runCallback (timers.js:637:20)
at tryOnImmediate (timers.js:610:5)
at processImmediate [as _immediateCallback] (timers.js:582:5)

mongodb
2016-12-14T19:00:04.429+0100 I CONTROL [initandlisten] MongoDB starting : pid=6964 port=27017 dbpath=E:\data\db\ 64-bit host=PCC�dric
2016-12-14T19:00:04.429+0100 I CONTROL [initandlisten] targetMinOS: Windows 7/Windows Server 2008 R2
2016-12-14T19:00:04.430+0100 I CONTROL [initandlisten] db version v3.4.0
2016-12-14T19:00:04.431+0100 I CONTROL [initandlisten] git version: f4240c60f005be757399042dc12f6addbc3170c1
2016-12-14T19:00:04.432+0100 I CONTROL [initandlisten] OpenSSL version: OpenSSL 1.0.1t-fips 3 May 2016
2016-12-14T19:00:04.432+0100 I CONTROL [initandlisten] allocator: tcmalloc
2016-12-14T19:00:04.433+0100 I CONTROL [initandlisten] modules: none
2016-12-14T19:00:04.433+0100 I CONTROL [initandlisten] build environment:
2016-12-14T19:00:04.434+0100 I CONTROL [initandlisten] distmod: 2008plus-ssl
2016-12-14T19:00:04.434+0100 I CONTROL [initandlisten] distarch: x86_64
2016-12-14T19:00:04.435+0100 I CONTROL [initandlisten] target_arch: x86_64
2016-12-14T19:00:04.435+0100 I CONTROL [initandlisten] options: {}
2016-12-14T19:00:04.437+0100 I - [initandlisten] Detected data files in E:\data\db\ created by the 'wiredTiger' storage engine, so setting the active storage engine to 'wiredTiger'.
2016-12-14T19:00:04.437+0100 I STORAGE [initandlisten] wiredtiger_open config: create,cache_size=1478M,session_max=20000,eviction=(threads_max=4),config_base=false,statistics=(fast),log=(enabled=true,archive=true,path=journal,compressor=snappy),file_manager=(close_idle_time=100000),checkpoint=(wait=60,log_size=2GB),statistics_log=(wait=0),
2016-12-14T19:00:05.207+0100 I CONTROL [initandlisten]
2016-12-14T19:00:05.207+0100 I CONTROL [initandlisten] ** WARNING: Access control is not enabled for the database.
2016-12-14T19:00:05.208+0100 I CONTROL [initandlisten] ** Read and write access to data and configuration is unrestricted.
2016-12-14T19:00:05.209+0100 I CONTROL [initandlisten]
2016-12-14T19:00:05.666+0100 W FTDC [initandlisten] Failed to initialize Performance Counters for FTDC: WindowsPdhError: PdhExpandCounterPathW failed with 'L’objet spécifié n’a pas été trouvé sur l’ordinateur.' for counter '\Memory\Available Bytes'
2016-12-14T19:00:05.666+0100 I FTDC [initandlisten] Initializing full-time diagnostic data capture with directory 'E:/data/db/diagnostic.data'
2016-12-14T19:00:05.682+0100 I NETWORK [thread1] waiting for connections on port 27017
///// when I run node server.js

2016-12-14T19:00:48.561+0100 I NETWORK [thread1] connection accepted from 127.0.0.1:51754 #1 (1 connection now open)
2016-12-14T19:00:48.574+0100 I NETWORK [conn1] received client metadata from 127.0.0.1:51754 conn1: { driver: { name: "nodejs", version: "2.2.11" }, os: { type: "Windows_NT", name: "win32", architecture: "x64", version: "10.0.14393" }, platform: "Node.js v6.9.2, LE, mongodb-core: 2.0.13" }
2016-12-14T19:01:03.052+0100 I - [conn1] end connection 127.0.0.1:51754 (1 connection now open)

if someone can help me
Thx
Cedric

Different web cam? Logitech c270

Hello,

I have gone through your project and looks great. I wish to replicate the same. I am facing basic trouble with the webcam. Does it have to be a Microsoft Web cam, can the setup work with a logitech C270?

Yash

Add traffic to work on the page

Setting up this issue to develop the feature.

Currently the idea is that I'll have an area in set-up to add a home and work address.

From there, I'll use the Bing Map API and show estimated time and if there are any accidents somewhere on the pane.

Are there additional parts to this feature request?

Configuration

I had the app up and running rather quickly but the installation instructions stop at the configuration process. How do you configure the app with your own settings? I can browse to "http://webreflections.azurewebsites.net/create" on the Pi but the configuration is incredibly slow and unusable with the animations enabled.

Maybe I am misunderstanding how this works, are these instructions just to get a demo of your app with your configuration settings running on my pi? Do I have to sign up for azure and configure my own instance? I noticed in your youtube video you do the "setup" process on your laptop, I tried running same setup process on my laptop and the snapshot doesnt work on any of my 4 computers. Am I missing something?

Your Azure-website is down.

It has came to my notice that webreflections.azurewebsites.net is not working. So none of the stuff really works.

Screen Orientation on PI

What do I need todo to get the correct screen orientation when I deploy to the PI. The orientation is landscape instead of portrait..

Observations

Quite keen to get this going but some feedback from myself:

Creating profile
http://webreflections.azurewebsites.net/create
Limited to US ZIP codes
Selfie does not detect webcam (stays black)

Setup instructions
Simplify, so that people who want to get into deploying apps to IoT without prior experience of Visual Studio
(perhaps...) update to Visual Studio 2015 as it seems the layout is different now or sounds different to those in the instructions

So I'm unable to deploy this at the moment because I can't take a selfie. Perhaps an option to upload a picture instead if camera doesn't detect? I tried via Edge and IE11. Camera (Logitech Sphere AF) works on Skype etc fine.

Thanks.

Can't take selfie when creating a profile

WinRT error is thrown and the camera is not accessed.

We should flip this to using getUserMedia rather than a WinRT API in order for it to work in the browser as well.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.