DotNetCurry Logo

Using Azure Media Services Backend to Build a Windows 8.1 Media Player App

Posted by: Sumit Maitra , on 4/10/2014, in Category Microsoft Azure
Views: 20012
Abstract: Windows Azure Media Services provides a solid abstraction on top of which we can build our custom Media based solutions. This article demonstrates how to use it to setup Adaptive Smooth Streaming video and a Windows 8.1 Store app to play the video

Traditionally setting up a Media Streaming Service has multiple moving parts including taking care of Stream type, Media Encoding, High Performance Hosting and Clients to showcase the service. Each of these steps is non-trivial to setup.

However, Windows Azure Media Services provides a solid abstraction that takes care of Storage, Encoding as well as streaming of Media and exposes easy to use APIs for multiple clients to help us quickly ramp up with a capable Media Service.

Let’s see how we can go about leveraging the Windows Azure Media Services as we try to setup our own Media Streaming Application. To start off with, lets quickly recap types of Media Streaming.

This article is published from the DotNetCurry .NET Magazine – A Free High Quality Digital Magazine for .NET professionals published once every two months. Subscribe to this eMagazine for Free and get access to hundreds of free tutorials from experts

 

State of Media Streaming over the Interwebs

Media Delivery methods over the HTTP implies one of the following three streaming methods:

1. Progressive Downloads: Here a media file is progressively downloaded to the client and then played. However media quality/bitrate is constant irrespective of bandwidth.

2. Traditional Streaming: Here media is chunked in packets and sent over HTTP to client. Client can interrupt and send Play/Seek/Pause etc. commands and the server responds appropriately. Again media quality/bitrate is constant irrespective of bandwidth.

3. Adaptive Streaming: In Adaptive Streaming media is present as a manifest of available streams of data. There are multiple streams of data available corresponding to a fixed set of bitrate values. When a client begins streaming an Adaptive Streaming media over HTTP, it exchanges bandwidth and rendering capabilities with the server periodically. This enables servers to adjust the streaming rate if bandwidth drops below required thresholds. This dynamic switching of bitrate keeps media flowing smoothly with dynamic upgrade or downgrade of media quality. Microsoft’s implementation of Adaptive Streaming is called SmoothStreaming.

Windows Azure Media Services – The PAAS for Media

Clients for Adaptive Streaming

As we saw above, Adaptive Streaming requires client side interaction with the server and this necessitates that there are Adaptive Streaming media clients on every conceivable platform. Apparently Windows Azure Media services team has most of this covered for you.

On the Web: You have Flash and Silverlight clients. HTML5 has a draft MSE/EME (W3C Extensions) proposal in the works for supporting Adaptive Streaming. IE11 is already working on support for this.

Native App Support: There is a Smooth Streaming Player Framework for Windows and Xbox. Microsoft also has a Smooth Streaming Porting kit to enable set-top boxes etc. implement their respective clients

Mobile: On Windows Phone and iOS, we have Player Framework that has Smooth Streaming support available. Android support is enabled by Partner SDKs and also through the Open Source Media Framework (OSMF) plugin.

With wide ranging clients supported, the reach story of Azure Media services is nearly complete, so now let’s get hands on and see what it takes to get started with Azure Media Service that is supposed to take care of the ‘backend’.

Then we’ll get hands on with Code and build a Windows Store App.

Windows Azure Media Services – The Platform

Windows Azure Media Services provides us with the Storage, Compute, Fabric and Database from Windows Azure. It builds on top of these by enabling Encoding, Secure Uploading, Publishing and On Demand Origin (basically ability to view media on demand over http). It provides REST APIs as well as Client SDK to do all of this programmatically and has a well fleshed out Web Portal to do these via an admin interface as well.

Today we will use the Web Portal for the Administrative functions and the Windows 8 client SDK for building a client.

Setting up your Azure Media Service via Windows Azure Portal

Step 1: Login to your Windows Azure portal at http://manage.windowsazure.com/

Step 2: Select New from the bottom toolbar and select App Services >Media Service > Quick Create:

As seen here, we have to provide a Name for the Media Service, pick a Data Center Region, and select a Storage Account. I did not have a Storage Account so it offered to create a new one for me.

create-new-media-service

Once done, click on ‘Create Media Service’ button to initiate the Service. It takes a few minutes to provision the Service, especially if you do not have a Storage Account setup. It will indicate with a banner once the Service has been provisioned successfully, and the service will come up in the dashboard.

create-new-media-complete

Step 3: Once the service has been setup, we can navigate to the Content Tab and upload a single format Media file. In our case, we’ll upload an MP4 file from our local machine.

upload-media

Note that you can pull in a file already stored in Azure Storage too.

Click the ‘Check’ button to begin upload. Once it completes, you will see a Success banner at the bottom.

encode-menu

Step 4: Once the upload completes, select the file in the list and you will see the Encode button enabled for it. Click on Encode to select Encoding options.

The first option is the Encoding type and we a see a boatload of presets optimized for the types of client you are targeting. I’ve selected 1080p as seen below.

choose-smoot-streaming-preset

The next option in the Encode dialog is the Content Name. I left it as suggested

begin-encoding

Click on the ‘Check Mark’ button to initiate the Job. Remember, encoding is a long running job and it takes some time to complete. Fact is it takes some time to even appear on the Jobs tab.

You can expand Job in the Jobs tab to see the Progress % of the encoding task

encode-job-in-progress

Note: I was initially confused as to whether the Job was initiated or not, so I initiated a second job, which you can see I cancelled later. So if you don’t see the job immediately, give it about a couple of minutes before refreshing.

Once the encoding completes, you can see both the Single Bitrate and Multi Bitrate assets in the Dashboard

encoded-media

With this, we are nearly set. As you can see, both the videos are not published so they are not available to the outside world. Select each and from the bottom tool bar, click Publish to get the publish URLs for each.

Building a Windows 8.1 Client

To build a Windows 8 app, we need the Smooth Streaming Extension SDK and a Player Framework. These are present as VSIX extensions and can be installed from the Visual Studio extensions gallery also.

player-and-media-sdk

Building a Progressive Download Player

Step 1: Once the dependencies are set, we start off with a new Windows 8 Store app using C# and XAML.

azure-media-player

Step 2: Once the project is initialized, we add reference to the Player Framework to our Application

player-framework

Note: We have not selected the Adaptive Streaming component yet.

Click OK to continue.

Step 3: In the MainPage.xaml, add the following namespace reference to the Page

xmlns:mmppf="using:Microsoft.PlayerFramework"

Step 4: Next we add the Player using the following markup


       

This adds the player framework. The Source value is the URL for the direct MP4 file asset that we had uploaded (not the smooth streaming source we encoded).

Note: Paste the Source Url in the Property Window and not the XAML markup. If you don’t copy it into the Property Window, the ampersands won’t be escaped and you will end up with ‘Invalid Markup’ error.

If we run the application now, we’ll see the Player play our video in the App.

progressive-download-screenshot

(Frame from the movie Pacific Rim, taken from its trailer)

However if you observe closely, you’ll note the Progressive download bar is slightly ahead of the current position.

That covered the Progressive Download player using PlayerFramework and Windows Azure media service backend. Player Framework’s player control makes it trivial to show the video. Now let’s see how smooth streaming works.

Adding Smooth Streaming Player

Step 1: Select ‘Add Reference’ to the previous application and select ‘Microsoft Player Framework Adaptive Streaming’, ‘Microsoft Smooth Streaming Client SDK for Windows 8”, ‘Microsoft Visual C++ 2013 Runtime Package…’

smooth-streaming

Step 2: Change build mode from any to x64 because VC++ libraries need to be targeted to a specific architecture. (Select the Dropdown that shows Debug and choose the option ‘Change Framework’)

change-configuration-to-x64

Step 3: Now let’s add the reference to the MainPage.xaml’s namespaces to add reference to the Adaptive Rendering Plugin to the Player.

xmlns:adaptive="using:Microsoft.PlayerFramework.Adaptive"

Step 4: Update the Player Settings. As we can see here, the SmoothStreaming player adds a few additional features like Signal Strength etc.

We replace the src property with the URL to our encoded asset. As you can see, the URL doesn’t end in MP4 but instead ends in /manifest which describes all the available bitrates etc.

AutoPlay="True" IsFullScreenVisible="True"
IsSignalStrengthVisible="True" IsResolutionIndicatorVisible="True"
Source="
http://mediaservicedemo.origin.mediaservices.windows.net/b16fb973-8c2b-49d6-a27f-646058194dbe/pacific_rim_60_seconds.ism/Manifest">

 


Step 5: Run the app.

variable-bit-rate

Woah!!! Smooth Streaming up and running in practically zero code (all markup).

Keeping an eye on the Cost

Not often do you find realistic costs displayed in service promotions. Well we are not promoting anything so let’s see what it costed us to write the above application

We did the following:

1. Uploaded data IN-to Azure, one time 6MB

2. Ran encoding thrice, two completed one cancelled. I ran the second time because I kept getting Unable to Play Video for the Streaming Player. I initially imagined the encoding to have gone wrong, but that wasn’t the case. It was more to do with Internet quality at my end.

3. Viewed the 60 second clip about five or six times.

I have a Pay-as-you-go plan and the total cost incurred was $0.63 or 63 cents. If we look at the chart below closely, you’ll see the entire cost is for encoding. Data in and Data out remained in my monthly allowance limits.

I’ll have to run a video in loop to see how quickly I run out of my monthly allowances, but up-front, whatever plan you are on, you have a buffer at hand and the only cost you will incur is cost of encoding, which I believe is pretty fair given the minimal effort we had to expend.

Editorial Note: This article was written a couple of months ago. The prices may have changed since then (reduced by the way). Make sure you check the latest pricing info.

cost-to-write-article

Making Money for your Video publications

By now you would have realized that Azure Media Services is for building services like YouTube/Vimeo or even the Twitter’s Vine. So if you are building a media based service, one likely source of income is revenue from Advertisement.

The PlayerFramework has extensive support for inserting Advertisement in between the main video. It supports VMAP, MAST, FreeWheel SmartXML, AdSchedulerPlugin as well as custom Scheduling schemes via plugins. You can read more about how to place Advertisements in a Player Framework media control here.

Wrap Up

With that, we’ll wrap up this introduction to Windows Azure Mobile Services. We also got a nice look at the excellent Open Source Player Framework from Microsoft. We were able to build a basic Windows 8.1 Store app capable of playing Videos from Azure Mobile Services practically without writing any C# code. We also got a glimpse of the ‘initial investment’ involved in our exercise.

Download the entire source code of this article from our GitHub Repository at bit.ly/dncm8-win8mp

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Sumit is a .NET consultant and has been working on Microsoft Technologies since his college days. He edits, he codes and he manages content when at work. C# is his first love, but he is often seen flirting with Java and Objective C. You can follow him on twitter at @sumitkm or email him at sumitkm [at] gmail


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Anurag on Thursday, April 10, 2014 9:28 AM
Suproteem sir & Sumit sir plz do beginner series on Azure.

~Request from me and my friends from Chandigarh
Comment posted by Suprotim Agarwal on Saturday, April 12, 2014 6:32 AM
I am not sure if Sumit or I have the time, but we will give it a thought. Meanwhile check out some Azure articles at http://www.dotnetcurry.com/BrowseArticles.aspx?CatID=73