How To Use A Simple Adaptive Streaming URL In UWP With XAML And C#

Before reading this article, please go through the article, mentioned below.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

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

After reading this article, you will know how to use a simple adaptive streaming URL in Universal Windows apps development with XAML and Visual C#. Here, the input is a Azure Media Service URL from Microsoft.

The important tools mentioned below are required to develop 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 the suitable name for your app (UWPSimpleAdaMedStream)->OK.



Step 2

After choosing the Target and minimum platform version your Windows Universal Application will support, the project creates App.xaml and MainPage.xaml.



Step 3

Add TextBlock control, change the name and text property for the title.



Step 4

Add a MediaPlayerElement control to play an Adaptive streaming video,

<MediaPlayerElement x:Name="MPEAdaptive" HorizontalAlignment="Stretch" AreTransportControlsEnabled="True"/>



Note

Automatically, the code, mentioned below will be generated in XAML code view, after we are finished in the design view.

<Page x:Class="UWPSimpleAdaMedStream.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPSimpleAdaMedStream" 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="206,10,0,0" TextWrapping="Wrap" Text="Simple Adaptive Streaming Demo" VerticalAlignment="Top" FontWeight="Bold" />
        <MediaPlayerElement x:Name="MPEAdaptive" HorizontalAlignment="Stretch" AreTransportControlsEnabled="True" />
    </Grid>
</Page>

Step 4

Add the namespace, mentioned below in Mainpage.xaml.cs for media core, using Windows.Media.Core.

Step 5

Add the code, mentioned below and the URL is Azure Media service Samples.

http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-aba6c2206a2/AzureMediaServicesPromo.ism/manifest(format=m3u8-aapl)

System.Uri mfestUri = new Uri("http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest(format=m3u8-aapl)");
MPEAdaptive.Source = MediaSource.CreateFromUri(mfestUri);
MPEAdaptive.MediaPlayer.Play();

Step 6

Deploy your app in a local machine and the output of UWPSimpleAdaMedStream app is mentioned below.



The video stream's output is shown below.



Summary

Now, you have successfully tested a simple adaptive streaming URL with XAML and C# in UWP environment.