How create a dashboard frame with html output from Rasp Pi camera?

[timothym...@gmail.com]

My apologies for asking such a rudimentary question, but I have tried every variation I can think of from the examples given here.  My Pi streams video as html, at a web address that I can view on my local net, using the RPI Web Cam interface software.  No passwords involved in logging in.  I tried using a node red function to embed the html details, but I can't get it to work.  I can't even get a frame to appear on my dashboard, let alone stream video onto it.

Thanks, in advance,

Tim

[Dave C-J]

Hi if you search there are several threads on subjects similar that may help

eg

https://groups.google.com/forum/#!searchin/node-red/embed$20video%7Csort:date/node-red/LqAciW6OHqo/kAZAeu6ZCAAJ

https://groups.google.com/forum/#!searchin/node-red/ip$20cam$20feed%7Csort:date/node-red/K-1ntZpiJkA/rpfz47XKAQAJ

etc

[timothym...@gmail.com]

Thanks Dave.  Yes, I have seen them and tried to follow their examples.  The basic code they show for the template is:

<table width="310" cellpadding="3" cellspacing="0" align="center" style="background-color:#313131;">

    <tr>

        <td>

            <img width="300" height="200" src="http://xxx.xxx.x.xxx:xxxxx/videostream.cgi?loginuse=xxxx;loginpas=xxxx" >

        </td>

    </tr>

</table>

When I use that code, nothing happens,  I don't even see an empty frame on my dashboard.

The http://xxx.xxx.x.xxx I am using may not be all that it needs changing, but there is no login or password.  On my network the video simply streams at http://xxx.xxx.x.xxx on a browser.  So, I am not sure what to do with the code that follows in the above example.  I think I am doing more than that wrong, as there isn't even an empty frame that appears on my dashboard when I drag a frame from the pallet and enter in that code.  Is there something I need to do further?  There are various options within the frame that I don't understand either.

Tim

[Colin Law]

All the stuff in quotes ("http://.....") is the url, if you only need http:ip then just put that in.  Whether an img tag is right for the stream I don't know though.

Colin

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/5d652bf3-e82c-4cca-877d-0a3a2d594c6c%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Bart Butenaers]

Hey Tim,

When I enter the URL of my IP camera directly in the address bar of my Chrome browser, it is nicely displayed by Chrome.

Even when basic credentials are required, by putting them in the URL.  For example:

http://username:password@xxx.xxx.xxx.xxx:yyyy/SnapshotJPEG?Resolution=320x240&Quality=High

However, when I try the same URL in a table (similar to your example) I get a black window:

So the behaviour is a little bit different compared to your case, but it also doesn't work.

When I have a look in the Chrome Developer Tools (tab 'Network') you can see an error:

Seems that credentials embedded in an URL is not possible anymore in Chrome, for security reasons....

Does anybody have a clue how to workaround this???

Bart Butenaers

[Dave C-J]

Did you try iframe instead ?

<iframe src="http://your-machine-address" width="320px" height="240px"> 

[Bart Butenaers]

Dave,

When I use this:

<table width="310" cellpadding="3" cellspacing="0" align="center" style="background-color:#313131;">
    <tr>
        <td>

            <iframe src="http://username:pass...@xxx.xxx.xxx.xxx:yyyy/SnapshotJPEG?Resolution=320x240&ampQuality=High" width="320px" height="240px"></iframe>
        </td>
    </tr>
</table>

Then the image is entirely black (even without a small 'no icon' icon), and I don't see anything about it in my Developer Console (neither a success nor a failure).  Looks like no request has been send to the camera.  Weird ...  Or is the above html snippet not what you mean?

Remarks:

• Here is article describing how different browser respond differently to embedded credentials.
  
• When no credentials are allowed, it is perhaps better to get the image with a HttpRequest node and push it to the img tag (via the template node) ???

[Dave C-J]

Yes that is what I was thinking, bu I don't have such a camera so not easy to test here.

[timothym...@gmail.com]

Let me explain exactly what I am doing, and perhaps someone can tell me what I am doing wrong.

1.  I choose from the palet and function and move it over to the flow area.

2.  I edit the function to insert the code above that is edited to contain the link to my html video source.

3.  I don't hook anything up to the input or output of the function.

4. I deploy the function and go to the dashboard, and expect to see some image or at least a blank frame.

On Tuesday, March 27, 2018 at 4:33:12 PM UTC-5, Dave C-J wrote:

[Walter Kraembring]

Tim, it is always easier to help if you provide your flow ;)

Anyway, I have some cameras I display in the dashboard and the code below works perfectly well in a dashboard template node. Cameras are usb connected to the Pi's but addressed as ip cameras using http requests

Maybe this helps?

<html>

    <center>

    <table border="2" width="25%" height="30%">

    <!-- put the up address of your Pi's in this line: -->

        <tr><!-- Row 1 -->

          <td style="text-align: center"><img src="http://192.168.10.237:8082/" width="500px"/></td>

                <td style="text-align: center"><img src="http://192.168.10.238:8081/" width="500px"/></td>

        <td style="text-align: center"><img src="http://192.168.10.238:8082/" width="500px"/></td>

        </tr>

        <tr><!-- Row 2 -->

        <td style="text-align: center"><img src="http://192.168.10.236:8081/" width="500px"/></td>

        <td style="text-align: center"><img src="http://192.168.10.236:8082/" width="500px"/></td>

        <td style="text-align: center"><img src="http://192.168.10.237:8081/" width="500px"/></td>

        </tr>

        </table>

    </center>

</html>

[Zenofmud]

If you have a function node that has nothing attached to its input, it will never trigger. 

Providing your flow will help (hamburger menu->Export->Clipboard copy and paste that to a reply)

-- 
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
--- 
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/0b4d8748-84bd-4dc2-9809-8a767526f80a%40googlegroups.com.

[Toshi Bass]

For me I enter the ip address into a template node which then feeds into a ui_template node, if I remember correctly that solves the blocked origin issue.

 

 [{"id":"668e3038.f4cb8","type":"ui_template","z":"869383b9.3fcfa","group":"3ebadd64.abb2f2","name":"video feed 192","order":1,"width":"6","height":"4","format":"<!DOCTYPE html>\n    <table width=\"310\" height=\"210\" cellpadding=\"3\" cellspacing=\"0\" align=\"center\" style=\"background-color:#313131\" >\n        <tr>\n            <td> <div ng-bind-html=\"msg.payload\"></div> </td>\n        </tr>\n    </table>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1100,"y":640,"wires":[[]]},{"id":"7bd9f1dd.87d17","type":"template","z":"869383b9.3fcfa","name":"send ip","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"\n<img width=\"300\" height=\"200\" src=\"http://192.168.0.192:8001/?action=stream\">","output":"str","x":908,"y":669,"wires":[["668e3038.f4cb8"]]},{"id":"8c11ff10.9a8ec","type":"template","z":"869383b9.3fcfa","name":"send null","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"\n<img alt=\"Rear Camera Off\">","output":"str","x":911,"y":609,"wires":[["668e3038.f4cb8"]]},{"id":"86abfed1.8df6d","type":"inject","z":"869383b9.3fcfa","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":720,"y":620,"wires":[["8c11ff10.9a8ec"]]},{"id":"d6853d6.c97ebc","type":"inject","z":"869383b9.3fcfa","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":720,"y":680,"wires":[["7bd9f1dd.87d17"]]},{"id":"3ebadd64.abb2f2","type":"ui_group","z":"","name":"Rear cam 192 sm","tab":"42f866bf.8a5ca8","order":17,"disp":false,"width":"6","collapse":false},{"id":"42f866bf.8a5ca8","type":"ui_tab","z":"","name":"Control","icon":"dashboard","order":3}]

[timothym...@gmail.com]

Thank you all for your assistance.  I used the below code, and now I at least see a frame on the dashboard.  I have tried a few variations of the http and haven't had success yet.  I suspect I don't have the correct url for connection, as when I enter 192.168.1.146 it doesn't work.  if I enter that on a web browser, up comes a page with a clickable http link.  When I click that link, it then shows my camera image.  That must mean there is some subdirectory or something that I need to enter.  I will experiment with my web browser and try to sort out getting to the camera video without getting that page I have to click first.  After I click it, it shows the url on my browser url line as 192.168.1.146/http

So perhaps its some variation on that I need to enter to the function code.

Tim

On Wednesday, March 28, 2018 at 6:35:38 AM UTC-5, Toshi Bass wrote:

[Colin Law]

On 28 March 2018 at 17:15, <timothym...@gmail.com> wrote:
> Thank you all for your assistance. I used the below code, and now I at
> least see a frame on the dashboard. I have tried a few variations of the
> http and haven't had success yet. I suspect I don't have the correct url
> for connection, as when I enter 192.168.1.146 it doesn't work. if I enter
> that on a web browser, up comes a page with a clickable http link. When I
> click that link, it then shows my camera image. That must mean there is
> some subdirectory or something that I need to enter. I will experiment with
> my web browser and try to sort out getting to the camera video without
> getting that page I have to click first. After I click it, it shows the url
> on my browser url line as 192.168.1.146/http

In that case that is the url you want, so http://192.168.1.146/http
Type that into your browser url line first just to make sure.

Colin

>
> So perhaps its some variation on that I need to enter to the function code.
>
> Tim
>
> On Wednesday, March 28, 2018 at 6:35:38 AM UTC-5, Toshi Bass wrote:
>>>
>>> For me I enter the ip address into a template node which then feeds into
>>> a ui_template node, if I remember correctly that solves the blocked origin
>>> issue.
>>
>>
>>>
>>>
>>> [{"id":"668e3038.f4cb8","type":"ui_template","z":"869383b9.3fcfa","group":"3ebadd64.abb2f2","name":"video
>>> feed 192","order":1,"width":"6","height":"4","format":"<!DOCTYPE html>\n
>>> <table width=\"310\" height=\"210\" cellpadding=\"3\" cellspacing=\"0\"
>>> align=\"center\" style=\"background-color:#313131\" >\n <tr>\n
>>> <td> <div ng-bind-html=\"msg.payload\"></div> </td>\n </tr>\n
>>> </table>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1100,"y":640,"wires":[[]]},{"id":"7bd9f1dd.87d17","type":"template","z":"869383b9.3fcfa","name":"send
>>> ip","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"\n<img
>>> width=\"300\" height=\"200\"
>>> src=\"http://192.168.0.192:8001/?action=stream\">","output":"str","x":908,"y":669,"wires":[["668e3038.f4cb8"]]},{"id":"8c11ff10.9a8ec","type":"template","z":"869383b9.3fcfa","name":"send
>>> null","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"\n<img
>>> alt=\"Rear Camera
>>> Off\">","output":"str","x":911,"y":609,"wires":[["668e3038.f4cb8"]]},{"id":"86abfed1.8df6d","type":"inject","z":"869383b9.3fcfa","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":720,"y":620,"wires":[["8c11ff10.9a8ec"]]},{"id":"d6853d6.c97ebc","type":"inject","z":"869383b9.3fcfa","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":720,"y":680,"wires":[["7bd9f1dd.87d17"]]},{"id":"3ebadd64.abb2f2","type":"ui_group","z":"","name":"Rear
>>> cam 192
>>> sm","tab":"42f866bf.8a5ca8","order":17,"disp":false,"width":"6","collapse":false},{"id":"42f866bf.8a5ca8","type":"ui_tab","z":"","name":"Control","icon":"dashboard","order":3}]
>

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit

> https://groups.google.com/d/msgid/node-red/5c4179ff-48fe-4305-bdcd-00f5d16b2efd%40googlegroups.com.

[Zenofmud]

Do you really have nothing hooked to the input of the function node? How do you expect it to run?

On Mar 27, 2018, at 9:01 PM, timothym...@gmail.com wrote:

[timothym...@gmail.com]

I do now. It now created a frame on the dashboard. Unfortunately there is a small box with a red x in it. I suspect it's a problem with the URL. I illegally it out exactly the way it appears on my browser, but still no image.

[Zenofmud]

The red X is an issue. Can you paste what you have in the function node

> On Mar 28, 2018, at 2:56 PM, timothym...@gmail.com wrote:
>
> I do now. It now created a frame on the dashboard. Unfortunately there is a small box with a red x in it. I suspect it's a problem with the URL. I illegally it out exactly the way it appears on my browser, but still no image.
>

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

> To post to this group, send an email to node...@googlegroups.com.

> Visit this group at https://groups.google.com/group/node-red.

> To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/dad5826a-d478-4bc2-b52a-c1a079700bfd%40googlegroups.com.

[timothym...@gmail.com]

I am getting this exact same problem.

On Wednesday, March 28, 2018 at 6:35:38 AM UTC-5, Toshi Bass wrote:

[timothym...@gmail.com]

Can anyone suggest any reading resources to help me understand the subject of what the code means within the function that calls up the URL? I can't seem to post any code, my posts keep getting deleted.

[Bart Butenaers]

Hi Tim,

I have tried all the other suggestions in this discussion, but not of them seems to work (anymore).  The manufacturers have secured their browsers, so credentials (username/password) in an url are not allowed anymore in web pages: a.o. no http://username:password@ipaddress anymore.  Which is a good decision after all ...  You can still manually enter those url's manually in their address bar (since that is considered secure), but not inside the content of the page.  

Some articles on the web claim that it can be done by putting the credentials in the http request (as http request headers).  However you cannot simply intercept the http request that an 'img'-tag executes when a new 'src' attribute is being set.  To get arround that, I had to add some more complexity to the template node:

This is what happens:

1. Inject a new message by clicking on the inject node
2. In the change node a username, password, and url are being set in the message
3. The message arrives in the template node:

• On line 21 an ajax call is done to the url (of the IP camera), with username and password in the http headers. 
• As soon as the response arrives (which should include the camera snapshot image) we arrive in the event handler on line 12.  
• There an 'img' tag is dynamically created, with 'src' referring to the image that we have received.  
• And at line 16 the 'img' is put in the table cell with id 'cellId' (which you can find in the html part on line 29).

However, the IF statement on line 12 always fails:

Reason is that my dashboard connects via a secure https connection to my Node-Red flow, and now I want to open in the same session an unsecure http connection to my camera.

So I don't think it is a good a idea to pass the credentials (in any way) to your dashboard.  

Just use a HttpRequest node (where your credentials are 'rather' safe) to get the camera image, and push the image to the 'img' tag on your dashboard.

But anyway, you posted a very intriguing question ;-)  

Bart

[{"id":"72abc50b.3647bc","type":"ui_template","z":"47b91ceb.38a754","group":"16a1f12d.07c69f","name":"Dynamic img src request","order":1,"width":"6","height":"4","format":"<script> \n    (function(scope) {\n        // Handle input messages\n        scope.$watch('msg', function (msg) {\n            if(!msg) {\n                return;\n            }\n            //debugger;\n            var xhr = new XMLHttpRequest();\n            xhr.responseType = 'blob'; //so you can access the response like a normal URL\n            xhr.onreadystatechange = function () {\n                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {\n                    var img = document.createElement('img');\n                    img.src = URL.createObjectURL(xhr.response); //create <img> with src set to the blob\n                    \n                    var cellElement = document.getElementById('cellId');\n                    cellElement.appendChild(img);\n                }\n            };\n            xhr.open('GET', msg.url, true);\n            xhr.setRequestHeader(msg.username, msg.password);\n            xhr.send();\n         }); \n    })(scope); \n</script>\n\n<table width=\"310\" height=\"210\" cellpadding=\"3\" cellspacing=\"0\" align=\"center\" style=\"background-color:#313131\" >\n    <tr>\n        <td id=\"cellId\"></td>\n    </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":750,"y":1860,"wires":[[]]},{"id":"4c90cdbd.5a2d44","type":"change","z":"47b91ceb.38a754","name":"Set url and credentials","rules":[{"t":"set","p":"url","pt":"msg","to":"your_url","tot":"str"},{"t":"set","p":"username","pt":"msg","to":"your_username","tot":"str"},{"t":"set","p":"password","pt":"msg","to":"your_password","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":1860,"wires":[["72abc50b.3647bc"]]},{"id":"402bbd4.61db044","type":"inject","z":"47b91ceb.38a754","name":"Send data","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":1860,"wires":[["4c90cdbd.5a2d44"]]},{"id":"16a1f12d.07c69f","type":"ui_group","z":"","name":"Default","tab":"f136a522.adc2a8","order":1,"disp":true,"width":"6"},{"id":"f136a522.adc2a8","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]

[timothym...@gmail.com]

Does it make any difference that the raspberry Pi camera, using raspi web cam as the software to run it, doesn't require a password or user name?

[Colin Law]

I don't understand.  Has not this post been about how to specify the user name and password? Are you now saying you don't need those at all?

Colin

On 31 March 2018 at 21:04, <timothym...@gmail.com> wrote:

Does it make any difference that the raspberry Pi camera, using raspi web cam as the software to run it, doesn't require a password or user name?

--
http://nodered.org

Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send an email to node...@googlegroups.com.

Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/3f4db981-d74f-472a-bd90-2420617d3078%40googlegroups.com.

[timothym...@gmail.com]

No, as per my first post, there is no password required for rasp Pi web cam.

[timothym...@gmail.com]

Stephen Mann has advised me of a solution he found through a link posted by Dave.  Here is the code:

[{"id":"edf24df7.ab733","type":"ui_template","z":"f5516e25.5a314","group":"7841f917.cb8c28","name":"vid","order":1,"width":"","height":"","format":"<iframe width=\"854\" height=\"480\" src=\"http://192.168.1.131:9090/stream\" frameborder=\"0\" allowfullscreen></iframe>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":270,"y":1900,"wires":[[]]},{"id":"7841f917.cb8c28","type":"ui_group","z":"","name":"Experiments","tab":"d1e721fb.bb9c","disp":true,"width":"6"},{"id":"d1e721fb.bb9c","type":"ui_tab","z":"","name":"Experiments","icon":"dashboard","order":7}]

With modification to my url, it works!

Thanks all, and I hope this post doesn't get deleted.

On Tuesday, March 27, 2018 at 2:06:09 PM UTC-5, timothym...@gmail.com wrote:

My apologies for asking such a rudimentary question, but I have tried every variation I can think of from the examples given here.  My Pi streams video as html, at a web address that I can view on my local net, using the RPI Web Cam interface software.  No passwords involved in logging in.  I tried using a node red function to embed the html details, but I can't get it to work.  I can't even get a frame to appear on my dashboard, let alone stream video onto it.

Thanks, in advance,

Tim