Windows Phone 7 Video Smooth Streaming Client

Article
02/03/2012

I will show a demo on Nokia Lumia Developer event tomorrow. If you missed that great event, you can follow this guidance for your self exploration on Windows Phone Smooth Streaming Client. Note that you will need the following tools to follow this walkthrough. You can use Microsoft Web Platform Installer 3.0, to make your installation process easier than manually download one-by-one through different websites. In WPI 3.0, you have to install the following tools and server:

Tools
1. Windows Phone SDK 7.1
2. Expression Encoder 4 SP2

Server
1. IIS Web Server. Install using Windows Control Panel – Windows Features.
2. IIS 7 Recommended Configuration
3. IIS Media Service 4.1
4. IIS Smooth Streaming Client 1.5 (Update 2)

To enable smooth streaming service in your IIS Web Server, you have to make sure that you have Media Service is installed.

Once you installed both Server and Tools, you are ready to go with this walkthrough. There are 3 major steps you need to follow:
1. Prepare encoded video using Expression Encoder
2. Publish encoded video to IIS for HTTP access
3. Create Windows Phone client video player

Lets start with the step 1 to prepare the video using Expression Encoder.

Prepare Encoded Video using Expression Encoder

Smooth Streaming, an IIS Media Services extension, enables adaptive streaming of media to Silverlight and other clients over HTTP. Smooth Streaming uses simple concept of delivering small content fragments (typically 2 seconds worth of video) and verifying that each has arrived within the appropriate time and played back at the expected quality level. If one fragment doesn't meet these requirements, the next fragment delivered will be at a somewhat lower quality level. Conversely, when conditions allow it, the quality of subsequent fragments will be at a higher level. To create Smooth Streaming presentations, the source content (video or audio) is encoded using Expression Encoder then content is delivered using a Smooth Streaming-enabled IIS web server. First, open you Expression encoder – choose Silverlight Project - then import your source video to Expression Encoder (in my case, wpVideo01.wmv). For Windows Phone client, you have to apply VC-1 IIS Smooth Streaming – SD 480p VBR - No bit rate encoding support for Windows Phone so far, but it may appear in future. After you apply, you can choose Thumbnail and your encoded job output location.

If all is ready, then you can start encoding using Encode button. It will take some time to finish, depend to the size of encoded source and the capacity of your computer. After encoding process finished, Expression encoder will prompt you a landing page where you can test your video browser. It means, the presentation files of smooth streaming are ready at job output location.

Here is the files generated by Expression Encoder. Default.html is the landing page for test, *.xap is Silverlight player template, IIS Smooth Streaming encoded files (fragmented videos with different bit rate), ISM and its configuration XML files. ISM is a XML file that contain stream index of video fragments. The manifest can be accessed through web browser https://localhost/[]/wpVideo01.ism/manifest.

Now lets move to step #2 to publish the presentation files to IIS Web server.

Publish Encoded Video to IIS for HTTP Access

We have to create Website or Web Application in IIS to host the presentation files. Go to IIS manager, right click on Default Website and add Application. Specify the Alias of your web application (NokiaDemo) and location of presentation files (Expression encoder job output location where video fragments and ISM file located). Test the manifest by access following URL: https://localhost/NokiaDemo/wpVideo01.ism/manifest until you can read the manifest. You can also test the video in browser using the Default.html file given by Expression Encoder : https://localhost/NokiaDemo/Default.html.

If everything went well, you are ready to go with step #3, to create a video player. It will require your coding skill, little bit!.

Create Windows Phone Client Video Player

The good news is, Microsoft already prepare framework and reusable components for you to utilize. Not build from zero. There are two options, using the IIS Smooth Streaming Client 1.5 APIs (available on WPI 3.0 or download here) or using the Microsoft Media Platform: Player Framework (MMPPF) – an open source version. IIS Smooth Streaming Client 1.5 API is a core component of MMPPF. Both provide an easy-to-use interface for developers and designers to create rich Smooth Streaming experiences using the Microsoft Silverlight platform on Windows Phone device. If you prefer to use Smooth Streaming Client 1.5 APIs, you can download simple demo player here that utilized the DLLs. What I will show you in this post is using MMPPF, that you can download the source code version at SMF Codeplex site. While writing this post, I am using microsoft-smf-src-2.2011.1101.0. To compile from source codes, you can open SilverlightMediaFramework.Phone.sln file in Visual Studio then Rebuild the solution. You have a very nice sample application inside the solution, Microsoft.SilverlightMediaFramework.TestPhone, that accesses to 2 Channel9 video manifests:

https://ecn.channel9.msdn.com/o9/content/smf/smoothcontent/bbbwp7/big buck bunny.ism/manifest
https://ecn.channel9.msdn.com/o9/content/smf/smoothcontent/edwp7/Elephants_Dream_1024-h264-st-aac.ism/manifest

If you have internet connection, you can debug and test it in your Windows Phone emulator. Big Buck Bunny and Elephants Dream are Smooth Streaming while the Wildlife is a simple progressive download. You can experience the different between Smooth Streaming and Progressive download model from this sample application.

I’m going to show you how to create simple player using MMPPF for wpVideo01 file that we already encoded and published in step #1-2. The result of your SMF compilation for Windows Phone will be located at wpbin directory. Create a Phone Silverlight Application in Visual Studio add reference to the following DLL:

- Microsoft.Web.Media.SmoothStreaming.dll
- Microsoft.SilverlightMediaFramework.Core.Phone.dll
- Microsoft.SilverlightMediaFramework.Plugins.Phone.dll
- Microsoft.SilverlightMediaFramework.Utilities.Phone.dll
- Microsoft.SilverlightMediaFramework.Compatibility.Phone.dll
- Microsoft.SilverlightMediaFramework.Plugins.SmoothStreaming.Phone.dll

Choose your Windows Phone OS version, in my case I’m using WP OS 7.1 (Mango). After project created, add reference to the DLLs.

Add the following namespace into your MainPage.xaml file:

xmlns:Core="clr-namespace:Microsoft.SilverlightMediaFramework.Core;assembly=Microsoft.SilverlightMediaFramework.Core.Phone"
xmlns:Media="clr-namespace:Microsoft.SilverlightMediaFramework.Core.Media;assembly=Microsoft.SilverlightMediaFramework.Core.Phone"
xmlns:ssme="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"

Then add a player on the page to play stream media by the following codes on content Grid.

Last, you need to write some C# code on the MainPage.xaml.cs, to create a play list of streamed media and play in the player.

using System;
using Microsoft.Phone.Controls;
using Microsoft.SilverlightMediaFramework.Core.Media;

namespace Streaming
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
PlaylistItem item = new PlaylistItem();
item.MediaSource = new Uri("https://localhost/NokiaDemo/wpVideo01.ism/manifest");
item.DeliveryMethod = Microsoft.SilverlightMediaFramework.Plugins.Primitives.DeliveryMethods.AdaptiveStreaming;
strmPlayer.Playlist.Add(item);
strmPlayer.Play();
}

}
}

Make sure that you put the right MediaSource URI then you are done!.

I hope this walkthrough demo is useful for you. You can try many more features in the MMPPF by looking into the sample application.

Cheers – Risman Adnan

Windows Phone 7 Video Smooth Streaming Client

Additional resources