# Streaming video on uibuilder

**URL:** <https://discourse.nodered.org/t/streaming-video-on-uibuilder/76023>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [2 March 2023 20:28 UTC](https://discourse.nodered.org/t/streaming-video-on-uibuilder/76023 "2023-03-02T20:28:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [2 March 2023 20:28 UTC](https://discourse.nodered.org/t/streaming-video-on-uibuilder/76023/1 "2023-03-02T20:28:40Z")

</div>

I have a hastily question, so I want to make sure before I try to do it because I have limit time.  
If I want to receive a streaming video with the HTTP protocol in Node-RED and show it in the UIBuilder, I won't have a problem, right?

---

<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:** [2 March 2023 21:19 UTC](https://discourse.nodered.org/t/streaming-video-on-uibuilder/76023/2 "2023-03-02T21:19:18Z")

</div>

You won't have a problem from uibuilder - I can't speak for your streaming server or HTML 🙂

You will find some other discussion on the forum about this. There are some potential gotya's for modern browsers:

- If you are loading from a stream that is normally stopped and only starts when the client connects, you need to give the stream time to start BEFORE trying to interact with it.
- If you want to be able to control start/stop from Node-RED rather that from user interaction. Namely that you cannot remotely start a video AND have sound on when you do so, the browser disallows it. That isn't a uibuilder issue of course. You can preset the player to muted to partially work around this.

Here is an example flow:

```auto
[{"id":"1760496892566bee","type":"group","z":"c51f51da7ee02d68","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["f29ba9d80a04a8a5","116114e2e4efff5b","6ba9b3108645ae90","3cddafd5b4417b8a","aec8461659368b17","f13e273c7d57514a","84147b5c165db7db","0963e15e41ebacda","ef09cbfcfdab3a16"],"x":74,"y":1259,"w":982,"h":262},{"id":"f29ba9d80a04a8a5","type":"uibuilder","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"","topic":"","url":"streaming-video-test","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.1.0-beta","showMsgUib":false,"x":480,"y":1400,"wires":[["6ba9b3108645ae90"],["3cddafd5b4417b8a","f13e273c7d57514a"]]},{"id":"116114e2e4efff5b","type":"inject","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"play","x":170,"y":1400,"wires":[["f29ba9d80a04a8a5"]]},{"id":"6ba9b3108645ae90","type":"debug","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"debug 101","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":655,"y":1360,"wires":[],"l":false},{"id":"3cddafd5b4417b8a","type":"debug","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"debug 102","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":655,"y":1420,"wires":[],"l":false},{"id":"aec8461659368b17","type":"inject","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"pause","x":170,"y":1440,"wires":[["f29ba9d80a04a8a5"]]},{"id":"f13e273c7d57514a","type":"switch","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"","property":"uibuilderCtrl","propertyType":"msg","rules":[{"t":"eq","v":"client connect","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":690,"y":1480,"wires":[["84147b5c165db7db"],[]]},{"id":"84147b5c165db7db","type":"change","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"play","tot":"str"},{"t":"delete","p":"uibuilderCtrl","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":840,"y":1460,"wires":[["ef09cbfcfdab3a16"]]},{"id":"0963e15e41ebacda","type":"link in","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"link in 8","links":["ef09cbfcfdab3a16"],"x":165,"y":1360,"wires":[["f29ba9d80a04a8a5"]]},{"id":"ef09cbfcfdab3a16","type":"link out","z":"c51f51da7ee02d68","g":"1760496892566bee","name":"link out 28","mode":"link","links":["0963e15e41ebacda"],"x":1015,"y":1300,"wires":[]}]

```

Here is the important part of the HTML:

```auto
    <video-js id="my_video_1" class="vjs-default-skin" 
            controls preload="auto" width="640" height="268" muted="muted">
        <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
            type="application/x-mpegURL">
    </video-js>

```

And some js to allow remote start/stop

```auto
const player = videojs('my_video_1')
uibuilder.onChange('msg', function(msg) {
    if (msg.topic === 'pause') {
        player.pause()
    }
    if (msg.topic === 'play') {
        player.play()
    }
})

```

---

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [5 March 2023 10:22 UTC](https://discourse.nodered.org/t/streaming-video-on-uibuilder/76023/3 "2023-03-05T10:22:22Z")

</div>

> [@TotallyInformation](#):
>
> And some js to allow remote start/stop

Thank you.  
Yes I want to send command with MQTT from uibuilder to the cameras to command them that send the live video to Node-RED and uibuilder and then I send command to off sending live video.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 May 2023 10:23 UTC](https://discourse.nodered.org/t/streaming-video-on-uibuilder/76023/4 "2023-05-04T10:23:13Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.