not sure how many people want to insert live video feeds into their dashboards. but here a simple way to do it.
works on all os that support vlc and firefox , safari or IE
install vlc and its webplugin
then in your dashboard
ie: node-red dashboard > insert template >
just edit the “target” line to match your video feed
ie: target=“rtsp://xxx.xxx.xxx.xxx:554/user=admin&password=admin&channel=1&stream=1.sdp?”
is the rtsp feed from my security system - for your security system it might be slightly different, but if you go to the rtsp section of your DVR, NVR … etc, it usually found under "network section " when you click on RTSP it usually display the format required
<!DOCTYPE html>
<html>
<title>VLC Mozilla plugin test page</title>
<body>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="320"
height="240"
target="rtsp://xxx.xxx.xxx.xxx:554/user=admin&password=admin&channel=1&stream=1.sdp?"
id="vlc" />
<script type="text/javascript">
<!--
var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
//-->
</script>
</body>
</html>
if using freeboard then just use html and insert the above into the datasource
if using Linux based OS when installing vlc also install npapi-vlc this is the web plug-in – on windows and mac the web plugin is included with the installer — but you might need to enable it at install
I am not to sure how jealous you would be if you lived here, it nice lately, and so far we had I think 90 cm of snow and two blizzards, but it was also -20 to - 35 for the last few weeks too. but this week it being quite nice sitting at around 0 to -9 .
just add the the other rtsp url if you are referencing to the google version in the zip is a multi camera version where you add multiple url to the webpage
You know I could only get it to work in an iFrame. Tried everything. The js container was just not sizing, it showed as a bar, not a picture window. I did figure out that you can put files in node-red/public to have them served up.
Hi circuitmaster,
could you kindly post your code you used for this iFrame. I am not so familiar with HTML and CSS and as windows user Linux is for me very incomprehensible.
thanks
I’m strugling with Node Red Dashboard. I’m trying to get stream above button to open gate of my parking lot.
I tried to use the VXG player, but something must be wrong. The plugin is working, because, i can play the bunny video,
when I open the index site from the source folder on my Pi.
Could You send me a nodered source code with example, how to play rtsp stream on the dashboard?
In VLC player I can connect to stream like this: rtsp://xx.xx.xx.xx:554/11
[{"id":"3d6fa582.03d8fa","type":"ui_tab","z":"4ba758bc.b458a8","name":"Home","icon":"dashboard","order":"1"},{"id":"4f45e824.64d678","type":"ui_template","z":"4ba758bc.b458a8","tab":"3d6fa582.03d8fa","name":"vid","group":"","order":1,"format":"<iframe width=\"854\" height=\"480\" src="point to your index.html or multicamera.html " frameborder=\"0\" allowfullscreen></iframe>","storeOutMessages":true,"fwdInMessages":true,"x":324,"y":311,"wires":[[]]}]
I grabbed this from the web quickly, but I believe this should work for you ,as i am using VLC plugin and free board I do not really use node-red dashboard in my project . just edit the multi camera html to point to your camera would be the easiest. then edit the html to have 1 or more cameras to fit your iframe better or what ever you prefer… hope this helps you somewhat
So I did as you wrote, but there seems to be problem with the stream it self. I can play it with VLC on my PC, just by entering rtsp://x.x.x.x/11.
When I use this URL in the source for the plugin, it doesn’t work. Bunny video still plays fine.
Also, it doesn’t work on my phone, which is the main interrest for me.
Do you know about some other options, that I can look into?
I have two cameras, will expand to 4, no more. This is driving me crazy, because I built quite a system inside my house with NodeRed and ESPs.
so when you say copy this file ( below) to the VXplayer folder on your computer rename the extention from TXT to to HTML plus edit the XX.XX.XX.XX to your internal ip of your security camera it does not work … when you go to your rstp section in your security camera DVR that’s the format it wants – rtsp://xx.xx.xx.xx:554/11
what’s the DVR you are using multiplayersexample2.txt (1.4 KB)
This is the section with video settings.
Next to it is what it looks like on the dashboard (Also sometimes it asks for clicking on the link of vxgplayer to start it up, with phone, it says PC ONLY)
yes but on your PC when you copy the above file to your Vxplayer folder on your computer and edit it to your specifics does it play your RTSP stream on your computer using google chrome – as you said it was not working – I am trying to see if your Stream is actually working or not with vxplayer .-- first get it to work with your computer before working about if it working with your phone – what the brand of your DVR-- this is just the video stream not RTSP section of your DVR… as the RTSP usually give example of how to format the RTSP
Downloaded last version of the VxgPlayer, started up mongoose server, that launched website with the player. Bunny video works and my stream not, except in VLC.
I’m still not sure, what do you mean by RTSP section of DVR, because the camera is cheap chinese one, it only has that interface I have shown you on picture.
Only settings for RTSP are these:
HTTP&RTSP
HTTP Port number: 80 (80 or 1024~49151)
RTSP Port: 554 (554 or 1024~49151)
Rtmp: 1935
RTSP Permission check: On Off (Note:Modify the settings, reboot the device)
I also found, from the source code of the camera website, that it uses RTMP:
okay did you try the the html in your VXG player webfolder I posted earlier for your RTSP on your computer- if that did not work try by editing out RTSP and insert RTMP instead:
rtmp://xx.xx.x.xx:1935/flash/11
since VXg support RTMP too…
what the brand and model of the camera then if your not going through a dvr - i assumed you went through a DVR acting as gateway of sorts
VXG worked for me so I assume mostly likely it is how you are formatting it . perhaps you need to access the sub stream instead of the main. like I said first get it working via computer first and VXG player then try it on handheld