Live Streaming In Windows 10

Introduction

After reading this, you can stream your channels in your UWP app or you will be able to build a live streaming Application in Universal Windows Platform.

UWP refers to a Universal Windows Platform and with this platform, we are able to develop Applications for Windows desktop or Windows phone. Here, I am using Visual Studio 2015 for development.

Tools

Visual Studio and Windows 10 OS.

Technical Requirements

Developer mode should be enabled on your OS.

Target audience

People with basic knowledge of C# and XAML are able to do this task.

Development

Four main steps are included in developing this Application. All our focus is around these steps.

Steps consist of the following.

Make a blank UWP app

In this step, we are going to make a blank Application of Windows 10. Here, I am using Visual Studio 2015 but you can also develop it in Visual Studio 2017. Let’s create a blank Application. If you are not familiar with Windows development, then follow the steps given below.

Open your Visual Studio > Select New Project, as shown below.

First click Universal > Blank App (Universal Windows) > Rename it > OK. The steps are shown in the image given below.

Afterwards, you will see a box to select target version and minimum version of your Universal Windows Application. You need to just click OK.

Here, our first step is complete and blank Application is created to start our project. Let’s move towards to the second step.

Insert Media Element

In this step, we can design our Application, drag and drop some tools from the toolbox to make our Application UI better.

Double click on MainPage.Xaml to open your designer. Follow the steps given below.

• Go to Toolbox.
• Search “MediaElement” in toolbox.
• Drag media element to designer.
• Go to Media Element properties.
• Select layout.
• Change horizontal alignment and vertical alignment to Stretch. 
  
  
  

Now, enable media controls i.e. play and pause (buttons).

Right click on the button, followed by going to its Properties. Search for “AreTransoprtControlsEnabled” in Properties and check the box. After checking this box, your Application now has play, pause and other controls. You don’t need to code anything for these buttons.

Here, our designing step has completed. Let’s move towards our third step.

Change Element Source

In this step, we are going to assign URL to our media element.

The main and last work is to change the element source. Here, you can give any source of an online channel and it starts streaming on your app. Let's do it.

Here, a question arises.

Where to find an online channel source?

Don't worry as every problem has a solution.

Just go to tvtv.pk or any other live streaming Website. Here, I use tvtv.pk for live streaming. 

Follow the steps given below.

1. Search tvtv.pk or click here.
2. Select any channel. 
3. Right click and click Inspect.
4. After clicking Inspect, select Network.
5. Here, you see many links, search any link with .m3u8 extension. (You can also stream mp4 or links with the other extensions).
6. Right click on the link and click on Copy link address.

*All the steps are shown in the image given below.

Now, go to properties of “mediaElement”, search for source and paste the link in the source and click Enter.

Run your live channel.

Just press F10 or run your app to enjoy your show.

Now, you can watch your live channel with all transport controls.

You can make your own live TV. Just put the buttons and change the media source to your desired channel on the button click.