Retrieving Download And PlayBack Rate Using Adaptive Streaming In UWP using XAML And C#

Before reading this article, please go through the following article.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
2. How To Use A Simple Adaptive Streaming URL In UWP With XAML And C#

Adaptive Streaming is a process that adjusts the quality of a video delivered to a web page, based on changing network conditions to ensure the best possible viewer experience.

Reading this article, you can learn how to retrieve download rate and playback rate in Adaptive Streaming, using AdaptiveMediaSource in UWP app development with XAML and Visual C#.

The following important tools are required for developing the required UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C# -> Windows)-> Blank App -> Give a suitable name for your app (UWPASwithAMS) -> OK.



Step 2

After choosing the Target and Minimum platform version that your application will support, the Project creates App.xaml and MainPage.xaml



Step 3

Add TextBlock control and change the name and text property for Title.



Step 4

Add TextBlock control and change the name and text property to DownloadRate.



Step 5

Add TextBlock control and change the name and text property to Play Back Rate,



Step 6

Add a MediaElement control for playing an Adaptive Streaming video.



Note

Automatically, the following code will be generated in XAML code view, while we are done in the design view.

<Page x:Class="UWPASwithAMS.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPASwithAMS" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="143,30,0,0" TextWrapping="Wrap" Text="UWP Retrieving Download rate and Playback Rate using Adaptive streaming with AdaptiveMediaSource " VerticalAlignment="Top" Width="1029" FontWeight="Bold" Height="30" FontSize="20" />
        <TextBlock x:Name="tblDownR" HorizontalAlignment="Left" Margin="296,122,0,0" TextWrapping="Wrap" Text="Download Rate :" VerticalAlignment="Top" FontWeight="Bold" />
        <TextBlock x:Name="tblPlayBack" HorizontalAlignment="Left" Margin="640,126,0,0" TextWrapping="Wrap" Text="Play Back Rate : " VerticalAlignment="Top" FontWeight="Bold" />
        <MediaElement x:Name="mediaEAMS" HorizontalAlignment="Left" Height="449" Margin="204,219,0,0" VerticalAlignment="Top" Width="851" AreTransportControlsEnabled="True" />
    </Grid>
</Page>

Step 7

Add the following namespace in Mainpage.xaml.cs for media core.

using Windows.Media.Streaming.Adaptive;
using Windows.UI.Core;

Step 8

Add the following code and the URI in Azure Media Service samples.

private AdaptiveMediaSource adaptivems;
public MainPage() {
    this.InitializeComponent();
    InitializeAdaptiveMediaSource();
}
async private void InitializeAdaptiveMediaSource() {
    AdaptiveMediaSourceCreationResult result = await AdaptiveMediaSource.CreateFromUriAsync(new Uri("http://amssamples.streaming.mediaservices.windows.net/69fbaeba-8e92-4740-aedc-ce09ae945073/AzurePromo.ism/manifest(format=mpd-time-csf)"));
    if (result.Status == AdaptiveMediaSourceCreationStatus.Success) {
        adaptivems = result.MediaSource;
        mediaEAMS.SetMediaStreamSource(adaptivems);
        adaptivems.InitialBitrate = adaptivems.AvailableBitrates.Max < uint > ();
        //Register for bitrate change events
        adaptivems.DownloadBitrateChanged += DownloadBitrateChanged;
        adaptivems.PlaybackBitrateChanged += PlaybackBitrateChanged;
    }
}
private async void DownloadBitrateChanged(AdaptiveMediaSource sender, AdaptiveMediaSourceDownloadBitrateChangedEventArgs args) {
    await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, new DispatchedHandler(() => {
        tblDownR.Text = "Download Rate : " + args.NewValue.ToString();
    }));
}
private async void PlaybackBitrateChanged(AdaptiveMediaSource sender, AdaptiveMediaSourcePlaybackBitrateChangedEventArgs args) {
    await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, new DispatchedHandler(() => {
        tblPlayBack.Text = "Play Back Rate : " + args.NewValue.ToString();
    }));
}

Step 9

Deploy your app in Local Machine. The output of the UWPASwithAMS App is shown below.



Summary

Now, we have successfully retrieved download rate and playback rate in Adaptive Streaming, using AdaptiveMediaSource with XAML AND C# in UWP environment.