Windows 10 - Developing UI For Multiple Screens Using Adaptive Triggers and Visual States

Introduction 

 

Windows 10 has improved the browser since it now streams HTTP-HLS. The Media element of Windows 10 now also supports HTTP streaming. If you don't know much about HLS Streaming, let me provide you a brief overview of that.

 

 

The Wikipedia says

 

"HTTP Live Streaming (also known as HLS) is an HTTP-based media streaming communications protocol implemented by Apple Inc. as part of its QuickTime, Safari, OS X and iOS software. It works by breaking the overall stream into a sequence of small HTTP-based file downloads, each download loading one short chunk of an overall potentially unbounded transport stream. As the stream is played, the client may select from a number of different alternate streams containing the same material encoded at a variety of data rates, allowing the streaming session to adapt to the available data rate. At the start of the streaming session, it downloads an extended M3U playlist containing the metadata for the various sub-streams that are available".

 

Its extension may be .m3u8 or m3u, before it's supported in Windows 10 it was really hard to stream video online. There were various open-source SDKs available on the market and some were paid. Wowza is one example of a paid SDK whereas open-source SDKs were also available that helped to stream live on Windows Phone and Windows Store. There are very few applications on Windows Phone / Store (8/8.1) for live streaming of TV Channels, TVHUB is one of them.

 

It's great news that Microsoft supports HLS /HTTP protocol in its media element for Universal Applications (Windows 10). Let's go through an example of Streaming Live Channel in Windows 10 Universal App.

 

Step 1

 

You need a Live Streaming Link with .m3u8 extension to stream live channel. I am providing one for your testing. It would stream Geo New Live.

 

Step 2

 

Be sure you have successfully set up a DEV environment for Windows 10. Open Visual Studio 2015 then make a new Windows Universal App project for Windows 10. You can name it anything you like and then click on create.

 

Step 3

 

You need to work on XAML before you get into coding details of your steaming application, use a StackPanel and lay down a Media Element with a button in it. Be sure the button has a click event.

<StackPanel>
   <MediaElement x:Name="mediaElement" HorizontalAlignment="Left" Height="486" Margin="10,10,0,0" VerticalAlignment="Top" Width="748"/>
   <StackPanel Orientation="Horizontal">
      <Button Content="Play" Margin="5" Height="45" Width="100" Click="Button_Click"></Button>
   </StackPanel>
</StackPanel>

Step 4

 

You just need to write the following two lines of code and it would be great for streaming.

1. mediaElement.Source = new Uri("http://ott.pakwatantv.com:5000/live/geonews0011/playlist.m3u8");  
2. mediaElement.Play();  

Now you just need to build the project and run it, you would end up with similar results.

 

Note

 

My Streaming link might stop working at some point in time. I would suggest you use your own m3u8 link to stream video if this does not work.

 

Screenshots

 

 

I hope you enjoyed this article.

 

Summary

 

In this article, we learned about Windows 10 - Developing UI For Multiple Screens Using Adaptive Triggers and the Visual States.