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.
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.
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.
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.
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.
The next option in the Encode dialog is the Content Name. I left it as suggested
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
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
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.
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.
Step 2: Once the project is initialized, we add reference to the Player Framework to our Application
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
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.
(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…’
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’)
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.
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.
Step 5: Run the app.
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.
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.
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
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce the pre-order of The Absolutely Awesome Book on C# and .NET. This is a concise technical eBook and will be available in PDF, ePub, and mobi.
Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core. Use these concepts in your next .NET Project or to crack your next .NET Interview.
Click here to Pre-Order this eBook at a Discounted Price!