Smooth Streaming Over Silverlight

This article is a walkthrough of enabling smooth streaming of media over IIS and then streaming over a Silverlight client.
 
There is very good documentation available in the official IIS site that provides a better understanding of smooth streaming. So I am not covering the theoretical concepts of smooth streaming in this article. However I have shown step by step how to enable smooth streaming of media over IIS, then to stream over a Silvelight client.

Essentially there are four majors steps you need to do:

1. Enable Smooth Streaming on IIS
2. Encode Media File
3. Publish Encoded file over IIS
4. Streaming over Silverlight

One by one I will walkthrough each step.

Enable Smooth streaming on IIS

You need to download and install IIS Media Services. Go to the following URL to download and install IIS Media Services.

http://www.iis.net/download/SmoothStreaming


After successful installation, you will have a section of Media Services in IIS.

Encode Media File

To encode media for IIS smooth streaming you need Microsoft Expression Encoder 4.0 pro. If you have not installed it then download and install it. It comes as part of Microsoft Expression.

Step 1:

The very first thing to do is to open Microsoft Encoder Pro 4.0. You will be prompted to choose Project type to be loaded. Select Silverlight Project and press Ok.



Step 2:

In this step you need to choose the media file to be encoded and streamed over IIS. Click on the File menu and select Import.


Choose media file to be encoded and streamed.

Step 3:

In the right side tab select Preset option. If you are unable to find Preset tab, select Windows from the menu and check preset.



From the Preset tab, select Encoding for Silverlight and then select IIS Smooth Streaming. After selecting the option of IIS Smooth Streaming, you can choose the VBR rate of your choice.





After setting the IIS Smooth streaming type don't forget to click the Apply button.

Step 4:

There are many options available for you to configure, such as:

1. Thumbnails
2. Security
3. Template options
4. Output path
5. Publish etc

You can set values for the above options as you need to. I am going to set the output path here. Make sure you have created a folder on your local derive to set as the output path for the encoded media for the streaming. On my local D drive, I have created a folder called StreamDemo. So set the output path as below:



Make sure to check Sub-folder by job ID. Leave Media File name as default name.

Step 5:

If you have set the values for everything required then go ahead and click on the Encode button in the bottom.



You should be getting Encoding status message as below.



After successful encoding you will get encoded media playing in the browser from the local derive. Now you have an encoded media file.

Publish Encoded File over IIS

To stream over IIS, you need to publish encoded media over IIS. The process to publish encoded media is the same as publishing any other web site over IIS.

Step 1:

Open IIS as administrator and add a new web site.

Step 2:

In the dialog box you need to provide the following information:

1. Site name: Give any name of your choice
2. Port: Choose any available port above 1024
3. Host Name: Leave it empty
4. Type: Http
5. Check the check box start web site immediately.
6. In the physical path, give the same location as the encoded file was saved to. In the previous step while encoding media for streaming, I saved the file in the location D:\StreamDEmo. So I am going to set the physical path as D:\StreamDEmo.
   
   
   

Click Ok to create the web site in IIS. So we created the site StreamingMediaDemo1. Right-click on that and select Manage Web Site and then Browse.



On browsing most likely you will get the forbidden error message as below:



Append Default.html to the URL to play the media.


Media will be played as below:



Now append wildlife.ism/manifest to the URL. This manifest file would be used in Silverlight and other clients to stream media over IIS.



Note: In a further article; I will discuss more theory of streaming a manifest file.

Streaming over Silverlight

To play media using Silverlight, download the following player from the CodePlex.

http://smf.codeplex.com/releases/view/63434#DownloadId=222617

After downloading, extract the file locally. You will have to add references of these DLLs to a Silverlight project. Since the DLLs were downloaded from the web, they will be locked. To use them in the project right-click and unblock them.

Step 1:

Create a Silverlight project.



Choose the Host application and select the version as Silverlight 4.0:

Step 2:

Right-click and add the reference from the extracted file of the pervious step.



The above are the DLL of the media player you downloaded from Codeplex.

Step 3:
You need to download an IIS smooth client and install from the following URL.

http://www.iis.net/download/smoothclient

Step 4:

Right-click on the Silverlight project and add a reference of Microsoft.web.media.smoothstreaming.dll.

To locate this file on your local drive browse to C:\Program Files (x86)\Microsoft SDKs\IIS Smooth Streaming Client\v1.5\Silverlight on 64 bit machine.

Step 5:

Next we need to design the Silverlight page. Open MainPage.xaml and add the namespace:


Eventually XAML will be as below with a textblock to display the message and the player:

Mainpage.xaml

<UserControl x:Class="SilverlightStreaming.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:strmmedia="http://schemas.microsoft.com/smf/2010/xaml/player"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Streaming Media from IIS on Silverlight" Height="22" Width="266" FontSize="12" Foreground="Blue"/>
            <strmmedia:SMFPlayer Name="strmPlayer" 
                                 HorizontalAlignment="Stretch"
                                 Margin="0"
                                 VerticalAlignment="Stretch" 
                                 Height="261" Width="395"/>
        </StackPanel>
    </Grid>
</UserControl>

Step 6:

We need to write some code on the page load to create a play list of streamed media to be played in the player.

Mainpage.xaml .cs

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

namespace SilverlightStreaming
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            PlaylistItem item = new PlaylistItem();
            item.MediaSource = new Uri("http://dhananjay-pc:7654/wildlife.ism/manifest");            
            item.DeliveryMethod = Microsoft.SilverlightMediaFramework.Plugins.Primitives.DeliveryMethods.AdaptiveStreaming;
            strmPlayer.Playlist.Add(item);
            strmPlayer.Play();
        }
    }
}

Step 7:

Before pressing F5 to run the application, make sure you have put a ClientAccessPolicy.xml file in the D:\StreamdMedia location or the Physical path of IIS website streaming the media to avoid a cross-domain problem.

Press F5 to run the application.



These were what all required to smooth stream media from IIS and play in Silverlight client. I hope this article was useful. I am looking very forward for your comments on the article. Thanks for reading.