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

Dashboard
21

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

servCam
servCam824×570 33.8 KB

I have access to the parameters of the Cam and the live video (MJPEG).
videoCam
videoCam823×570 71.5 KB

If I right click on the video: "open the image in a new tab" I get the direct address of the video.
URLimage
URLimage989×814 58.7 KB

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
image686×809 138 KB

Home page : each widget got an icone. Clic on it , open a more complete widget :
image
image722×956 160 KB

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

22

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
image1920×397 89.6 KB

640x480
image
image1920×750 282 KB

23

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.

24

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

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 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 ...

25

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

image
image.png720×71 19.7 KB 

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

26

@BartButenaers Hey, it looks pretty good at all!

image
image.jpg706×640 117 KB

And this is the Debug msg.url :
image
image.png1105×78 11.3 KB

This is the Function node :

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 ?

27

Ha,
nice to hear that you are making progress! :+1::+1:

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 of your dashboard has increased with about 40% :joy:

28

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
InkedScreenshot_20190610-002305_LI.jpg1080×1920 96.5 KB

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

image
image.jpg684×748 102 KB

the WAF FACTOR took a big hit there! :rofl:

29

I have no clue about that. Had another Android issue some time ago, and only thing that helped me was connecting 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?

30

there it starts to overtake me :dizzy_face:

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

andro
andro531×935 43.6 KB

and my <img display correctly .. GGRrr !! it drives me crazy

ok
ok1080×1920 197 KB

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

InkedAnnotation%202019-06-10%20175509_LI
InkedAnnotation%202019-06-10%20175509_LI1920×1080 138 KB

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?!

31

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
    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':

    image
    image.png792×177 12.6 KB

    When you click on that, you will see the full url:

    image
    image.png917×163 8.01 KB

    Is that URL correct?

32
33
  • So your camera server webapp uses the same url, and that works fine. But that URL in the dashboard template widget doesn't work :thinking:
  • 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 ??

34
  • 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.)

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

35

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 ...

36
  • 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
    iframe.JPG1858×912 141 KB
37

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

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)??

38

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" ! :

    image
    image.png688×701 62.4 KB

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

image
image.png1371×750 59.2 KB

image
image.jpg1268×1005 281 KB