Part 1/5: Push and display images in real-time from your windows phone media library using SignalR to an azure hosted website.

Intro

I recently included Nokia’s photo beamer app like functionality into one of my apps. Photo Beamer enables you to project photos from your phone’s media library onto any screen that supports a modern browser.

The next set of tutorials attempts to illustrate how this can be achieved using the following technologies

  • ASP.Net SignalR, JQuery on the client side.
  • Windows Azure Websites
  • Windows Azure Blob storage
  • Windows Phone 8

What is SignalR?

SignalR started off as a pet project, run by a few of Microsoft’s internal employees. It has since grow and is now an officially supported Microsoft library. SignalR enables developers to add real-time web functionality to an application. Think about use cases such as real time chat rooms, stock prices updates etc. Donkeys years ago, such functionality could only be reliably achieved using a PULL/Polling architecture; the client would typically ping the server at a specified interval, say every 10 seconds to check for new data. Such architecture can be highly inefficient, as the client makes a round trip to the server regardless of whether new data is available for processing on a client.

SignalR solves this problem by tackling the age old saying in computer programming, the Hollywood principle, stated as “don’t call us, we’ll call you.” You simply subscribe to a hub (SignalR endpoints) as a client and the rest is taken care of by SignalR by implicit invocation. It simply informs a subscribed client when new data is available.

What functionality are we trying to achieve in the next set of tutorials?

This tutorial is ideal for an intermediate windows phone developer who is familiar with the basic concepts programming on the WP8 platform.  For the sake of brevity, I will add references to any topics that I deem out of scope. You should be fairly versed in c# and have done some basic windows phone development. The various functionality required, broken down by platform are:

Client (Windows Phone)

  • Ability to read media library photos from a phone
  • Ability to read a QR code with the device camera using a suitable QR reader such as Jeff Wilcox QR Reader.
  • Ability to upload a photo to an Azure blob storage container and retrieve the URI for the photo
  • Ability to send an uploaded photo’s blob storage URI to a hosted Azure website running SignalR

Azure Website

  • Host a SignalR Hub which can receive instructions from clients, process that data and push it to subscribers (web page)
  • Generate a QR code for initialising the photo exchange.

Azure blob storage

  • A public container where the phone is able to dump images to and read images from.

The following diagrams illustrates what we are trying to achieve.

Process Diagram

Process Diagram

Process Diagram

 

Basic Architecture

Basic architecture

Basic architecture

Justifying the above architectural decisions

This is meant to be a simple tutorial that illustrates basic concepts of pushing data to an Azure blob storage and an Azure hosted website. The architecture does not take security implications into great consideration. For instance, our blob storage container is made public for any client to read and write too, you SHOULD never do this in a real world scenario, a shared access signature approach would be more appropriate. It also does not take into consideration any process that cleans up previously uploaded images.

Creating a free Windows Azure trial account

You can sign-up for a free windows Azure account by going to the Azure website and selecting the “Free Trial” option.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>