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.
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.
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.
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.
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 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.
- Search tvtv.pk or click here.
- Select any channel.
- Right-click and click Inspect.
- After clicking Inspect, select Network.
- Here, you see many links, search any link with .m3u8 extension. (You can also stream mp4 or links with the other extensions).
- 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 the 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 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.