Howto insert LIVE stream video ( RTSP and other) into your dashboards

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

sample image; node-red dashboard

sample image: freeboard

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

3 Likes

small update for those who wish to stream to chrome or if you want to add to handheld devices apps. as it is html5 based

download this and place it it in your webserver that is for your dashboard
https://www.videoexpertsgroup.com/nacl_player_api/vxgplayer-1.8.23.zip

it’s a little slower than the VLC plug-in to load as it buffers the stream a bit.
here’s an example: dashboard insert in the chrome browser;

examples are in the zip file.

Nice! I’m jealous of your snow :slight_smile:

We don’t get much in North Wales.

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

How are you serving up the .js plugin? I have apache running, it works in browser but on node dashboard. Any ideas?

should work as described above- just follow example above

node-red dashboard > insert template >

  <!DOCTYPE html>
 INSERT security camera webpage source code  for VLC's or Chrome Media player's

it worked form me though I use the vlc version but chrome version does work too

perhaps you need to point to where your js is in the source code -

    ie <script type="text/javascript" src="http://xxx.xxx.xxx.xxx/vxgplayer-1.8.23.min.js"></script>

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

Hello,

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

Thank you, very much.

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

Hello,

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.

Thank you :slight_smile:

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)

Thank you.

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

Hello,

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:

<embed src="swfs/StrobeMediaPlayback.swf" width="1280" height="720" quality="high" bgcolor="#000000" name="StrobeMediaPlayback" allowfullscreen="true" pluginspage="http://www.adobe.com/go/getflashplayer" flashvars="&amp;src=rtmp://xx.xx.x.xx:1935/flash/11:xx:xx&amp;autoHideControlBar=true&amp;streamType=live&amp;autoPlay=true" type="application/x-shockwave-flash">

However, I did found the format of the stream using vlc:
image

Thanks for the support :slight_smile: :ok_hand:

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

Yes, i did try that as I quoted above, i launched mongoose server for that, as player’s manual said.

sorry but I still think it how you are formatting it- - but with out camera brand and model it hard to tell how you need to format it…

example for me I edit the above html I provided to this

 <div id="vxg_media_player1" class="vxgplayer" width="300" height="240" url="rtsp://192.168.168.38:554/user=admin&password=admin&channel=4&stream=1.sdp?" aspect-ratio latency="3000000" autostart controls avsync debug></div>

and it outputs this

or entering in the correct ip in the demo index page
produces this

Hi,

Only info I can provide is Ebay page:
http://www.ebay.com/itm/HD1-0MP-720P-Wireless-WIFI-IP-Camera-Outdoor-Network-ONVIF-Night-Vision-Security-/301572748864

Thanks