[Announce] node-red-contrib-ui-media



I'm currently developing the first version of node-red-contrib-ui-media. The main idea with this node is to create an easy way to display videos and images on the dashboard.

All 'constructive' feedback is welcome before I publish it on npm. For now you can install it directly from GitHub

    npm install netsmarttech/node-red-contrib-ui-media

This node uses new Dashboard API (it is a Widget) introduced in version 2.10.0
(announcement ). So, use it with latest version of Node-RED dashboard.


Getting image in dashboard
How to display CCTV camera in dashboard (RTSP)

Hi @steuck13,

Nice !!!

This is so a coincidence. I started last night on a new node-red-contrib-ui-camera node, to display streaming video from camera's. I had already added the option for playing video file (like your node), but it didn't really fitted into my 'camera' concept. So I'm glad you have published your node, so I can remove the video file part from mine and focus 100% on camera's.

BTW I see you also added already a 'loop' and 'show controls' option, so I have nothing further to add. Great contribution ...



Hi @steuck13,

I have some layout troubles with my own node, and you seem to have solved them in your code...
I would appreciate very much if you could explain why you have used the following settings:

        width: 100%;
        height: auto;
        max-height: 98%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
<video id="${video_name}" src="${path}" ${controls_string}

My CSS knowledge is rather limited ...

Thanks a lot !


Sure, no problem, I don't know that much but I'll try

width: 100%;
height: auto;

Here we define that the video element will fill the whole horizontal space available on the parent element and the height will adjust automatically. You´ll see this a lot when people try to make an element responsive to resizing.

max-height: 100%;

Since height is automatically set, I defined that the video height can be no bigger than 100% of the parent element size. If I'm not mistaken, this means that if the parent element have the same width as the video but a smaller height, the video will scale down by the height instead of overflowing and showing scroll bars.

position: relative;
top: 50%;
transform: translateY(-50%);

This is a tricky one. In some cases I found out that the scroll bar still appear, usually because a few pixels overflowed. When you transform an element the sizes are adjusted because of the movement, so I used this trick to eliminate the scroll bar on these rare cases.


Custom UI node - layout problems

Hello all,
the node-red-contrib-ui-media was finally published on NPM!

@knolleary, could you please make it available in the flows page? Thanks!


@machadotiago it is a completely automated system - apart from when something breaks.

So as long as you have followed the docs on how to package your node it will appear.

In this case, your node does not have node-red listed as a keyword so it will not get listed by the flow library.