Security Camera add-on for Azure storage

Need to get started with the Security Camera base project? Check out the post here!

This project is a continuation of the initial camera setup. Instead of storing and viewing the pictures locally, you may now add an Azure backup feature. The images can be viewed by using an AngularJS web-app that can be run locally or hosted on Azure.

Hardware Setup

• Follow the first three steps in the "Hardware Setup" section of the base project to set up your Raspberry Pi or MinnowBoard Maxi>

Camera Setup

• If you plan to use a USB camera, refer to steps 4 and 5 in the "Hardware Setup" section of the base project.

• If you choose to use an IP camera instead, refer to the "Camera Setup" section of the Security Camera add-on for IP cameras project.i>

Azure Storage Setup

• If you don't already have an Azure account, you can sign up for a free trial here.

• After you sign in to your account, navigate to your Azure portal to create a new storage for you camera pictures.

• Select STORAGE from the left panel and create a new storage account. Make a note of the storage account name. You will need this later for the code.

• Next, click the Manage Access Keys button on the bottom of the page.

• Copy and store the Primary Access Key. You will need this later for the code.

• Click on your storage account then select CONTAINERS from the top panel and create a new container.

• Call the container "securitysystem-cameradrop" and set access to Private. Note: Make sure you use this container name to be in sync with the UWP code.

Software Setup

• Follow the "Software Setup" steps in the base project post to get the code and set up Visual Studio.

• Use your web browser to navigate to http://:8000

• Select Settings from the left panel.

• Set StorageProvider to Azure.

• Enter the storage account name and Primary Access Key (noted in steps 3 and 5 of the "Azure Storage Setup" section) into the AzureAccountName and AzureAccessKey fields respectively.

• Hit save and apply.  i>

Viewing your Images

This project includes a functional AngularJS web-app that can be used to access and view your pictures. The following section outlines how to get the app running locally on your computer. If you'd like to push the site straight to the web without first hosting it locally, proceed to the next section.

• Install Node.js on your computer. We tested this app with version 0.12.0, but the current version should be compatible.

• Once you've installed Node, run npm install in your command line from the root of the SecuritySystemWebApp folder. Then run npm install bower -gto install bower.

• Still in your command line, navigate to the "public" folder, which resides at the root of the SecuritySystemWebApp folder, and run bower install.

• Add your Azure access keys to the .env file in the following format: AZURE_STORAGE_ACCOUNT={YOUR_AZURE_STORAGE_ACCOUNT_NAME}AZURE_STORAGE_ACCESS_KEY={YOUR_AZURE_STORAGE_ACCESS_KEY}

• To start running the server locally, just enter "node server.js" into your command line while inside the SecuritySystemWebApp folder. You can now access the site through your browser at http://localhost:3000.

Running the Web App on Azurewebsites.net

• Navigate to your Azure portal and select WEB APPS from the left panel. 

• Create a new website that will act as the hosted version of the WebApp and give it a url name. The free version will create your site url as such: {yoursite}.azurewebsites.net

• Access the Kudu console for your site by typing {yoursite}.scm.azurewebsites.net in your browser. Click on Debug Console -> CMD from the top panel. (The Kudu Console is a tool that gives you both command line and file browser access to your sites, all from the comfort of a web browser.)

• This will open up both a browser page with both a console window as well as a file explorer.

• Change directories into the wwwroot folder by typing cd site\wwwroot into the command window.

• Zip the contents of the SecuritySystemWebApp folder. If you have a node_modules folder, exclude it from the zip file. Zip from the command line to ensure that even the system files, like ".env" are included.

• Drag and drop the zip file above the console window. [When you start hover the files over the the file explorer it should say "Drag here to upload and unzip"]

• If you haven't already added your keys to the ".env" file, click the pencil-shaped "edit" button next to the ".env" file within the Kudu Console and enter your azure access keys in the following format: AZURE_STORAGE_ACCOUNT={YOUR_AZURE_STORAGE_ACCOUNT_NAME}AZURE_STORAGE_ACCESS_KEY={YOUR_AZURE_STORAGE_ACCESS_KEY}

• Next you will want to run npm install from within the command window.

• Finally, navigate into the "public" folder within the Kudu console and run bower install.i>

Setting Up OAuth Login (optional)

This project comes prepared to use Passport.js-powered OAuth to secure access to your photos. It will required that you register your web app with Facebook, Github or both. It is not necessary for the web app to function, but, without it, anyone with access to the url at which your site is hosted will be able to access your photos. If you are hosting your site locally rather than on Azurewebsites.net, replace all instances of {yoursite}.azurewebsites.net with localhost:3000.

• First, navigate to the "app.js" file in the root of the SecuritySystemWebApp folder and change the value of authenticationOn (line 11) from false totrue.

• For each service you'd like to utilize for OAuth login, you must register a new app.Facebook: https://developers.facebook.com/apps/Once you've registered the app, navigate to the 'settings' tab of the app dashboard. Click the 'add platform' button, and select 'website' In the field labeled 'Site Url', enter: http://{yoursite}.azurewebsites.netGitHub: https://github.com/settings/developersWhen registering your app, in the field labeled 'Homepage Url', enter:http://{yoursite}.azurewebsites.netIn the field labeled 'Authorization callback URL', enter: http://{yoursite}.azurewebsites.net/auth/github/callback

• Once you've registered the app, copy the credentials assigned to you and add them to your .env file as follows:GITHUB_CLIENT_ID={YOUR_GITHUB_CLIENT_ID}GITHUB_CLIENT_SECRET={YOUR_GITHUB_CLIENT_SECRET}FACEBOOK_APP_ID={YOUR_FACEBOOK_APP_ID}FACEBOOK_APP_SECRET={YOUR_FACEBOOK_APP_SECRET}

• Navigate to 'authenticationStrategies.js' in the root of the SecuritySystemWebApp folder, and un-comment the authentication strategy for either or both of the services you chose to utilize (Lines 8-26 for GitHub and/or lines 28-46 for Facebook).

• For whichever strategy you do choose to employ, you will need to replace the{yoursite} in the callbackURL (line 11 for GitHub, line 31 for Facebook) with the name you gave your azure website.

• Users you'd like to be able to access this app must be added manually to 'allowed-users.js' in the following format: "{YOUR_GITHUB_USERNAME}" : "GitHubUsername","{YOUR_FACEBOOK_EMAIL}": "FacebookEmail"Granting access to users is as simple as navigating to the “allowed-users.js” file at the root of the SecuritySystemWebApp and replacing{YOUR_GITHUB_USERNAME} or {YOUR_FACEBOOK_EMAIL} with your GitHub username or Facebook e-mail, respectively (inside the quotes). You do not need to delete the Facebook placeholder if you are only using GitHub, or visa versa.

• To allow additional users to access the web app through their GitHub accounts, just added additional GitHub Usernames to the users object in the following format (separated by commas): {ADDITIONAL_GITHUB_USERNAME}: “GitHub Username”. In order to do the same with Facebook e-mail addresses, you must return to the Facebook Developer page, navigate to the app settings for your Facebook app, and take your app out of development mode, which will require you to provide your e-mail to Facebook.i>

Have an interesting setup of this project? Make any cool modifications when working on it? Let us know in the comments section below!