# IP Cam Stream on Dashboard

**URL:** <https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584>\
**Category:** Dashboard\
**Created:** [3 September 2021 13:39 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584 "2021-09-03T13:39:40Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [3 September 2021 13:39 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/1 "2021-09-03T13:39:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [3 September 2021 14:11 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/2 "2021-09-03T14:11:05Z")

</div>

Hi chorum,

Have a look at this topic: [[beta testing] nodes for live streaming mp4 - #337 by kevinGodell](https://discourse.nodered.org/t/beta-testing-nodes-for-live-streaming-mp4/33743/337)  
Works amazing for me.

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 September 2021 05:14 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/3 "2021-09-06T05:14:04Z")

</div>

Ok, i will take a look !  
thx!

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [6 September 2021 07:11 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/4 "2021-09-06T07:11:53Z")

</div>

Look into this...

> **[GitHub - bartbutenaers/node-red-contrib-multipart-stream-decoder: Node-Red...](https://github.com/bartbutenaers/node-red-contrib-multipart-stream-decoder)**
>
> Node-Red node for decoding multipart streams over http - GitHub - bartbutenaers/node-red-contrib-multipart-stream-decoder: Node-Red node for decoding multipart streams over http

> [@Chorum](#):
>
> but a dont know how to get the stream in the browser without login in IP Cam.

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`

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [6 September 2021 07:13 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/5 "2021-09-06T07:13:17Z")

</div>

> [@Chorum](#):
>
> I tried some guides, but didnt manged to get it to work.

How about this one?

[https://www.foscam.com/faqs/view.html?id=128](https://www.foscam.com/faqs/view.html?id=128)

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [6 September 2021 07:25 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/6 "2021-09-06T07:25:41Z")

</div>

> [@Chorum](#):
>
> I would like to get the live stream of some IP LAN Cams on my Dashboard.

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9fba1c127ce32da72ec9e5ebca7dd1720c5a3b58.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf92a3f7723fd549515ca5ea422a2f2be15783e8.png)

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 September 2021 07:42 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/7 "2021-09-06T07:42:01Z")

</div>

Oh Gunner you are fast 🙂

On [Foscam](https://www.foscam.com/faqs/view.html?id=128) i have a discription for setting the cam to mjpeg stream but i did not get it to work .  
I will go on trying...

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 September 2021 08:19 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/8 "2021-09-06T08:19:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 September 2021 08:21 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/9 "2021-09-06T08:21:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 September 2021 08:33 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/10 "2021-09-06T08:33:59Z")

</div>

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.

 ![Cam test](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bba43e2f21c927565674362c33d4d57c1211ba03.jpeg)

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

thx for your help!

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [6 September 2021 09:19 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/11 "2021-09-06T09:19:53Z")

</div>

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)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/976b917af44691d985b6bdb51d6da7f3485c5a94.png)

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 September 2021 09:30 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/12 "2021-09-06T09:30:49Z")

</div>

Many Thx !!

That was a really great help!

Chorum

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 September 2021 09:58 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/13 "2021-09-06T09:58:29Z")

</div>

> [@Chorum](#):
>
> now i have to get rid of the latency...

faster computer, faster network, wired ethernet.... 😁

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [7 September 2021 06:33 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/14 "2021-09-07T06:33:50Z")

</div>

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

I cannot change the Hardware factors ☹

---

<div class="post-metadata">

**Author:** ![mrdvt92](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrdvt92/32/33122_2.png) [@mrdvt92](https://discourse.nodered.org/u/mrdvt92)\
**Post date:** [8 September 2021 12:40 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/15 "2021-09-08T12:40:18Z")

</div>

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">`

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 September 2021 12:40 UTC](https://discourse.nodered.org/t/ip-cam-stream-on-dashboard/50584/16 "2021-09-22T12:40:25Z")

</div>

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