# RTSP Feed on dashboard

**URL:** <https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876>\
**Category:** Dashboard\
**Created:** [3 November 2024 05:03 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876 "2024-11-03T05:03:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [3 November 2024 05:03 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/1 "2024-11-03T05:03:06Z")

</div>

Hi,  
So I have seen several posts here about getting rtsp feed on dashboard. They all seem to be complicated. Is there a simple way to get a rtsp feed and display the live preview of a specifc camera (have a drop down list/buttons to select the camera) and it shows a semi live feed of the camera. I have seen posts [like this one](https://discourse.nodered.org/t/node-red-contrib-ffmpeg-spawn/44427) that seem to do it, but they use alot of nodes and I am not sure if they work with the latest version of the dashboard

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [3 November 2024 06:26 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/2 "2024-11-03T06:26:52Z")

</div>

For the new dashboard, work is in progress but it is managed by a non paid volunteer so just be patient  
For the previous dashboard the link you referre to is the way to go

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [3 November 2024 06:27 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/3 "2024-11-03T06:27:52Z")

</div>

Just to make sure that flow fuze dashboard 2.0 is the latest and the right one?

> [@krambriw](#):
>
> For the previous dashboard the link you referre to is the way to go

Can I use them toghether in a way or is it one or the other

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 November 2024 07:27 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/4 "2024-11-03T07:27:17Z")

</div>

Hi @ath0rus

- In the old AngularJs dashboard you needed to use [node-red-ui-mp4frag](https://github.com/kevinGodell/node-red-ui-mp4frag).
- For the new VueJs dashboard D2 I started developing [node-red-dashboard-2-ui-video](https://github.com/bartbutenaers/node-red-dashboard-2-ui-video), as a successor of the old ui-mp4frag node. One of the [wiki](https://github.com/bartbutenaers/node-red-dashboard-2-ui-video/wiki) pages is a tutorial about showing RTSP streams.

However there are still a large number of open [issues](https://github.com/bartbutenaers/node-red-dashboard-2-ui-video/issues) for my new node. For some of them I was completely stuck, for others I simply didn't have time to fix them. Because the new dashboard causes us having to reimplement all our ui nodes, which requires a LOT of free time.

The open-source concept is very simple: unless some people want to help contributing, this node will only be finished when I find free time. Spoiler alert: that won't be soon...

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [3 November 2024 10:21 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/5 "2024-11-03T10:21:56Z")

</div>

Id love to help you develop it but I run into some simiar issues (Not much free time (cos of work) and only know python (and not too well) and not java script), I can test and feedback if that helps (you probably get alot of that)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [3 November 2024 16:43 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/6 "2024-11-03T16:43:53Z")

</div>

I would stick to the old for now for RTSP video, that works really well even if the flow looks complex in itself since Kevin maybe added more features in his sample then you actually need

I would make one tab per camera to keep a nice organized flow

We (@dynamicdave, @zenofmud and myself) made earlier an attempt using Kevins nodes together with others (and some coding...) to make a video management system for home usage. It is also supporting other video sources like http, youtube and recorded video. Could maybe be of interest to look at

[https://teamwork-int.com/hss/index.html](https://teamwork-int.com/hss/index.html)

> [@Home Surveillance System (HSS) - UPDATE and UPGRADE](https://discourse.nodered.org/t/home-surveillance-system-hss-update-and-upgrade/74699/7):
>
> Thanks @dynamicdave, Here's what I see after the chmod command: pi@nr-vid-sec:/var/www/html/hss\_media/recordings/09 $ ls -lt total 400 -rw-r--r-- 1 pi pi 47940 May 10 07:22 07-22-45.mp4.jpg -rw-r--r-- 1 pi pi 0 May 10 07:22 07-22-45.mp4 -rwxrwxr-x 1 pi www-data 38175 May 10 07:15 07-15-02.mp4.jpg -rwxrwxr-x 1 pi www-data 0 May 10 07:15 07-15-02.mp4 You can see that before the chmod command, both pi and www-data had ownership, but now when the app saves the files, only pi h…

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [4 November 2024 05:37 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/7 "2024-11-04T05:37:50Z")

</div>

Just did a recap how we designed the HSS as mentioned above. I now remember, was a time ago,  
we did not use the _node-red-contrib-ui-mp4frag_ node, instead we actually coded the ui functionality in the (old) dashboard template nodes

So basically, just using the dashboard independent node-red-contrib-ffmpeg-spawn and node-red-contrib-mp4frag and do similar coding in the dashboard 2 template node might work. Untested though...

---

<div class="post-metadata">

**Author:** ![no\_mpimpi](https://avatars.discourse-cdn.com/v4/letter/n/f14d63/32.png) [@no\_mpimpi](https://discourse.nodered.org/u/no_mpimpi)\
**Post date:** [5 November 2024 08:46 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/8 "2024-11-05T08:46:11Z")

</div>

Hi @BartButenaers,

At the risk of it sounding like bribery, is there a way for us to contribute financially? Like, do you have a Patreon or a something?

I am not a rich guy, but I can make a donation now and then. I'd send you avocados if we were in the same country.

You see, for me the use case is to bring up a video feed when Frigate says there is a person there. And for me the need is very real.

The reason I am googling this process today (and found this thread) is because _last night_ Frigate caught someone testing the fence at our tractor shed, and feeling around to see if they might access the gate motor (it's in a cage, but not invulnerable if you can pick a lock). They did this at two buildings on our farm.

We're small farmers, this kind of thing hits us hard, because cops don't bother coming out here, and insurance always finds a way not to pay. We've been hit four times this year, and I installed Frigate after the last one.

I'm very excited about Frigate as a part of my setup. But for real, I'm alarmed, because the person made no attempt to steal; they were purely scouting. They'll be back.

Right now, I have Node-RED email me if Frigate publishes a snapshot to MQTT. I will learn how to embed the snapshot in the email (it's formatting, I'll get there), but this would be even sexier.

Thank you for the work you have done so far. I am heading over to Github now.

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [5 November 2024 10:40 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/9 "2024-11-05T10:40:41Z")

</div>

Maybe not frigate for me (yet), But all I want to do is to be able to offer a login page to guests (that house sit for us or when guest parents want to watch the camera looking at the pool while they talk to other parents), putting a feed on the dashboard (as well as other stuff like weather) would be cool. Im not sure how much I can contribute but id be happy to contribute to a ko-fi if that pays you to spend time to work on this node, Or i can help (if possible)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [5 November 2024 12:12 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/10 "2024-11-05T12:12:26Z")

</div>

If you are handymen you might also be interesting in this new thread. There you should be able to import the example and modify it fitting your cameras RTSP feed

> [@Migrating ui template from Dashboard-1 to Dashboard-2](https://discourse.nodered.org/t/migrating-ui-template-from-dashboard-1-to-dashboard-2/92891/7):
>
> Been experimenting and it works fine when playing mp4 as well as http but when I try to play a hls stream it does not start playing Below is the specific code where I inserted a number of debug messages. It reaches the following: show hls hls is supported z is set binding worked but it never reaches url loaded Here I'm stucked, any hints would be great The url is "/mp4frag/7424e65996a40660/hls.m3u8" and plays fine in the db-1 version both in Chrome and Safari if (msg.payload…

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [5 November 2024 12:14 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/11 "2024-11-05T12:14:26Z")

</div>

if you mean handyman as in physical, your asking the wrong guy. Tech stuff maybe as tech is my thing (I work IT at a school), I have to get off for bed now as I have work tomorrow, but after that I will check out that thread you mentioned, Maybe something I can try when I get time

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [5 November 2024 12:27 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/12 "2024-11-05T12:27:29Z")

</div>

😉

So I wish you a nice and good sleep then. That example is pretty straight forward and should allow you to extend it, making a dashbord 2 with multiple camera views showing you your RTSP streams (as well as others if you have)

---

<div class="post-metadata">

**Author:** ![no\_mpimpi](https://avatars.discourse-cdn.com/v4/letter/n/f14d63/32.png) [@no\_mpimpi](https://discourse.nodered.org/u/no_mpimpi)\
**Post date:** [5 November 2024 17:47 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/13 "2024-11-05T17:47:37Z")

</div>

Hello @krambriw, thank you for that exciting link!

I pasted the flow, and discovered that this is actually all done with ... I want to say css? or XML?

I increasingly get the feeling that dashboard-2 needs you to be able to code in a design language like that. I don't mean this statement as a criticism; rather, I'm trying to manage my expectations in terms of what I'll be able to do, and how quickly.

Is that the path forward? Is learning that markup language essential if I want to do stuff with dashboard-2?

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [5 November 2024 17:59 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/14 "2024-11-05T17:59:56Z")

</div>

I'm not sure about the path forward. I just started to look into the possibilities to show all kind of media in the dashboard-2 since I had a nice working piece for the dashboard-1

I like simple straight forward solutions and with the kind help from @Steve-Mcl there is now a little embryo to a template node that seems to work pretty well already. In a few minutes I have something to show, pretty interesting, not the most beatiful layout yet but it works, showing various source types like mp4, http, m3u8 and others in a couple of frames. Easy to change to configure for your own private cameras. I just need to learn more about how all this can be put into a nice layout

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 November 2024 18:06 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/15 "2024-11-05T18:06:42Z")

</div>

Take pen and paper. And don't try to beat Picasso. If there's any outcome it takes only few steps to become the thing.  
But be sure to draw everything for every use case and situation.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [5 November 2024 18:20 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/16 "2024-11-05T18:20:19Z")

</div>

Just a Q&D (Quick & Dirty) mockup (bakery in Paris is closed now, so a bit dark in there)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/955edf2c9e8ffbbe73ad30d645f2f011b2bee06f.jpeg)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc6877bf7e4ba7400f1b6bf3272186e43f19b821.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [5 November 2024 18:21 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/17 "2024-11-05T18:21:18Z")

</div>

Too many chars in the flow...need to create a file instead ☹  
[rtsp\_demo.json](https://discourse.nodered.org/uploads/short-url/1IevsBL458eVcaQs292ih7C8gFK.json) (64.4 KB)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 November 2024 18:57 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/18 "2024-11-05T18:57:18Z")

</div>

> [@no\_mpimpi](#):
>
> At the risk of it sounding like bribery, is there a way for us to contribute financially?

Thanks for the offer. Unless you could send a box full of free time to my house, it won't really make a difference. Only contributions from the community can speed up things, and otherwise it will simply end up in my long backlog...

---

<div class="post-metadata">

**Author:** ![no\_mpimpi](https://avatars.discourse-cdn.com/v4/letter/n/f14d63/32.png) [@no\_mpimpi](https://discourse.nodered.org/u/no_mpimpi)\
**Post date:** [6 November 2024 05:45 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/19 "2024-11-06T05:45:58Z")

</div>

Hi @krambriw,

Yes, I agree with you, and am in the same boat: I need to learn some design code. But for that I will need time, which is in short supply.

---

<div class="post-metadata">

**Author:** ![no\_mpimpi](https://avatars.discourse-cdn.com/v4/letter/n/f14d63/32.png) [@no\_mpimpi](https://discourse.nodered.org/u/no_mpimpi)\
**Post date:** [6 November 2024 05:47 UTC](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876/20 "2024-11-06T05:47:52Z")

</div>

Hi @BartButenaers, I hear you and empathise. I have three fulltime jobs, only one of which pays, sometimes, so yeah, butter scraped over too much bread. I know it will change in time, as it will for you too.

[Next page](https://discourse.nodered.org/t/rtsp-feed-on-dashboard/92876.md?page=2)