Streaming video on uibuilder

General
1

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?

2

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

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:

[{"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:

    <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

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

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.

4

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