Smooth Streaming on Windows Phone 7

Read Smooth Streaming in Silverlight here

This post is walkthrough on enabling smooth streaming of media over IIS and then stream over Windows Phone 7 client. There are very good documentation available on IIS official site to have a better understanding of smooth streaming. So I am not touching theoretical concept behind smooth streaming in this post. However I have shown steps by steps to enable smooth streaming of media over IIS then to stream over Windows Phone 7 client.

imageimage

Essentially there are four majors steps you need to do

  1. Enable Smooth Streaming on IIS
  2. Encode Media File .There is a point to be noted here that Windows Phone 7 [at time of writing this post] does not support variable bit rate of streaming. It does support only VC-IIS Smooth Streaming -480 VPR Smile]
  3. Publish Encoded file over IIS
  4. Play the streamed media on Windows Phone 7 using smfPlayer.

Enable Smooth streaming on IIS

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

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

image

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

image

 

Encode Media File

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

Step 1

Very first open Microsoft Encoder Pro 4.0. You will get prompted to choose Project type to be loaded. Select Transcoding Project and press Ok.

image

Step 2

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

clip_image001

Choose media file to be encoded and streamed.

clip_image003

 

Step 3

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

clip_image004

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

clip_image005

After IIS Smooth streaming type doesn’t forget to click Apply button.

Step 4

There are many options available for you to configure like,

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

You can set values for above options as per your requirement. I am going to set output path here. Make sure you have created a folder on your local derive to set as 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

clip_image001[5]

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.

clip_image002

You should be getting Encoding status message as below.

clip_image003

 

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

 

Publish Encoded File over IIS

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

Step 1

Open IIS as administrator and add a new web site

clip_image004[5]

Step 2

In dialog box you need to provide below 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 Physical path, give the same location Encoded file is saved. In previous step while encoding media for streaming, I save file in location D:\StreamDEmo. So I am going to set Physical Path as D:\StreamDEmo.

 

image

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

image

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

image

Append Default.html in URL to play the media.

clip_image001[7]

Media will be played as below,

image

 

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

image

Playing in Windows Phone 7

To Play media on Windows Phone 7 download below player from the CodePlex.

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

After download extract the file on locally. You will have to add references of these dll in Windows Phone project. Since dll got downloaded from the web, so they would be locked. To use them in the project right click and unblock them.

Note : I would recommend to download msi file and install that to get all the required files.

Step 1

Create a Windows Phone Application

clip_image002

Choose target Windows Phone version 7.0

clip_image003[5]

Step 2

Right click and add the references. If you have run msi then you will get below references at the location,

C:\Program Files (x86)\Microsoft SDKs\Microsoft Silverlight Media Framework\v2.4\Silverlight For Phone\Bin

clip_image005

Step 3

You need to download IIS smooth client and install from below URL.

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

Step 4

Right click on Windows Phone 7 project and add 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\Windows Phone on 64 bit machine.

clip_image007

 

Step 5

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

image

 

And add a player on the page downloaded to play stream media as below,

clip_image001[9]

Eventually xaml will be as below with a textblock to display message and player

Mainpage.xaml

 

<phone:PhoneApplicationPage
    x:Class="Streaming.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:ssme="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape"  Orientation="Landscape"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="Streaming Media from IIS on Silverlight" Height="22" Width="266" FontSize="12" Foreground="Blue"/>
                <Core:SMFPlayer Name="strmPlayer"
                    HorizontalAlignment="Stretch"
                                 Margin="0"
                                 VerticalAlignment="Stretch"/>

            </StackPanel>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

Step 6

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

Mainpage.xaml .cs


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("http://localhost:9173/wildlife.ism/manifest");
            item.DeliveryMethod = Microsoft.SilverlightMediaFramework.Plugins.Primitives.DeliveryMethods.AdaptiveStreaming;
            strmPlayer.Playlist.Add(item);
            strmPlayer.Play();

        }


    }
}

Step 7

Press F5 to run the application.

imageimage

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

 

XmlDictionary and XmlDictionaryString classes to create WCF Message

It is common when you will create Message, you may use below classes

Class Namespace
XmlDictionary System.Xml
XmlDictionaryString System.Xml

Let us investigate purpose of each class one by one.

XmlDictionary class allows us to create a private pair of Key and Value. This key-value pair can be used to represent

  1. Element name
  2. Attribute name
  3. XML namespace declaration.

XmlDictionary class uses XmlDictionaryString class object to create key value pair. If you see below code, we are creating a XmlDictionary object and List of XmlDictionaryString.

 

image

dct is object of XmlDictionary and while adding string value in this it returns XmlDictionaryString object.

 


XmlDictionary dct = new XmlDictionary();
            List<XmlDictionaryString> lstData = new List<XmlDictionaryString>();
            lstData.Add(dct.Add("Bat"));
            lstData.Add(dct.Add("Ball"));
            lstData.Add(dct.Add("Wicket"));
            foreach (var r in lstData)
            {
                Console.WriteLine("Key  = {0}  and Value = {1}", r.Key, r.Value);
            }
            Console.ReadKey(true);


 

If you run above code you will get output as below,

image

We are simply adding returned XmlDictionaryString object to list of XmlDictionaryString.

I hope this post was useful. Thanks for reading Smile

 

SQL Server tip : Query a range of characters ?

If you need to query all People from Person table with FirstName start with A, you can easily query like below,

clip_image002

What if you want to list all the people from person table with first name start with A and B? You can combined Like operator with OR and query like below,

clip_image003

But imagine scenario where you need to query all the People with FirstName start with A to M. How will you do that?

Solution is you need to put like operator in the square bracket as below,

clip_image005

If you modify one little thing in above query and replace like operator with equal operator , you will get no error message however you will get no rows returned as well.

SQL Server Tip : . Where to use SQURE Bracket around table name?

Have you ever thought, what if your table name

1. Is exactly as of SQL Server keyword

2. Is having space in between like Student Fav Actor

If you go ahead and query against table Student Fav Actor like below, most likely you will get error message as below,

clip_image001

There may me one more scenario where table name is something like FROM. If you query in usual way, obviously you will be getting expected error message.

clip_image002

So how to query table named [However this is wrong practice to put spaces and use SQL Server keyword as table name] like above?

Very simple is the solution, put table name in square brackets.

clip_image004

You might encounter columns name of table are having spaces or named as keywords. In that case also you need to apply square bracket with that particular column name to work with.

Working with JavaScript in Silverlight 4.0

In this post I will show you calling of Javascript function from Silverlight. It is very simple and straight forward.

Assume you have a JavaScript function on aspx page as below,

SilverlightTestPage.aspx


<script type="text/javascript" language="javascript" >
         function callmeonPageLoad() {
             alert("Hello Javascript from Silvertlight");
         }
    </script>


You want to call this Javascript function on page load of the Silverlight page then you will have to add namespace

clip_image001

And in the constructor of the page call it as below,

MainPage.xaml.cs


using System.Windows.Controls;
using System.Windows.Browser;

namespace SilverlightApplication7
{
   [ScriptableType]
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            HtmlPage.RegisterScriptableObject("MainPage", this);
            HtmlPage.Window.Invoke("callmeonPageLoad");

        }
    }
}


If you notice above code you would find that MainPage is attributed with ScriptableType.

clip_image002

On running Silverlight application you will be getting output as below,

clip_image004

On your XAML if you have textbox like below,

clip_image005

You want to access and change value of textbox txtName in Javascript then it too is very simple. Create a function Javascript as below,

SilverlightTestPage.aspx


 <script type="text/javascript">
        function UpdatingTextBoxValue(sender)
        {

            var txtBlockFromSL = sender.FindName("txtName");
            alert(txtBlockFromSL.text);
            txtBlockFromSL.Text = "Salsa ";
            alert(txtBlockFromSL.Text);


        }
</script>



txtName is name of the Silverlight text box.

And on the page load on aspx page add a param

clip_image001[5]

If you have a function in managed code and you want to access that from javacript .Assume you have function as below,

MainPage.xaml.cs



  [ScriptableMember]
       public void SilverLightFunction(string txtToUPdate)
        {
            txtName.Text = txtToUPdate;
        }





You can call this function from JavaScript as below,


 <script type="text/javascript">
        function UpdatingTextBoxValue(sender)
        {


            var host = sender.GetHost();
            host.content.MainPage.SilverLightFunction("Dhananjay");


        }
</script>



This was all about various ways to work with Silverlight and JavaScript. I hope this post was useful. Thanks for reading.

Changing Application Tile in Windows Phone 7

When you create a Windows Phone 7 application, by default newly created app will have

  • Title
  • Background Image
  • Icon

Value set to default as below ,

clip_image001

If you will notice by default Title would be the same as of name of the Windows Phone Application project.

On running you will get Application tile as below,

clip_image002

If you want to change the default values for Application Tiles, very easily you can do that. Follow the below steps

Step 1

Right click on the application in solution explorer and add an existing item. Select and image and upload it. I have added an image named OData-logo.png in the application.

Step 2

Right click on OData-logo.png and click on Properties

clip_image003

Change Build Action to Content from Resource.

clip_image001[5]

Step 3

Right click on the application in solution explorer and click on Properties .In properties windows select application tab and here you can change the default values. In drop down for Icon and background image, now you will get OData-logo.png image also to select from.

clip_image002[6]

I have changed value of title and chosen OData-logo.org as Icon image. Save the setting and run the application.

clip_image003[5]

Now you can see title and icon for the application have been changed.

I hope this post was useful. Thanks for reading Smile

Smooth Streaming in Silverlight

This post is walkthrough on enabling smooth streaming of media over IIS and then stream over Silverlight client. There are very good documentation available on IIS official site to have a better understanding of smooth streaming. So I am not touching theoretical concept behind smooth streaming in this post. However I have shown steps by steps to enable smooth streaming of media over IIS then to stream over Silvelight client.

See smooth streaming video below ,

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

Enable Smooth streaming on IIS

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

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

image

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

image

Encode Media File

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

Step 1

Very first open Microsoft Encoder Pro 4.0. You will get prompted to choose Project type to be loaded. Select Silverlight Project and press Ok.

image

Step 2

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

clip_image001

Choose media file to be encoded and streamed.

clip_image003

Step 3

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

clip_image004

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

clip_image005

clip_image006

After IIS Smooth streaming type doesn’t forget to click Apply button.

Step 4

There are many options available for you to configure like,

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

You can set values for above options as per your requirement. I am going to set output path here. Make sure you have created a folder on your local derive to set as 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

clip_image001[5]

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.

clip_image002

You should be getting Encoding status message as below.

clip_image003

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

Publish Encoded File over IIS

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

Step 1

Open IIS as administrator and add a new web site

clip_image001[7]

Step 2

In dialog box you need to provide below 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.

In Physical path, give the same location Encoded file is saved. In previous step while encoding media for streaming, I save file in location D:\StreamDEmo. So I am going to set Physical Path as D:\StreamDEmo.

clip_image002[5]

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

clip_image003[5]

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

clip_image005

Append Default.html in URL to play the media.

clip_image006[5]

Media will be played as below,

clip_image007

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

clip_image008

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

See Video of above performed steps below ,

Streaming over Silverlight

To Play media on Silverlight download below player from the CodePlex.

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

After download extract the file on locally. You will have to add references of these dll in Silverlight project. Since dll got downloaded from the web, so they would be locked. To use them in the project right click and unblock them.

Step 1

Create a Silverlight project.

clip_image010

Choose the Host application and select the version as Silverlight 4.0

clip_image011

Step 2

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

clip_image002

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

Step 3

You need to download IIS smooth client and install from below URL.

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

Step 4

Right click on Silverlight project and add 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.

clip_image004

Step 5

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

clip_image006

And add a player on the page downloaded to play stream media as below,

clip_image007[6]

Eventually xaml will be as below with a textblock to display message and player

Mainpage.xaml

</span>
<pre><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 page load to create play list of streamed media and play in the player.

See Video of above performed steps below ,

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 application make sure you have put a ClientAccessPolicy.xml file in D:\StreamdMedia location or the Physical path of IIS website streaming the media to avoid cross domain problem.

Press F5 to run the application.

clip_image001[9]

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



**************

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine