Windows 10 - Stream Live Through Media Element (HTTP, HLS Streaming)

Introduction 

 

Windows 10 has really improved, the not only browser has improved and it streams HTTP /HLS, but also Media element of Windows 10 now supports HTTP streaming. If you don't know much about HLS Streaming let me give you a brief overview of that,

 

 

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 which are available.

 

Its extension may be .m3u8 or m3u, before its support in Windows 10 it was really hard to stream video online. There were different Open Source SDKs available in the market and some were paid. Wowza is one of the examples for paid SDK whereas open-source SDK was also available which 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 is 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

 

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

 

Step 3

 

You need to work on XAML before you get into the coding details of your steaming application. Use a StackPanel and lay down a Media Element with a button in it. Make 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 you would be good to stream.

mediaElement.Source = new Uri("http://ott.pakwatantv.com:5000/live/geonews0011/playlist.m3u8");
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, use your own m3u8 link to stream video if this does not work.

 

Screenshots

 

 

Summary

 

In this article, we learned about Windows 10 - Stream Live Through Media Element (HTTP, HLS Streaming).