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"/>


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

  1. <Page x:Class="UWPSimpleAdaMedStream.MainPage" xmlns="" xmlns:x="" xmlns:local="using:UWPSimpleAdaMedStream" xmlns:d="" xmlns:mc="" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="206,10,0,0" TextWrapping="Wrap" Text="Simple Adaptive Streaming Demo" VerticalAlignment="Top" FontWeight="Bold" />  
  4.         <MediaPlayerElement x:Name="MPEAdaptive" HorizontalAlignment="Stretch" AreTransportControlsEnabled="True" />  
  5.     </Grid>  
  6. </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.
  1. System.Uri mfestUri = new Uri("");  
  2. MPEAdaptive.Source = MediaSource.CreateFromUri(mfestUri);  
  3. 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.



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

Similar Articles