RPi Cam feed on WebIOPi webpage or vice versa

1,358 views
Skip to first unread message

andlinux

unread,
Dec 18, 2013, 12:08:23 PM12/18/13
to web...@googlegroups.com
Hi all,

I have a Raspberry Pi that's running WebIOPi and I use it to open and close the door of the chicken coop
and to control a lamp. So it's a very simple page with just 2 buttons on it, I customized it.
There's also a RPi Camera module connected with the RPi.

Now I have found on the Raspberry Pi forums a new program called RPi Cam Web Interface that shows the live images in the chicken coop,
I can see the video feed on a web browser, just by typing in the IP address and I can control exposure, brightness etc. on that page.

See my example below.


I already asked on the Raspberry Pi forums how I can embed the live feed on the webiopi page
and they helped me to achieve my goal but I'm unable to achieve this.

If I type in 192.168.1.6 in my web browser then I see the RPI Cam page and
if I type in 192.168.1.6:8000 then I see the WebIOPi page.

RPI Cam works with apache but I have no idea what WebIOPi uses ?
Now I already tried to use an Iframe to put the RPI Cam on the WebIOPi page but it's not working,
if it worked then I was able to make a page with only the video feed.
If I do it like below the there comes a "server not found".


<center style="margin-left: 10px; margin-right: 10px; margin-top: 20px;">
<iframe
 src="http://127.0.0.1"
 align="top"
 frameborder="0"
 marginheight="0"
 marginwidth="0"
 scrolling="no"></iframe>
</center>


I tried this also on a second Raspberry Pi because I don't want to mess up my other RPi (the one that is controlling the chicken coop)


Here's my webiopi index.html


<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 100%, user-scalable = no" />
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {

        webiopi().setFunction(0,"out");
        webiopi().setFunction(1,"out");

                var content, button;
                content = $("#content");
                       
        button = webiopi().createGPIOButton(0,"Deur");
                content.append(button); // append button to content div
       
        button = webiopi().createGPIOButton(1,"Licht");
                content.append(button); // append button to content div                      

        webiopi().refreshGPIO(true);   

   
        });
                 </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }
               
                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }
               
                .LOW {
                        background-color: White;
                }
               
                .HIGH {
                        background-color: Green;
                }
        </style>

<center style="margin-left: 10px; margin-right: 10px; margin-top: 20px;">
<iframe
 src="http://127.0.0.1/cam_pic.php"
 align="top"
 frameborder="0"
 marginheight="0"
 marginwidth="0"
 scrolling="no"></iframe>
</center>


</head>
<body>
        <div id="content" align="center"></div>
</body>
</html>



I'm not so good with html and *.js things but I hope somebody can point me in the right direction or has an easy solution.

Here you can find the project even with my posts: http://www.raspberrypi.org/phpBB3/viewtopic.php?f=43&t=63276



Marty Girvan

unread,
Dec 18, 2013, 2:36:49 PM12/18/13
to web...@googlegroups.com


--
You received this message because you are subscribed to the Google Groups "WebIOPi" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webiopi+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.



--
Marty Girvan
509-768-0432



Reply all
Reply to author
Forward
0 new messages