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

Windows 10 has really improved, 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 protocolimplemented 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.

It's extension may be .m3u8 or m3u, before its support in Windows 10 it was really hard to stream video online. There was different Open Source SDKs available in the market and some were paid. Wowza is one of the example for paid SDK whereas open source SDK were also available which helped streaming 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  a great news that Microsoft Supports HLS /HTTP protocol in its media element for Universal Applications (Windows 10). Lets go through an example of Streaming Live Channel in Windows 10 Universal App.

Step1: 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 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 coding details of your steaming application. Use a StackPanel and laydown a Media Element with a button in it. Make sure the button has a ClickEvent.

<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 of time, use your own m3u8 link to stream video if this does not work.

Screenshots:


I hope you enjoyed this article. Happy Coding!