# Watch IPTV - uibuilder

**URL:** <https://discourse.nodered.org/t/watch-iptv-uibuilder/16881>\
**Category:** Share Your Projects\
**Created:** [19 October 2019 12:14 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881 "2019-10-19T12:14:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 October 2019 12:14 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/1 "2019-10-19T12:14:19Z")

</div>

This is a proof of concept to see if I could grasp vuejs, using uibuilder. While it did take some time to get my head around it, to my surprise it works quite efficiently, so here I present a small project that allows you to watch IPTV channels (coming from the iptv repo; 8000+ channels).

Organised by country, category and an instant search.

node-red is used to parse the raw m3u8 file and convert it to json and listens for actions from uibuilder. Obviously nothing that could not have been done without node-red, but as said, proof of concept 🙂

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4077f085ab5380aa262f50d00e4946a65545a927.gif) ](https://raw.githubusercontent.com/bakman2/iptv-uibuilder/master/resources/iptv.gif)

The gif was cropped, the modal will be centered.

The flow:  
[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/eb381cf0bc7ee2505197481bf432101c2093ea25.jpeg) ](https://raw.githubusercontent.com/bakman2/iptv-uibuilder/master/resources/flow.jpg)

If you're interested, I have uploaded everything to a [github repo](https://github.com/bakman2/iptv-uibuilder).

**Note that this won't work on Chrome** as it does not support HLS streams.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 October 2019 13:30 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/2 "2019-10-19T13:30:29Z")

</div>

Very nice! Thanks for sharing.

> [@bakman2](#):
>
> **won't work on Chrome** as it does not support HLS streams

Is that just Chrome or Chromium based browsers in general?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 October 2019 14:31 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/3 "2019-10-19T14:31:59Z")

</div>

I think it is all chromium based browsers. There are plugins/extensions available.

---

<div class="post-metadata">

**Author:** ![wb666greene](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wb666greene/32/6534_2.png) [@wb666greene](https://discourse.nodered.org/u/wb666greene)\
**Post date:** [19 October 2019 15:06 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/4 "2019-10-19T15:06:59Z")

</div>

A quick search in the Chrome "web store" on HLS finds three "extensions"

Play HLS M3u8  
Native HLS Playback  
Native MPEG-Dash + HLS Playback

Any suggestions on which to try first? Or just view in Firefox to start?

Does this IPTV stuff work inside the US? A quick re-watch of the animated gif I did see United States flash by in the country list.

Might be fun to try this and maybe learn something about UI builder, which I've not yet tried. Dashboard has so far met my limited needs for a "web UI".

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 October 2019 15:10 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/5 "2019-10-19T15:10:05Z")

</div>

The streams work world-wide. I would try any that works 😉

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [18 November 2019 21:03 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/6 "2019-11-18T21:03:45Z")

</div>

Hi, @bakman2!

First of all, thank you for your project IPTV! I'm currently trying to deploy it following your instructions, but I'm having some problems with it. In particular, in "uibuilder" :

 ![%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5a7b9c382c12f3722615b8ecde2dd74e6984c242.jpeg)

Could you maybe help me with it? Would be really grateful!

Thanks.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [18 November 2019 21:42 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/7 "2019-11-18T21:42:57Z")

</div>

Add a uibuilder node to a flow, change the url to "tv", deploy. Delete the uibuilder node, deploy again.  
A "tv" directory was created: `~/.node-red/uibuilder/tv`.  
Add the files from the repository into that folder.  
Import the flow, deploy. Open your browser: `http://yourip/tv`

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [19 November 2019 19:29 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/8 "2019-11-19T19:29:28Z")

</div>

Hi, @bakman2!

Thank you for your quick answer.  
I've deleted my previous flow and have tried the way you suggested. But still, no success.

Also, i wonder, why did you write this link "[http://yourip/tv](http://yourip/tv)"? Because the link on my page is this: "[http://192.168.1.30:1880/endpoint/tv/](http://192.168.1.30:1880/endpoint/tv/)".

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 November 2019 20:13 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/9 "2019-11-19T20:13:27Z")

</div>

> i wonder, why did you write this link "[http://yourip/tv](http://yourip/tv)"? Because the link on my page is this: "[http://192.168.1.30:1880/endpoint/tv/](http://192.168.1.30:1880/endpoint/tv/)".

if you follow the steps, you should end up on  
[http://192.168.1.30:1880/tv](http://192.168.1.30:1880/tv)

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [19 November 2019 20:20 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/10 "2019-11-19T20:20:56Z")

</div>

When I've tried this link: "[http://192.168.1.30:1880/tv](http://192.168.1.30:1880/tv)"  
I received such message: "Cannot GET /tv"  
My built-in Dashboard has link: "[http://192.168.1.30:1880/endpoint/ui/#!/0](http://192.168.1.30:1880/endpoint/ui/#!/0)"  
Could it be because my Node-red is set up in Docker?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 November 2019 20:21 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/11 "2019-11-19T20:21:50Z")

</div>

where are the files? (path)

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [19 November 2019 20:38 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/12 "2019-11-19T20:38:18Z")

</div>

> /config/node-red/projects/genik70/uibuilder/tv

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 November 2019 21:38 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/13 "2019-11-19T21:38:29Z")

</div>

You have set `httpNodeRoot` to 'endpoint' in your settings.js file. You need to remember to mentally adjust the URL's when you do that since nobody else will know and will assume that you haven't done it.

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [20 November 2019 20:18 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/14 "2019-11-20T20:18:23Z")

</div>

Okay then,

> 'endopint/tv'

is not a problem.

When i click on "Increment" button, i get a following problem in "debug messages":

> "ReferenceError: topic is not defined (line 11, col 37)"

Can you maybe suggest in which file there is a problem? Or how can I fix it?  
Thanks a lot!

 ![1234](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f37309d2b7f1c1931295f3a94ad0a8a2860a15b0.jpeg)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [20 November 2019 20:30 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/15 "2019-11-20T20:30:04Z")

</div>

The point is: your screenshot shows the default uibuilder index. Did you download the files from the repository?

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [20 November 2019 20:36 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/16 "2019-11-20T20:36:46Z")

</div>

Yes, i downloaded the files:

 ![11111111](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b75856b36615a520243c3894d627c6dbc0cdc8ad.jpeg)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [20 November 2019 21:25 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/17 "2019-11-20T21:25:44Z")

</div>

put the files in `src`

---

<div class="post-metadata">

**Author:** ![genik70](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/genik70/32/1392_2.png) [@genik70](https://discourse.nodered.org/u/genik70)\
**Post date:** [20 November 2019 21:39 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/18 "2019-11-20T21:39:05Z")

</div>

Thank you for a hint, I've just found it out myself too

Currently I'm testing this amazing component, thanks for sharing!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 November 2019 11:42 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/19 "2019-11-21T11:42:26Z")

</div>

I'm seeing an error in the debug node caused by the function in the `Load single Country or Category` leg of the flow:

`"ReferenceError: topic is not defined (line 11, col 37)"`  
the code is:

```auto
filename = flow.get("all")

if(msg.payload.hasOwnProperty("country")){
    topic = msg.payload.country
}
if(msg.payload.hasOwnProperty("category")){
    topic = msg.payload.category
}

if(!msg.payload.hasOwnProperty("search")){
    return {filename:filename,topic:topic};
}

```

but needs to define the variable `topic` before referencing it like this:

```auto
filename = flow.get("all")
var topic ='';

if(msg.payload.hasOwnProperty("country")){
    topic = msg.payload.country
}
if(msg.payload.hasOwnProperty("category")){
    topic = msg.payload.category
}

if(!msg.payload.hasOwnProperty("search")){
    return {filename:filename,topic:topic};
}

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [21 November 2019 11:54 UTC](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881/20 "2019-11-21T11:54:28Z")

</div>

It is defined if you set it up correctly. It is the first thing it sets upon deploy.

[Next page](https://discourse.nodered.org/t/watch-iptv-uibuilder/16881.md?page=2)