IP Cam Stream on Dashboard

Greetings,

I would like to get the live stream of some IP LAN Cams on my Dashboard.
Models: Foscam D2EP/G2EP.

Is there a simple way for that? maybe as html per template node,HTML Endpoint or something like that?
Perhaps without converting the rtsp stream to a http stream?

I managed to reach the rtsp stream via vlc player but a dont know how to get the stream in the browser without login in IP Cam.

I tried some guides, but didnt manged to get it to work.

Maybe somebody got some experience with that ?

Dearly
Chorum

Hi chorum,

Have a look at this topic: [beta testing] nodes for live streaming mp4 - #337 by kevinGodell
Works amazing for me.

Ok, i will take a look !
thx!

Look into this...

Google for streaming URLs for your camera model... usually some form of URL similar to this (differs for manufacturers)

http://<USER>:<PASS>@<IP>:<PORT>/streaming/channels/102/httppreview

1 Like

How about this one?

https://www.foscam.com/faqs/view.html?id=128

And finally... With the right URL, this should work.

image image

[{"id":"0ef48c29ad4b16a6","type":"image","z":"2b6e4d9a050c41ec","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":660,"y":380,"wires":[]},{"id":"f92f11e175f09a1b","type":"multipart-decoder","z":"2b6e4d9a050c41ec","name":"","ret":"bin","url":"","tls":"","delay":0,"maximum":1000000,"blockSize":1,"x":770,"y":260,"wires":[["40b75f8aeb3bbf7d"]]},{"id":"4e55f0c2bcfae165","type":"ui_template","z":"2b6e4d9a050c41ec","group":"0cebbfaa666ebf0b","name":"Camera View","order":1,"width":"6","height":"5","format":"<!DOCTYPE html>\n<html>\n<style>\n    .img {\n        border: 10px solid #000;\n        border-radius: 8px;\n        padding: 2px;\n        width: 400px;\n    }\n</style>\n\n<center>\n    <table>\n        <tr>\n            <!-- Row 1 -->\n            <td style=\"text-align: center\"><img src=\"data:image/jpg;base64,{{msg.payload}}\" class=img /></td>\n        </tr>\n    </table>\n</center>\n</html>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":780,"y":320,"wires":[[]]},{"id":"40b75f8aeb3bbf7d","type":"base64","z":"2b6e4d9a050c41ec","name":"Encode","action":"","property":"payload","x":540,"y":320,"wires":[["4e55f0c2bcfae165","0ef48c29ad4b16a6"]]},{"id":"e2bc90fecc89d315","type":"inject","z":"2b6e4d9a050c41ec","name":"Start","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":530,"y":160,"wires":[["354e8901779bc4cf"]]},{"id":"354e8901779bc4cf","type":"change","z":"2b6e4d9a050c41ec","name":"Video Stream URL","rules":[{"t":"set","p":"url","pt":"msg","to":"http://<USER>:<PASS>@<IP>:<PORT>/streaming/channels/102/httppreview","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":770,"y":180,"wires":[["f92f11e175f09a1b"]]},{"id":"d93442965502797f","type":"inject","z":"2b6e4d9a050c41ec","name":"Stop stream","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"","topic":"","payload":"true","payloadType":"bool","x":550,"y":200,"wires":[["0edea34b929a6c07"]]},{"id":"0edea34b929a6c07","type":"change","z":"2b6e4d9a050c41ec","name":"","rules":[{"t":"set","p":"stop","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":260,"wires":[["f92f11e175f09a1b"]]},{"id":"0cebbfaa666ebf0b","type":"ui_group","name":"Default","tab":"537543f08c932a5e","order":1,"disp":true,"width":"6","collapse":false},{"id":"537543f08c932a5e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Oh Gunner you are fast :slight_smile:

On Foscam i have a discription for setting the cam to mjpeg stream but i did not get it to work .
I will go on trying...

thanks to u i am a liitle bit further!

I have the mjpeg stream and i can see it on the image preview. but i dont see it on my dashboard.
I simply used your flow and only changed the Video Stream URL.

got it!
now i have to get rid of the latency...

May be you can help me again with one more question.
I want to change the size of the video but then i get scrollbars.

how do i get rid of them while getting a bigger img?

thx for your help!

You have to strike a balance between the dashboard card size and the width: setting in the ui_template through a bit of trial and see. (Image height is automatic and based on image aspect ratio)

Many Thx !!

That was a really great help!

Chorum

faster computer, faster network, wired ethernet.... :grin:

I took FHD Modus 720P Bitrate 1M with Keyframe Distance 100, now its ok.

I cannot change the Hardware factors :frowning:

I have an Sercomm ICamera2 which supports the mjpeg format so I just add an img tag to the UI with a ui_template node. It works great.

HTML Tag

<img src="http://192.168.1.123/img/video.mjpeg">

[{"id":"8b3298d3.d78688","type":"ui_template","z":"205d0e6a.aaefc2","group":"6e9bc142.3a1e5","name":"Cameras HTML Table","order":1,"width":25,"height":10,"format":"<table>\n  <tr>\n    <td>\n      Driveway Camera\n    </td>\n    <td>\n      Garage Camera\n    </td>\n  </tr>\n  <tr>\n    <td>\n      <a target=\"_blank\" href=\"http://192.168.1.123/img/video.mjpeg\">\n        <img src=\"http://192.168.1.123/img/video.mjpeg\">\n      </a>\n    </td>\n    <td>\n      <a target=\"_blank\" href=\"http://192.168.1.122/img/video.mjpeg\">\n        <img src=\"http://192.168.1.122/img/video.mjpeg\">\n      </a>\n    </td>\n  </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":140,"y":120,"wires":[[]]},{"id":"6e9bc142.3a1e5","type":"ui_group","z":"","name":"Cameras","tab":"d9da5824.9ce028","order":1,"disp":false,"width":25,"collapse":false},{"id":"d9da5824.9ce028","type":"ui_tab","z":"","name":"Cameras","icon":"dashboard","order":6,"disabled":false,"hidden":false}]
1 Like

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