View Video File in Node Red from local storage in the Desktop

Dashboard
1

Hello All,

I have been trying to get a video on the dashboard that is played only when a trigger is given.

The following Example flow by [BartButenaers]

[{"id":"34ebe5b1.ffe0ca","type":"inject","z":"18e47039.88483","name":"Show first stream","topic":"","payload":"https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":620,"y":1140,"wires":[["d4643763.1e4478"]]},{"id":"d4643763.1e4478","type":"ui_template","z":"18e47039.88483","group":"b389df50.19473","name":"Vid_screen","order":28,"width":"6","height":"4","format":"<div>\n     <video id=\"video\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n    (function(scope) {\n        // Watch for messages being send to this template node\n        scope.$watch('msg', function (msg) {      \n            if (msg) {\n\n                var video = document.getElementById('video');\n                video.src = msg.payload;\n                video.play();\n            }       \n         }); \n    })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":830,"y":1140,"wires":[[]]},{"id":"1cd37387.83b0bc","type":"inject","z":"18e47039.88483","name":"Show first stream","topic":"","payload":"https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":620,"y":1180,"wires":[["d4643763.1e4478"]]},{"id":"b389df50.19473","type":"ui_group","z":"","name":"G_2","tab":"12ba52b2.c0ce3d","order":4,"disp":false,"width":"6","collapse":false},{"id":"12ba52b2.c0ce3d","type":"ui_tab","z":"","name":"Drivecamlrgscreen","icon":"dashboard","order":5}]

This flow really works but I dont have google could account, so if anyone can help as to how to play videos form Youtube or github or google drive or the local desktop after a trigger it would be a great help.

Thanking in Anticipation.

2

Hi Akash,

I had overlooked your question. You can easily mention somebody by using e.g. @bartbutenaers, if you want them to get a notification about a topic.

I simply used a public available mp4 movie file that was available already on google cloud. But you can store the mp4 file anyware, you only need to make sure that your browser can access it.

It seems you can't use the "video" tag to play youtube videos, since the "video" tag only supports mp4, WebM and Ogg. If you really want to show youtube movies, you should use an "iframe" tag (to embed the Youtube player into the dashboard).

Created quickly a test flow:

image

[{"id":"ea0e929f.597","type":"inject","z":"4142483e.06fca8","name":"Show youtube video","topic":"","payload":"https://www.youtube.com/embed/tgbNymZ7vqY","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"showConfirmation":false,"confirmationLabel":"","x":670,"y":1580,"wires":[["576275e3.77cc1c"]]},{"id":"576275e3.77cc1c","type":"ui_template","z":"4142483e.06fca8","group":"e9a45c1a.a0da","name":"Youtube_screen","order":28,"width":"8","height":"6","format":"<div style=\"width: 100%; height:100%\">\n    <iframe id=\"iframe\" style=\"width: 100%; height:100%\" src=\"\"></iframe>\n</div>\n\n<script> \n    (function(scope) {\n        // Watch for messages being send to this template node\n        scope.$watch('msg', function (msg) {      \n            if (msg) {\n\n                var iframe = document.getElementById('iframe');\n                iframe.src = msg.payload + \"?autoplay=1;start=2\";\n            }       \n         }); \n    })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":880,"y":1580,"wires":[[]]},{"id":"e9a45c1a.a0da","type":"ui_group","z":"","name":"G_2","tab":"4c0b230b.9a171c","order":4,"disp":false,"width":"8","collapse":false},{"id":"4c0b230b.9a171c","type":"ui_tab","z":"","name":"Drivecamlrgscreen","icon":"dashboard","order":5}]

That seems to work:

youtube_in_dashboard

But personally I don't like it for some reasons:

  • You are bound to the player from Youtube. I don't know anything about it...
  • Takes rather long to load the player and the movie
  • The autoplay doesn't work in the above flow. Don't know why
  • ...

This isn't my cup of tea...

If I were you I would do it like that. Just store your file somewhere public available and add the URL path to your file in the "video" tag as "src" attribute.

I assume you can also store the mp4 file somewhere local on the device where your Node-RED is running, and make it public accessible:

  1. Store the video file in a folder on your Node-RED server, for example:

    image

  2. Make that folder public accessible via the Node-RED settings.js file:

    httpStatic: '/home/pi/node-red-static/',

  3. From now on the video file will become public available via the URL of your Node-RED system: https://yourdomain:1880/some_video.mp4 (or http when you have no SSL, or I think you can just use // at the start so both http and https will work)

  4. Use the absolute URL of the image as "src" attribute value for the "video" element:

    <video src="https://yourdomain:1880/some_video.mp4"/>

P.S. I had no time to test this ...

Bart

3

Thank you so much for your help!!!

1 Like
4

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