Windows 10 | Stream Live Using Media Element (HTTP / HLS Streaming)

Windows 10 has really improved not only browser has improved and it stream 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.


It's extension may be .m3u8 or m3u, before it's support in Windows 10 it was really hard to stream video online. There was different Open Source SDKs available in market and some were paid. Wowza is one of the example for paid SDK where as open source SDK were also available which helped streaming live on Windows Phone and Windows Store. There are very few application on Windows Phone /Store (8/8.1) for live streaming of TV Channels, TVHUB is one of them.


It's a happy news that Microsoft Supports HLS /HTTP protocol in its media element for Universal Applications (Windows 10). Lets go through and 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






http://ott.pakwatantv.com:5000/live/geonews0011/playlist.m3u8  it would stream Geo New Live ,

Step 2:

Make sure you have successfully set up DEV environment for Windows 10, Open Visual Studio 2015 , 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 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 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 till next time.