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.
 
UWP
 
First, click Universal > Blank App (Universal Windows) > Rename it > OK. The steps are shown in the image given below.
 
UWP
 
Afterward, you will see a box to select the target version and minimum version of your Universal Windows Application. You need to just click OK.
 
UWP
 
Here, our first step is complete and blank Application is created to start our project. Let’s move towards 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 the toolbox.
  • Drag media element to designer.
  • Go to Media Element properties.
  • Select layout.
  • Change horizontal alignment and vertical alignment to Stretch. 
     
    UWP
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.
 
UWP
 
Here, our designing step has completed. Let’s move towards our third step.
 

Change Element Source

 
In this step, we are going to assign a 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.
 
UWP
 
Now, go to properties of “mediaElement”, search for the source and paste the link in the source and click Enter.
 
UWP
 
Run your live channel.
 
Just press F10 or run your app to enjoy your show.
 
Now, you can watch your live channel with all the transport controls.
 

Summary 

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