Streaming Media to Network Device in Windows Store Apps

In this article I will introduce to you a new capability in Windows Store Applications known as Play To that enables the user to stream media to a target device in the network.

Introduction to Play To.

Play To a target application is a great capability provided in Windows Store Applications. It supports streaming media such as images, videos and audio to other devices in the network easily and can play to other devices.

To better understand the feature of Play To, I will give you an example. Let's see it.

Suppose you are watching some video songs in your Windows Store Application and want to view this video to everyone present in the room on some private network device such as a TV. So, in this scenario you can easily stream that video from your Windows Store Application to the room TV, so that everyone in the room can see it.

How It works

The Play To feature is part of the Devices charm in Windows 8. An application that contains some media to stream can use the Devices charm. From the Device Charm a user can select the target or remote device for which you want to stream your media.

Note: To implement the Play To contract in your application you have to ensure that you enable the Devices charm in your application wherever you have audio, video, or image content available to the user.

Now after getting some knowledge about this let's start to create a Windows Store application that enables Play To video streaming to a target device using Device Charm in Windows Store.

Instructions to be followed.

Step 1

Create a new project of Windows Store Application with Blank Template.

Step 2

To stream the video using Play To contract in your application, you must add the Capabilities in the project.

• Open the package.appxmanifest file.
• Select the Capabilities tab.
• Select the Internet and Videos Library capabilities.
• Close and save the manifest file.

Step 3

Here I Create XAML markup in the MainPage.XAML page for the UI; see:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top">

        <Grid.RowDefinitions>

             <RowDefinition Height="Auto"/>

             <RowDefinition Height="Auto"/>

             <RowDefinition Height="*"/>

         </Grid.RowDefinitions>

         <StackPanel Orientation="Horizontal" Margin="0,10,0,0" Grid.Row="0">

             <Button x:Name="videoFile"  Content="Pick Video File" Margin="0,0,10,0" Click="videoFile_Click"/>

         </StackPanel>

         <Border BorderBrush="Black" BorderThickness="1" Width="642" HorizontalAlignment="Left" Grid.Row="1">

            <MediaElement x:Name="VideoSource" AutomationProperties.Name="VideoSource" HorizontalAlignment="Center" VerticalAlignment="Center" Height="360" Width="640" AutoPlay="false" PosterSource="Assets/poster.png" IsLooping="True" />

         </Border>

         <Border BorderBrush="Black" BorderThickness="1" Width="642" Height="90" HorizontalAlignment="Left" Grid.Row="2">

             <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">

                 <Button x:Name="playButton" Margin="0,0" Click="playButton_Click" Style="{StaticResource PlayAppBarButtonStyle}" />

                 <Button x:Name="pauseButton" Margin="0,0" Click="pauseButton_Click"  Style="{StaticResource PauseAppBarButtonStyle}" />

             </StackPanel>

         </Border>

      </Grid>

</Grid>

Step 4

In this step I do some initial setup for the Play To contract.

Register for the SourceRequested event.

playToManager.SourceRequested += playToManager_SourceRequested;

Then get a reference to the current PlayToManager by calling the GetForCurrentView method.
 

dispatcher = Window.Current.CoreWindow.Dispatcher;

playToManager = PlayToManager.GetForCurrentView();

Full Code:
 

PlayToManager playToManager = null;

CoreDispatcher dispatcher = null;

 

public Scenario1()

{

   this.InitializeComponent();

}    

protected override void OnNavigatedTo(NavigationEventArgs e)

{

   dispatcher = Window.Current.CoreWindow.Dispatcher;

   playToManager = PlayToManager.GetForCurrentView();

   playToManager.SourceRequested += playToManager_SourceRequested;

}

Step 5

Here is the code of the event handler.

void playToManager_SourceRequested(PlayToManager sender, PlayToSourceRequestedEventArgs args)

{

   var deferral = args.SourceRequest.GetDeferral();

   var handler = dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>

   {

      args.SourceRequest.SetSource(VideoSource.PlayToSource);

      deferral.Complete();

   });

}

Note: This event handler is fired when the user opens the Device Charm and selects network device from there.

Here is the complete code of the application:

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

using Windows.UI.Core;

using Windows.Media.PlayTo;

using Windows.Storage;

using Windows.Storage.Pickers;

using Windows.Storage.Streams;

using SDKTemplate;

using System;

 

namespace PlayTo

{

    public sealed partial class MainPage : Page

    {   
        PlayToManager playToManager = null;

        CoreDispatcher dispatcher = null;

 

        public MainPage()

        {

            this.InitializeComponent();

        }    

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            dispatcher = Window.Current.CoreWindow.Dispatcher;

            playToManager = PlayToManager.GetForCurrentView();

            playToManager.SourceRequested += playToManager_SourceRequested;

        } 

        void playToManager_SourceRequested(PlayToManager sender, PlayToSourceRequestedEventArgs args)

        {

            var deferral = args.SourceRequest.GetDeferral();

            var handler = dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>

                {

                    args.SourceRequest.SetSource(VideoSource.PlayToSource);

                    deferral.Complete();

                });

        } 

        protected override void OnNavigatedFrom(NavigationEventArgs e)

        {

            playToManager.SourceRequested -= playToManager_SourceRequested;

        }    

        async private void videoFile_Click(object sender, RoutedEventArgs e)

        {           

                FileOpenPicker filePicker = new FileOpenPicker();

                filePicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

                filePicker.FileTypeFilter.Add(".mp4");

                filePicker.FileTypeFilter.Add(".wmv");

                filePicker.ViewMode = PickerViewMode.Thumbnail; 

                StorageFile localVideo = await filePicker.PickSingleFileAsync();

                if (localVideo != null)

                {

                    var stream = await localVideo.OpenAsync(FileAccessMode.Read);

                    VideoSource.SetSource(stream, localVideo.ContentType);

                }

            }

        }

        private void playButton_Click(object sender, RoutedEventArgs e)

        {

            VideoSource.Play();

        } 

        private void pauseButton_Click(object sender, RoutedEventArgs e)

        {

            VideoSource.Pause();

        }

    }

}

Step 6

Now, run the application. Click on the Play button to play the video and you will also be able to stream the video using the Devices charm and select your Play To target.



Summary

After going through this article we learned how to add the Play To feature to a Windows Store Application to stream a media file on the network devices.