# \[1/2 SOLVED\] How to use \<iframe to resize IP cam stream in the Dashboard?

**URL:** <https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889>\
**Category:** Dashboard\
**Created:** [5 June 2019 20:29 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889 "2019-06-05T20:29:55Z")\
**Posts on this page:** 18\
**Page:** 2

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [8 June 2019 20:21 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/21 "2019-06-08T20:21:44Z")

</div>

> [@krambriw](#):
>
> I'm not really sure what is the exact problem blocking you so kind of guessing here.

The camera I use, has a built-in server. I log in by his IP address, and he asks me login / pass.

 ![servCam](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d5040eae8288a0bd4c93fd2f7af8c926b4fa13d8.jpeg)  
I have access to the parameters of the Cam and the live video (MJPEG).  
 ![videoCam](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/98b97a18c90231f7c6b022fcf555cc0bc90fb2ce.jpeg)  
If I right click on the video: "open the image in a new tab" I get the direct address of the video.  
 ![URLimage](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1e1ee2b841a33a59953d1317dd4677bc27c217ea.jpeg)  
It is this address that I enter in my Template Node to display the video of the cam in the Dashboard.

From what I understood from iframe, is that we can embed a web page in a web page. So I pasted the URL of my video, and I get:  
1 / the login window.  
2 / then, the video of my cam.

Perfect ! BUT I can not adapt this "web page" as for it to enter a widget of 12 wide: there are assenters.  
Now that I am connected to the cam thanks to iframe. If I create another Template with `<img`, for example in a Home page that would gather all the data of the house, I can size this video as small as a thumbnail for example. There is no pixel loss or assenters.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/56520bf799505f7589820c786e432807b079e533.png)  
_Home page : each widget got an icone. Clic on it , open a more complete widget :_  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7d66b6ee70c6c5f9783c6ab665b988c695693752.png)

My question is here: why the iframe can not be resized as img so that it enters any widget width?

---

<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:** [9 June 2019 06:05 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/22 "2019-06-09T06:05:20Z")

</div>

> [@SuperNinja](#):
>
> My question is here: why the iframe can not be resized as img

Searching a bit around with google, you find this is how iframes behave, you can scale the iframe but you can't scale an image inside the iframe it seems. When I change the size of the iframe, what happen is, the image is not scaled but cropped

I think you have to find the url as proposed by @BartButenaers earlier in the thread so that you can use img

320x240

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3a80b3ecbd88dc997ef3384d0e968820d2e20c0a.jpeg)  
640x480  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6b2f0c97244d14c0c483ca798190f699d444bba7.jpeg)

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 June 2019 08:17 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/23 "2019-06-09T08:17:42Z")

</div>

> [@krambriw](#):
>
> you can't scale an image inside the iframe it seems. When I change the size of the iframe, what happen is, the image is not scaled but cropped

Here is a simple and precise answer. I must not insist on iframe anymore. And work on the @BartButenaers solution to display the window of autentification elsewhere in the Flow.

---

<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:** [9 June 2019 09:15 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/24 "2019-06-09T09:15:05Z")

</div>

Hey guys,  
very interesting discussion! Learning a lot from it !

> [@SuperNinja](#):
>
> And work on the @BartButenaers solution to display the window of autentification elsewhere in the Flow.

I assume you have to do it somehow like this:

1. Put your user/name password safely into a message (e.g. in `msg.username` and `msg.password`), using the [node-red-contrib-credentials](https://flows.nodered.org/node/node-red-contrib-credentials) node.
2. Create dynamically an URL that contains this username and password, e.g. via a function node that uses the `msg.username` and `msg.password` from the input message to construct the URL. The function node stores the URL e.g. in the `msg.url` of its output message.
3. Inject that message into your template node
4. In your template node don't use a hardcoded url, but get the url from the `msg.url` using a Mustache expression : `{{url}}`

P.S. I have never used this myself, so perhaps something isn't correct in this theoretical example ...

---

<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:** [9 June 2019 10:12 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/25 "2019-06-09T10:12:28Z")

</div>

I have **NOT** tested it, but here a simple flow to explain what I mean:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dba76cd64eb7fae61c89a69953474f614da18527.png)

```auto
[{"id":"e4ac29f9.97ea68","type":"inject","z":"22de6542.a4c0fa","name":"At startup","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":200,"y":520,"wires":[["4ab46fa2.0fd6f"]]},{"id":"4ab46fa2.0fd6f","type":"credentials","z":"22de6542.a4c0fa","name":"Fill msg.username and msg.password","props":[{"value":"username","type":"msg"},{"value":"password","type":"msg"}],"x":450,"y":520,"wires":[["592e83ef.13f6cc"]]},{"id":"592e83ef.13f6cc","type":"function","z":"22de6542.a4c0fa","name":"Compose msg.url","func":"msg.url = \"http://\" + msg.username + \":\" + msg.password + \"@example.com/some_picture.png\";\ndelete msg.username;\ndelete msg.password;\nreturn msg;\n\n","outputs":1,"noerr":0,"x":730,"y":520,"wires":[["e94387f5.c98138","61931542.ce60bc"]]},{"id":"e94387f5.c98138","type":"debug","z":"22de6542.a4c0fa","name":"Show URL","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"url","x":950,"y":560,"wires":[]},{"id":"61931542.ce60bc","type":"ui_template","z":"22de6542.a4c0fa","group":"2e442781.0c5608","name":"IMG tag using msg.url","order":2,"width":"6","height":"4","format":"<img width=\"16\" height=\"16\" src=\"{{msg.url}}\"/>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":980,"y":520,"wires":[[]]},{"id":"2e442781.0c5608","type":"ui_group","z":"","name":"Hikvision","tab":"4779176.99cd2e8","disp":true,"width":"6","collapse":false},{"id":"4779176.99cd2e8","type":"ui_tab","z":"","name":"Camera","icon":"dashboard","disabled":false,"hidden":false}]

```

**EDIT** : I have changed the template node, because it seems the Mustache expression needs to be `{msg.url}` instead of `{url}` ...

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 June 2019 20:05 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/26 "2019-06-09T20:05:49Z")

</div>

@BartButenaers **Hey, it looks pretty good at all!**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6577a51623ac7a41947fcc6e04a7cad20bc98390.jpeg)  
**And this is the Debug msg.url :**  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/59fe3683cd9bb50260c4aed38637b3bc6acad59d.png)

**This is the Function node :**

```auto
msg.url = "http://192.168.1.5:59331/videostream.cgi?user="+ msg.username + "%26pwd="+ msg.password + "%26resolution=32%26rate=0";

delete msg.username;
delete msg.password;
return msg;

```

Is it normal that we see my credentials in the debug node ?

---

<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:** [9 June 2019 20:17 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/27 "2019-06-09T20:17:05Z")

</div>

Ha,  
nice to hear that you are making progress! 👍👍

> [@SuperNinja](#):
>
> Is it normal that we see my credentials in the debug node ?

I added the `delete` statements, because it has no use to pass the `msg.username` and `msg.password` fields to the dashboard. On the other hand your credentials (both username and password) are also available in the `msg.url`, which is what you are seeing in the debug panel. The `msg.url` is a plain text field, so everybody could read it. But if you remove the debug node and have an ssl connection to your dashboard, then I don't think it is a security risc? I don't know if you can make it more secure than this. Other members on this forum might give you better advise... At least when you export your flow to share here, the credentials shouldn't be in the exported flow (thanks to the node-red-contrib-credentials node)...

At least by removing your popups, the [WAF factor](https://nl.wikipedia.org/wiki/Wife_acceptance_factor) of your dashboard has increased with about 40% 😂

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 June 2019 22:32 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/28 "2019-06-09T22:32:59Z")

</div>

I can be spoken a little fast: when I open the IP address of the Dashboard on my ANDROID smartphone with Chrome, the video does not appear?

 ![InkedScreenshot_20190610-002305_LI](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a93727dff8a1c9639f54e607c9b80409461f9435.jpeg)

While on my WIN10 PC with Chrome, it's ok:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f3b4e4733af4d1bd3bf790714875e47ca34d23a4.jpeg)

the WAF FACTOR took a big hit there! 🤣

---

<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:** [9 June 2019 22:44 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/29 "2019-06-09T22:44:14Z")

</div>

I have no clue about that. Had another Android issue some time ago, and only thing that helped me was [connecting](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=en) my desktop Chrome to my Android Chrome (to have a look at the browser console log ...). Don't know if that kind of stuff is in your comfort zone?

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [10 June 2019 15:40 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/30 "2019-06-10T15:40:05Z")

</div>

> [@BartButenaers](#):
>
> Don't know if that kind of stuff is in your comfort zone?

there it starts to overtake me 😵

> [@SuperNinja](#):
>
> when I open the IP address of the Dashboard on my ANDROID smartphone with Chrome, the video does not appear?

**As soon as I put an iframe, the login window reappears**

 ![andro](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5465538d5a9e37ecd1db5e4e31f25278239838d7.jpeg)  
**and my \<img display correctly .. GGRrr !! it drives me crazy**

 ![ok](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/90170b15dae900dddd83611210b3f968e340c768.jpeg)

**i test on my WIN10 tablet with Chrome : without iframe, it's same issue :**

 ![InkedAnnotation%202019-06-10%20175509_LI](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/010afc9ab55e8ea31d9a0ec1e0c0194918344dd9.jpeg)

I do not understand, it only works on the PC, on which I created these nodes.  
If I connect to Node Red (RPI) from another PC or tablet (with the same address 192.168.1.54:1880), the image does not appear.  
**It is as if the Credentials node is only intended to work on whoever creates it?!**

---

<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:** [10 June 2019 16:48 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/31 "2019-06-10T16:48:18Z")

</div>

Some thoughts... On your win10 tablet:

- Can you navigate yourself to the camera server? I mean when you type manually `http://192.168.1.5:59331/videostream.cgi?user=your_username%26pwd=your_password%26resolution=32%26rate=0` in the address bar of Chrome, does it work then also or does Chrome give you a logon popup?

- When you open Chrome's developer tools, like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/459d6e96c7fad871b066e732ec2f797fe6b67b4d.png)  
In the ' **console**' tab, do you see there any complaints about not being able to access that IP address?

- To make sure that the URL (that your template node in the dashboard uses) is correct, you can go to the ' **network**' tab of your developer tools. There you can see all requests/responses from your browser, and there you should find somewhere your url. In my test case I see _'some\_picture.png_':

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [10 June 2019 19:15 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/32 "2019-06-10T19:15:48Z")

</div>

> [@BartButenaers](#):
>
> does it work then also or does Chrome give you a logon popup?

- On the tablet : if i open the same URL like in Node Red: it's open a "chrome popup"  
 ![sessio%20tabl](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6e9081b8e24fa9affeb031de5739c5befee05209.jpeg)
- then i log in and see the video stream :  
 ![stream%20tabl](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9e36acbf204b54c25e563f067640a74afa05fd7c.jpeg)

> [@BartButenaers](#):
>
> you will see the full url:

- i open the Developpers tools **in the Original Camera Server** :  

- the only thing I see is that the `rate=0` is before the credentials **[EDIT] i modify this in my Flow and ....**

- i open Chromium in RASPBIAN :

---

<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:** [10 June 2019 19:30 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/33 "2019-06-10T19:30:37Z")

</div>

- So your camera server webapp uses the same url, and that works fine. But that URL in the dashboard template widget doesn't work 🤔
- And from the dashboard in Raspbian it was working before via the dashboard, but now it doesn't work anymore ...

Have you already compared (via developer tools) 'Network' tab for the Node-RED dashboard and the 'Network' tab for your camera server webapp. There must be a difference between both requests to your camera server. Perhaps a difference in the '_Request headers_?

And what was the error that you are seeing ??

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [10 June 2019 19:42 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/34 "2019-06-10T19:42:59Z")

</div>

> [@BartButenaers](#):
>
> And from the dashboard in Raspbian it was working before via the dashboard, but now it doesn't work anymore ...

- On Raspbian, I had not tested with your modification that uses the "Credential node". By cons, I know that using iframe, it works everywhere (tablet, Android, Raspbian, etc.)

> [@BartButenaers](#):
>
> Have you already compared (via developer tools) 'Network' tab for the Node-RED dashboard and the 'Network' tab for your camera server webapp.

- Perhaps a new hope ?! :  

- for information : the web app of the Camera :  

What is the use of `%26` in place of `&` which would block the URL?  
**What can you deduce?**

---

<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:** [10 June 2019 20:01 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/35 "2019-06-10T20:01:50Z")

</div>

> [@SuperNinja](#):
>
> What is the use of `%26` in place of `&` which would block the URL?

I thought somebody have written in the past something about that %26, but don't know it anymore. A wild guess is that it was perhaps Steve (@shrickus), but I might be completely wrong ... Don't know if that %26 can mess up everything. But in the ' **type**' column I see that your camera server webapp gets a multipart stream (mjpeg) stream, and the dashboard only gets a html ...

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [10 June 2019 20:11 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/36 "2019-06-10T20:11:59Z")

</div>

- I just updated the chrome from version 74 to version 75 and the image is no longer displayed, in the only place where it worked! (Chrome on Win10 PC).
- The webapp of the Cam still works.
- I tried in EDGE, and I have the same thing: Code 401 / unauthorized
- With only iframe : this is the Developpers tools :  
 ![iframe](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4aa3ab6906600211eefda3f32f30a7494ffcef9d.jpeg)

---

<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:** [10 June 2019 21:08 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/37 "2019-06-10T21:08:03Z")

</div>

Chris,  
What I don't get in the above screenshot: you pass the username and password as query string parameters, but somehow an "_Authorization_" request header variable is added. That variable contains "Basic" followed by : base64 encoded, which means you use basic authentication (i.e. based on username and password):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8cf60e6a889c7093b1ab736147ce69697cd1a3f1.png)

Could it perhaps be that - in case of the 'img' tag - there is **no** such '_Authorization_' request header available, which results in an unauthorized error (because the camera server cannot see the password as a result of this)??

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [11 June 2019 09:50 UTC](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889/38 "2019-06-11T09:50:19Z")

</div>

**There is really a problem of secure connection: [EDIT] it must be resolved because even the iframe does not work on all the browser**

- I just did the test **with iframe** under EDGE win10, and he "can not find the page at the address indicated" ! :  

- While under CHROME win10 & **[EDIT]** CHROMIUM raspbian **with iframe too** , he shows me the window pop up login.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/495b7b88a3291b5e5215b649115f68a1e4180472.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d3a94f019e2e570c55e3ccc60dde4f9f8f369c16.jpeg)

[Previous page](https://discourse.nodered.org/t/1-2-solved-how-to-use-iframe-to-resize-ip-cam-stream-in-the-dashboard/11889.md?page=1)