Sniffers
Posts: 2
Joined: Sun Dec 15, 2013 1:35 pm

Re: RPi Cam Web Interface

Sun Dec 15, 2013 7:00 pm

Don,t want to offend anyone but i like the webpage fron honsolgen! I,ve seen the page where he got it from but my deutch is not so super. Is it running completly on your pi? Or just the pictures from it? Any document how to install it? I,ve a super view on the belgian coast and want to share it with all off you!

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Sun Dec 15, 2013 7:26 pm

silvanmelchior wrote:Sorry, I forgot to update the installer itself so that it is able to replace the old files, if you download and run the installer now, it should work:

Code: Select all

rm RPi_Cam_Browser_Control_Installer.sh
wget http://grustu.ch/share/rpi_cam/RPi_Cam_Browser_Control_Installer.sh
chmod u+x RPi_Cam_Browser_Control_Installer.sh
./RPi_Cam_Browser_Control_Installer.sh
Thanks, works like a charm. I'll see if I can find the time this week to store the settings in a cookie and have them equalized between the page and the camera when the camera is restarted or the page reloaded. Thanks again!

User avatar
CopterRichie
Posts: 131
Joined: Tue Mar 26, 2013 3:14 am
Location: Los Angeles CA.

Re: RPi Cam Web Interface

Sun Dec 15, 2013 10:01 pm

silvanmelchior wrote:Update: It's now possible to halt and restart the process from the website. So you can release the camera temporarily for raspistill/raspivid. To get the update, just run the installer again.
How do we go about upgrading to this latest revision?

thank you.

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Sun Dec 15, 2013 10:05 pm

Copy and paste the code in the post above line for line into the command line.

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Sun Dec 15, 2013 10:53 pm

@silvanmelchior: If I use the -pa option in /etc/rc.local, how do I start the camera? Can I do that with a command from the webpage, if so which command? I can implement it myself (and will post here) but I'm not sure how to do it.

User avatar
Mettauk
Posts: 235
Joined: Mon Dec 10, 2012 12:40 pm
Location: Zarg

Re: RPi Cam Web Interface

Sun Dec 15, 2013 11:45 pm

This is brilliant. Even works on Win XP with IE with the IR camera version that flickers until the exposure is set to "night" then it's very clear. (indoor lighting)

Would be good to find a way to start and stop the process on the fly.
sudo killall raspimjpeg stops it but restarting with
sudo /etc/rc.local gives the message...

My IP address is 192.168.x.x
mkdir: cannot create directory `/dev/shm/mjpeg': File exists

As a separate issue it would be good to password protect access especially when opening to external ports!
As humans we have been the same for a very very long time, technology changes how we do... not who we are as people.

andlinux
Posts: 18
Joined: Fri Dec 13, 2013 12:08 pm
Location: Belgium

Re: RPi Cam Web Interface

Mon Dec 16, 2013 6:35 am

I just tried watching the stream on my Android phone and it's working in the stock android browser and also in the Dolphin browser but it's taking some time when I see the video feed.

EDIT: Is it possible that the program crashed, I don't see it anymore in my process list and when I give "top" as command then I don't see it ? If I take a look on the page then there's a black screen.

User avatar
KLL
Posts: 1453
Joined: Wed Jan 09, 2013 3:05 pm
Location: thailand
Contact: Website

Re: RPi Cam Web Interface

Mon Dec 16, 2013 8:12 am

jbeale wrote: This is the instructions for building RaspiMJPEG from source: http://www.raspberrypi.org/phpBB3/viewt ... 43&t=61771
question: when i use that
./buildme
from there, it makes all ( userland) or only /opt/vc/bin/raspimjpeg ?

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Mon Dec 16, 2013 11:20 am

This seems very stable. I left RPi Cam running over night in Chrome (W7 64) @ 1280x720 and it was still running in the morning, 12 hours later.

Then I experimented a bit and got it almost completely smooth @ 640x380; don't know how to measure the exact frame rate but I stripped out everything not really necessary for showing the images.

In /var/www you need to changes the contents of (make a backup first):
index.html to:

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <title>RPi Cam Control</title>
    <script src="script.js"></script>
  </head>
  <body onload="setTimeout('init();', 100);">
    <center>
      <h1>RPi Cam Control</h1>
      <div><img id="mjpeg_dest"></div>
  </body>
</html>
and script.js to:

Code: Select all

//
// MJPEG
//
var mjpeg_img;

function reload_img () {
  mjpeg_img.src = "cam_pic.php";
}

//
// Init
//
function init() {

  // mjpeg
  mjpeg_img = document.getElementById("mjpeg_dest");
  mjpeg_img.onload = reload_img;
  reload_img();

}
Of course you lose the buttons.

andlinux
Posts: 18
Joined: Fri Dec 13, 2013 12:08 pm
Location: Belgium

Re: RPi Cam Web Interface

Mon Dec 16, 2013 11:25 am

I want to put the video feed on another webpage (also running on that RPi) but I'm not sure how to do it.

txt3rob
Posts: 365
Joined: Sat Aug 11, 2012 3:45 pm
Contact: Website

Re: RPi Cam Web Interface

Mon Dec 16, 2013 12:59 pm

Mettauk wrote:This is brilliant. Even works on Win XP with IE with the IR camera version that flickers until the exposure is set to "night" then it's very clear. (indoor lighting)

Would be good to find a way to start and stop the process on the fly.
sudo killall raspimjpeg stops it but restarting with
sudo /etc/rc.local gives the message...

My IP address is 192.168.x.x
mkdir: cannot create directory `/dev/shm/mjpeg': File exists

As a separate issue it would be good to password protect access especially when opening to external ports!
i get the same
The Raspberry Pi Hell Guy - Random Ramblings to assist me and others.
http://raspberrypihell.blogspot.com
My Github - http:/www.github.com/random-robbie/
http://www.smspi.co.uk - send free uk sms via your raspberry pi from here

User avatar
CopterRichie
Posts: 131
Joined: Tue Mar 26, 2013 3:14 am
Location: Los Angeles CA.

Re: RPi Cam Web Interface

Mon Dec 16, 2013 3:05 pm

I just updated and it is working fantastically. I really love the way this is progressing. May I ask please for an example of how to configure the Record Image code segment to do Time lapse?

Thank you.

silvanmelchior
Posts: 76
Joined: Mon Nov 25, 2013 5:56 pm

Re: RPi Cam Web Interface

Mon Dec 16, 2013 5:40 pm

I made a completely new installer, now you can change the autostart behaviour very easy and remove the whole interface if you don't want it anymore. My first post is updated, so you can get all information there, just run the instructions again to update everything. Additionally the settings for the camera aren't shown anymore because these were just default-values.

@CopterRichie: You have to add the command setInterval("send_cmd('im');", 1000) for example to make a picture every second to the javascript-code

@andlinux: Check out the instruction in my updated first post

@KLL: Yes, it build's everything, but I don't want to delete the other files, maybe I'm going to do more modifications there sometimes.

@txt3rob & Mettauk: It's now possible to start and stop the interface with the installer, check out the instruction in my updated first post

User avatar
CopterRichie
Posts: 131
Joined: Tue Mar 26, 2013 3:14 am
Location: Los Angeles CA.

Re: RPi Cam Web Interface

Mon Dec 16, 2013 5:44 pm

silvanmelchior wrote:
@CopterRichie: You have to add the command setInterval("send_cmd('im');", 1000) for example to make a picture every second to the javascript-code
Thank you, Very much appreciated.

andlinux
Posts: 18
Joined: Fri Dec 13, 2013 12:08 pm
Location: Belgium

Re: RPi Cam Web Interface

Mon Dec 16, 2013 8:42 pm

@silvanmelchior thanks for the info, I hope I can make this work ;)

Edit: I'm trying to make this work but I'm already stuck.
I removed all the files in /var/www except
- cam_pic.php
- FIFO
- script_min.js

then I copied my index.html file to /var/www
and added

<script src="script_min.js"></script>
onload="setTimeout('init();', 100);"
<img id="mjpeg_dest">

to my index.html file.
I also copied the webiopi.js file to /var/www
and I changed the config file of webiopi.

Config file of webiopi:

Code: Select all

[GPIO]
# Initialize following GPIOs with given function and optional value
# This is used during WebIOPi start process
#0 = OUT 
#1 = OUT 
#24 = OUT 0
#25 = OUT 1

#------------------------------------------------------------------------#

[~GPIO]
# Reset following GPIOs with given function and optional value
# This is used at the end of WebIOPi stop process
#21 = IN
#23 = IN
#24 = IN
#25 = OUT 0

#------------------------------------------------------------------------#

[SCRIPTS]
# Load custom scripts syntax :
# name = sourcefile
#   each sourcefile may have setup, loop and destroy functions and macros
#myscript = /home/pi/webiopi/examples/scripts/macros/script.py

#------------------------------------------------------------------------#

[HTTP]
# HTTP Server configuration
enabled = true
port = 8000

# File containing sha256(base64("user:password"))
# Use webiopi-passwd command to generate it
passwd-file = /etc/webiopi/passwd

# Use doc-root to change default HTML and resource files location
#doc-root = /home/pi/webiopi/examples/scripts/macros
doc-root = /var/www/index.html

# Use welcome-file to change the default "Welcome" file
welcome-file = index.html

#------------------------------------------------------------------------#

[COAP]
# CoAP Server configuration
enabled = true
port = 5683
# Enable CoAP multicast
multicast = true

#------------------------------------------------------------------------#

[DEVICES]
# Device configuration syntax:
# name = device [args...]
#   name   : used in the URL mapping
#   device : device name
#   args   : (optional) see device driver doc
# If enabled, devices configured here are mapped on REST API /device/name
# Devices are also accessible in custom scripts using deviceInstance(name)
# See device driver doc for methods and URI scheme available

# Raspberry native UART on GPIO, uncomment to enable
# Don't forget to remove console on ttyAMA0 in /boot/cmdline.txt
# And also disable getty on ttyAMA0 in /etc/inittab
#serial0 = Serial device:ttyAMA0 baudrate:9600

# USB serial adapters
#usb0 = Serial device:ttyUSB0 baudrate:9600
#usb1 = Serial device:ttyACM0 baudrate:9600

#temp0 = TMP102
#temp1 = TMP102 slave:0x49
#temp2 = DS18B20
#temp3 = DS18B20 slave:28-0000049bc218

#bmp = BMP085

#gpio0 = PCF8574
#gpio1 = PCF8574 slave:0x21

#light0 = TSL2561T
#light1 = TSL2561T slave:0b0101001

#gpio0 = MCP23017
#gpio1 = MCP23017 slave:0x21
#gpio2 = MCP23017 slave:0x22

#pwm0 = PCA9685
#pwm1 = PCA9685 slave:0x41

#adc = MCP3008
#dac = MCP4922 chip:1

#------------------------------------------------------------------------#

[REST]
# By default, REST API allows to GET/POST on all GPIOs
# Use gpio-export to limit GPIO available through REST API  
#gpio-export = 21, 23, 24, 25

# Uncomment to forbid changing GPIO values 
#gpio-post-value = false

# Uncomment to forbid changing GPIO functions 
#gpio-post-function = false 

# Uncomment to disable automatic device mapping
#device-mapping = false

#------------------------------------------------------------------------#

[ROUTES]
# Custom REST API route syntax :
# source = destination
#   source      : URL to route
#   destination : Resulting URL
# Adding routes allows to simplify access with Human comprehensive URLs

# In the next example with have the bedroom light connected to GPIO 25
# and a temperature sensor named temp2, defined in [DEVICES] section
#  - GET  /bedroom/light       => GET  /GPIO/25/value, returns the light state
#  - POST /bedroom/light/0     => POST /GPIO/25/value/0, turn off the light
#  - POST /bedroom/light/1	   => POST /GPIO/25/value/1, turn on the light
#  - GET  /bedroom/temperature => GET  /devices/temp2/temperature/c, returns the temperature in celsius
#/bedroom/light = /GPIO/25/value
#/bedroom/temperature = /devices/temp2/temperature/c

#/livingroom/light = /devices/expander0/0
#/livingroom/brightness = /devices/adc/0/float
#/livingroom/temperature = /devices/temp0/temperature/c

#/weather/temperature = /devices/bmp/temperature/c
#/weather/pressure = /devices/bmp/pressure/hpa
index.html file:

Code: Select all

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        <script src="script_min.js"></script>
        
        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 
 <img id="mjpeg_dest">
 align="top"
 frameborder="0"
 marginheight="0"
 marginwidth="0"
 scrolling="no"></iframe>
</center>





</head>
<body>
         onload="setTimeout('init();', 100);" 
        <div id="content" align="center"></div>
</body>
</html>


The result:

Image

So what did I wrong ?
Attachments
result.jpg
result.jpg (38.75 KiB) Viewed 13037 times

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Tue Dec 17, 2013 1:37 pm

Quick look:
<iframe
<img id="mjpeg_dest">
align="top"
frameborder="0"
marginheight="0"
marginwidth="0"
scrolling="no"></iframe>
Should be:
<iframe
align="top"
frameborder="0"
marginheight="0"
marginwidth="0"
scrolling="no"></iframe>
and
<body>
onload="setTimeout('init();', 100);"
<div id="content" align="center"></div>
</body>
Should be:
<body onload="setTimeout('init();', 100);">
<img id="mjpeg_dest">
<div id="content" align="center"></div>
</body>

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Tue Dec 17, 2013 1:39 pm

Since the last update my Pi gets unresponsive after a few hours when running the web interface and stop/start it a few times to take a picture or a video. Have to power cycle. I configured is as 'loading, but not starting'.

yoshiwa
Posts: 9
Joined: Mon Dec 09, 2013 6:07 pm

Re: RPi Cam Web Interface

Tue Dec 17, 2013 2:10 pm

First of all congratz on this nice work !
It is a very good step towards the use of the Pi camera for a multitude of usages !

I myself want to record video for specific purposes, which forces me to define the shutter time. Previously i did this with the -ss 1000 command in raspivid. Would this be possible with the interface you provide aswell? (maybe i could add a line somewhere in the code to just do this as a standard , dont need a dropdown menu or something).

Any advice is greatly appreciated :)

andlinux
Posts: 18
Joined: Fri Dec 13, 2013 12:08 pm
Location: Belgium

Re: RPi Cam Web Interface

Tue Dec 17, 2013 2:35 pm

@poing Thanks for correcting my mistakes, I changed it but it's still not working.
No video feed on that page nor any buttons :(
Didn't know it was so difficult to embed this with another page but hey I'm a noob with html etc. ;)

poing
Posts: 1131
Joined: Thu Mar 08, 2012 3:32 pm

Re: RPi Cam Web Interface

Tue Dec 17, 2013 3:27 pm

I'd revert back to what you got (hope you made a backup) and then look at the 9th post of this page. That's the simplest html to make this work.

Keep you existing page as is, only change the body tag <body> to <body onload="setTimeout('init();', 100);">. Then below the body tag, but outside the brackets and before the closing tag </body>, put in <div><img id="mjpeg_dest"></div>. And add <script src="script.js"></script> between <head> and </head>; that seemed correct as you did it.

Note: never screw up the brackets (<...>) or a quote (') or a double quote (") for then it seriously will never work anymore.

andlinux
Posts: 18
Joined: Fri Dec 13, 2013 12:08 pm
Location: Belgium

Re: RPi Cam Web Interface

Tue Dec 17, 2013 5:33 pm

I'm trying but it's not working. I've made maybe some progress.
I took a look at post number 9 and compared it with what I had and made some changes etc.

Now I've got only this, it's black with no picture:
Image

This is the index.html file at the moment

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <title>RPi Cam Control</title>
    <script src="script.js"></script> 
</head>
    <center>
      <h1>RPi Cam Control</h1>
  </body>
</html>


<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, 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>

</head>
<body onload="setTimeout('init();', 100);">
<div><img id="mjpeg_dest"></div>
<div id="content" align="center"></div>
</body>
</html>
I've been searching all day without a result :(
Btw I'm doing this on another RPi so I don't mess up the one that's running
and if there's somebody who wants to take a look at it just let me now, then I will open the ports in my router so you can access the RPi.
Attachments
rpicam.jpg
rpicam.jpg (17.23 KiB) Viewed 12927 times

User avatar
jbeale
Posts: 3482
Joined: Tue Nov 22, 2011 11:51 pm
Contact: Website

Re: RPi Cam Web Interface

Tue Dec 17, 2013 5:44 pm

for one thing, a web page should have only one <html> ... </html> tag set. I believe anything after the first </html> seen is ignored. You seem to be trying to put several different web pages into one index.html file, if I understand your code correctly.
In particular that <body onload="setTimeout('init();', 100);"> section is after the first </html> so it is in the "ignored" part of your file.

User avatar
jbeale
Posts: 3482
Joined: Tue Nov 22, 2011 11:51 pm
Contact: Website

Re: RPi Cam Web Interface

Tue Dec 17, 2013 6:01 pm

The new updated version is even better, I really like the button to turn the camera on/off. When it is off, sure enough I can use "raspistill" from another program. However I notice that even when the camera has been turned off from the webpage, and I close out the webpage, 'top' reports that the "raspimjpeg" program is still consuming 34% of my R-Pi CPU while it is not using the camera, and presumably doing nothing more than waiting for another command. Is there a way to change that?

stefan.knight
Posts: 24
Joined: Tue Dec 17, 2013 7:43 pm

Re: RPi Cam Web Interface

Tue Dec 17, 2013 7:48 pm

Can someone confirm if there're getting momentarily freeze when constant motion is occuring in front of the camera from the web page view? Wondering if this is related to MJPEG generation, network or browser rendering and how those can be improved to get smooth rendering.

User avatar
jbeale
Posts: 3482
Joined: Tue Nov 22, 2011 11:51 pm
Contact: Website

Re: RPi Cam Web Interface

Wed Dec 18, 2013 2:11 am

From the R-Pi side of things it doesn't know whether there is any motion or not. But if you have a more detailed scene you might have a higher bitrate, and your network might be having trouble (especially if it's wifi). However my guess is it's just a perception thing. If you don't have motion, you won't notice that some frames are being dropped all the time, you just notice it when things are changing. You could try lowering the preview resolution, and/or lowering JPEG quality (increased compression).

Return to “Camera board”