RPi Cam Web Interface

[robm99]

Many thanks, that works perfectly to add a "Timelapse" capability.

Not really tested, as I have no camera running at the moment, but this should work. Just paste the code somewhere in the page, but not inside another tag:

Code: Select all

<script>
var lapsrunning=0;
function setlaps(){
	if(lapsrunning==0){
		document.getElementById('startstopLaps').innerHTML='Stop Timelapse';
		var e=document.getElementById("lapsInterval");
		lapsrunning=e.options[e.selectedIndex].value;
		lapsrunning=parseInt(lapsrunning)*1000;
		runlaps();
	}else{
		document.getElementById('startstopLaps').innerHTML='Start Timelapse';
		lapsrunning=0;
	}
}
function runlaps(){
	if(lapsrunning>0){
		send_cmd('im');
		setTimeout("runlaps()",lapsrunning);
	}
}
</script>

<button type='button' id='startstopLaps' onClick='setlaps()';>Start TimeLapse</button>
 with
<select id='lapsInterval'>
	<option value='1'>1</option>
	<option value='3'>3</option>
	<option value='5'>5</option>
	<option value='10'>10</option>
	<option value='30'>30</option>
	<option value='60'>60</option>
</select>
 second interval<br>

[cica]

Hi-

I'm very excited by this program. I do have one noobie question. Is the officical video4linux driver required/recommended/not used with this application?

Thanks,
-Tom

[poing]

not used.

[poing]

Many thanks, that works perfectly to add a "Timelapse" capability.

Great!
Here's an improved (and tested) version with auto stop after a configurable time with a visible countdown timer. I pasted it between 'Download' and 'Settings' (edit: replaced a copy error):

Code: Select all

<script>
var lapsrunning=0;
var autoStopTime=0;
var lapsTimer;
var stopTimer;
function setlaps(){
   if(lapsrunning==0){
      document.getElementById('startstopLaps').innerHTML='Stop Timelapse';
      var e=document.getElementById("lapsInterval");
      lapsrunning=e.options[e.selectedIndex].value;
      lapsrunning=parseFloat(lapsrunning)*1000;
      e=document.getElementById("autostop");
      var h=e.options[e.selectedIndex].value;
      autoStopTime=parseFloat(h)*1000*60;
      runlaps();
   }else{
      document.getElementById('startstopLaps').innerHTML='Start Timelapse';
      lapsrunning=0;
   }
}
function runlaps(){
   if(lapsrunning>0){
      send_cmd('im');
      lapsTimer=setTimeout("runlaps()",lapsrunning);
      if(document.getElementById('lapscheck').checked==true){
         var e=document.getElementById("lapsInterval");
         var f=e.options[e.selectedIndex].value;
         autoStopTime-=parseFloat(f)*1000;
         document.getElementById('test').innerHTML=(autoStopTime/1000/60).toFixed(2).toString();
         if(autoStopTime<=0){
            document.getElementById('startstopLaps').innerHTML='Start Timelapse';
            lapsrunning=0;
         }
      }
   }
}


function setStop(){
   if(document.getElementById('lapscheck').checked==true){
      e=document.getElementById("autostop");
      var h=e.options[e.selectedIndex].value;
      autoStopTime=parseFloat(h)*1000*60
      document.getElementById('test').innerHTML=(autoStopTime/1000/60).toFixed(2).toString();
      //stopTimer=setTimeout("lapsrunning=0",autoStopTime);
   }else{
      clearTimeout(stopTimer);
   }
}
function calcStop(){
   var e=document.getElementById("lapsInterval");
   var f=e.options[e.selectedIndex].value;
   f=parseFloat(f)*1000;
   e=document.getElementById("autostop");
   var h=e.options[e.selectedIndex].value;
   h=parseFloat(h)*1000*60;
   var x=h/f;
   document.getElementById('numframes').innerHTML=x.toString();
   x=x/30;
   document.getElementById('vidseconds').innerHTML=(x.toFixed(2)).toString();
   setStop();
}



</script>

<button type='button' id='startstopLaps' onClick='setlaps()';>Start TimeLapse</button>
 with
<select id='lapsInterval' onChange='calcStop()'>
   <option value='2.5'>2.5</option>
   <option value='5'>5</option>
   <option value='10'>10</option>
   <option value='30'>30</option>
   <option value='60'>60</option>
</select>
 second interval<br>
<input type='checkbox' id='lapscheck' onClick='setStop();'> Auto stop after
<select id='autostop' onChange='calcStop()'>
   <option value='1'>1</option>
   <option value='5'>5</option>
   <option value='10'>10</option>
   <option value='30'>30</option>
   <option value='60'>60</option>
   <option value='120'>120</option>
   <option value='180'>180</option>
   <option value='240'>240</option>
   <option value='300'>300</option>
   <option value='360'>360</option>
</select>
    minutes for <span id='numframes'>0</span> frames in <span id='vidseconds'>0</span> seconds video (30 fps)
<br>Time left: <span id='test'>0</span> minutes
<script>calcStop();</script>

Looks like this:

TimeLapse.jpg (51.83 KiB) Viewed 15924 times

Note that the camera must be running and not be used with one of the other buttons, otherwise raspimjpeg will crash...

[ChefBorjan]

Hi there.

I really like this web interface, if only it didn't crash my pi!

So basically, this works great for a little while (I can take photos/videos etc from the web interface) then my pi becomes unresponsive, i.e. I cannot SSH in any more, and the web interface cannot be reached.

Unplugging and rebooting the pi makes it seem like everything is fine, the LED status lights come on and the camera light even turns on. For a few moments I can SSH into the pi again, but very shortly the same unresponsive behaviour occurs.

The only cure is to wipe and reformat the SD card. Anyone have any thoughts?

[poing]

I have the same issue with one of my Pies. I'm almost sure it has to do with the power; I have an original model B with poly fuses and I suspect these have been degraded over time as it used to work fine with the camera. If you have a recent model you can try backfeeding it through the USB port or with any model through the GPIO pins, although in both cases you lose protection.

[jonar]

Hi,
First of all a massive thank you for this, it's exactly what I've been looking for having tried motion etc this provides both a smooth live view and the motion detection element. I can also see this being of good use to fellow members of my LUG in their own projects.

That said, I am experiencing an issue with motion detection. When I first setup the RPI Cam Web Interface, I got back indoors to find a cat had been wandering around near the unit. Obviously working perfectly at this point.

Since then I modified the image size in rc.local (up to 720p size) and ended up with way too much motion detection going on, so shrunk it down to try and reduce the motion detection, I decided on WVGA 854x480 which stays at 16:9, smaller than 720 but larger than the default. Since then I haven't seen any motion detection. I even reverted back to the default size.

-md is present in the startup command and I can confirm motion is definitely running (ps)

Anyone any ideas?
You can see my cam page at: http://jonarcher.info/badgercam/ and the preview page is linked.

On a further note, would it be possible to upload all your code to github? it would allow others to work on it, and also you could use it as an update mechanism. Just a thought

EDIT: Forgot to mention I'm using the Pi Noir... not sure if it makes a difference.

[cica]

Hi-

I'm trying to wrap my head around FIFO. From what I understand, the web page is writing to var/www/FIFO and that RaspiMJPEG is reading the FIFO file for instructions. If I wanted to add a command to the web page to trigger an output on one of the GPIO pins, would I have the command fall into the same FIFO file and have another program watching the FIFO file or would I create a second FIFO for the other program to watch?

Thanks,
-Tom

[jonar]

@cica from what I can gather, it is raspimjpeg that is writing to FIFO then the image is generated from that and displayed on the webpage. Motion is watching the pic and monitoring for motion.

If you are wanting to trigger GPIO on motion detection then /etc/motion/motion.conf is where you need to look there is a directive called on_event_start.

[cica]

Jonar-

What I am hoping to do is add a button on the camera web page that would trigger a gpio pin.

Thanks,
-Tom

[cweveritt]

silvanmelchior
What can I say? Well, it's not perfect! I think you misspelled Stabilization on the RPi Cam Control Settings. And you could add a bouncing ball to lead us through the instructions. Enough bs, I copied and pasted your instructions, rebooted and typed in my rPi's IP address and it worked!
I'm a noob and am going to try to add controls to drive a toy truck. Any tips appreciated.
FANTASTIC JOB.
THANK YOU SO MUCH!
charlie (cweveritt)

[Pangu]

Hello again,

I did read through all the posts on this topic (it took me some hours to be honest) and installed this superior tool. What should I say? First of all THANKS TO SILVANMELCHIOR for his effort. Also I want to thank jbeale and al the other users in here, who explained, wrote some extra code and gave us the opportunity to pimp that great tool.

I think, it would be really nice for a user who is reading this topic to see at once (on the first post of silvanmelchior) which nice addons are available. For example: the visual addon for the WebGUI, the timelapse button to record timelapse videos, how to change thumbnail preview size of images or videos, how to add the custom page (index2.html) which is optimized for viewing the WebGUI on mobile phones, or tablets (which will show the cam preview with 100% width), etc..... there are many cool feautures users have implemented and I really like them. They are worth to be mentioned.

Also, I am wondering that nearly noone (except of one user) talked about nginx. In my opinion, Apache2 is a bad idea to have run on a RPi because it's really heave-loaded and consumes much cpu and ram which is really not necessary for this project. Apache2 is overloaded and nginx or another light-weight http daemon would do the job fine. Only one user in here tried to explained how to use nginx instead of Apache2, unfortunately this topic has not been discussed further. Here is a small description how to use nginx instead of Apache2...

You can install nginx according this HowTo parallel to your Apache2 configuration, so you can test and decide. We will install Nginx Webserver and listen Nginx to port 8080 (your Apache2 installation still will listen on default port 80).


---------------------------------BEGIN NGINX TUTORIAL------------------------------------
Installing the light-weight HTTP daemon "nginx" which is far better than Apache2 and we also need php stuff:

Code: Select all

sudo apt-get install nginx php5-fpm php5-common

Tuning nginx to gain better performance. I edited /etc/nginx/nginx.conf and changed the values for worker_processes (from '4' to '1' and worker_connections (from '768' to '128'). You can do that manually by either editing that file with "sudo nano /etc/nginx/nginx.conf" and replace the values, or just use following commands which will do exactly the same:

Code: Select all

sudo sed -i "s/worker_processes 4;/worker_processes 1;/g" /etc/nginx/nginx.conf
sudo sed -i "s/worker_connections 768;/worker_connections 128;/g" /etc/nginx/nginx.conf

Disabling logging in Nginx, which increases lifetime of RPi's SD card and give more performance:

Code: Select all

sudo nano /etc/nginx/nginx.conf

Modify following 2 lines as showed below:

Code: Select all

access_log /dev/null;
 gzip off;

Setup our site for use with nginx:

Code: Select all

sudo nano /etc/nginx/sites-enabled/default

First we instruct nginx to listen on port 8080:

Code: Select all

listen   8080;

we have to change the root path, so search for the line beginning with "root ..." and modify it to:

Code: Select all

root /var/www;

also be sure to include index.php into the line beginning with the word "index ...":

Code: Select all

 index index.php index.html index.htm;

I also disabled the location for /doc path because we won't need it. Just put the # sign in front of these lines:

Code: Select all

       #location /doc/ {
        #       alias /usr/share/doc/;
        #       autoindex on;
        #       allow 127.0.0.1;
        #       allow ::1;
        #       deny all;
        #}

Then look for this part and remove the # signs in front of the particular lines as showed here:

Code: Select all

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
        #       # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
        #
        #       # With php5-cgi alone:
        #       fastcgi_pass 127.0.0.1:9000;
        #       # With php5-fpm:
              fastcgi_pass unix:/var/run/php5-fpm.sock;
                fastcgi_index index.php;
                include fastcgi_params;
        }

Also remove the # sign in front of these 3 lines, just for security reasons:

Code: Select all

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        location ~ /\.ht {
                deny all;
        }

Then edit following file:

Code: Select all

sudo nano /etc/php5/fpm/php.ini

and search for the line ";cgi.fix_pathinfo=1". Either remove the ; sign in front of it and change the value from 1 to 0, or leave this line unmodified and add a new line below it with this content:

Code: Select all

cgi.fix_pathinfo = 0;

We install also php-apc which will give us extra performance due to the great caching mechanism:

Code: Select all

sudo apt-get install php-apc

Configuring APC:

Code: Select all

sudo nano /etc/php5/conf.d/20-apc.ini

by default, only the first line (extension=apc.so) is in there. You have to add these following lines and save the config file:

Code: Select all

apc.enabled=1
apc.file_update_protection=2
apc.shm_size=32M
apc.include_once_override=0
apc.shm_segments=1
apc.gc_ttl=7200
apc.ttl=7200
apc.num_files_hint=1024
apc.enable_cli=0

Copying a template control center into your webserver for managing and viewing APC cache:

Code: Select all

sudo cp /usr/share/doc/php-apc/apc.php /var/www

Restarting PHP-FPM and NGINX:

Code: Select all

sudo /etc/init.d/nginx restart
sudo /etc/init.d/php5-fpm restart

Now you should be able to access your RPi Cam Control hosted by nginx, with "http://your-raspberrypi:8080
You can access the APC control centre with "http://your-raspberrypi:8080/apc.php"

If everything is working fine with Nginx and you can access your website by http://your-raspberrypi:8080 you could completely remove Apache2 and related packages and free space and ressources of your RaspberryPi.

Removing Apache2 (be warned that this command completely removes Apache2 !!). First, I checked with command "dpkg -l |grep -i apache" which packages are related to Apache and therefore I purged them (and related packages). In my case I purged following packages:

Code: Select all

apt-get purge apache2 apache2-mpm-prefork apache2-utils apache2.2-bin apache2.2-common libapr1 libaprutil1 libaprutil1-dbd-sqlite3 libaprutil1-ldap libapache2-mod-php5 php5-cli ssl-cert

Note: the directory /var/www won't be removed with this command, because the apt-get routine will find files inside this directory. So you don't have to worry about loosing any of your content in /var/www)

In the following you should re-edit nginx site configuration:

Code: Select all

sudo nano /etc/nginx/sites-enabled/default

and change the line "listen 8080;" to

Code: Select all

listen 80;

---------------------------------END NGINX TUTORIAL------------------------------------

I'd like to ask if it's possible to integrate voice recording with our existing RPi Cam Web Interface + motion. I have purchased this audio-controller with integrated microphone (http://www.conrad-electronic.co.uk/ce/e ... ermikrofon) which you can use on Raspberry Pi's. Would it be possible to add audio to the recorded videos?

On this manner I would like also to point to this great tool "RaspiCam Remote" which is available for Android devices on Google PlayStore (I don't know if that's also available for iPhone on Apples AppStore?). This great tool can also be very helpful for RaspberryPi users which own the RaspiCam. It has nothing to do with motion-capture or similar, but it gives the user a quick & easy way to connect to the RaspberryPi through SSH, look at the cam stream, shoot a video, shoot still images, download them directly to the phone, and such things. If you use RPi Cam Web Interface of this topic here, you have to first "STOP CAM" on the WebGui before using this tool. It works great for me and I can recommend it to everyone.

Cheers,
Pangu

[stefan.knight]

I had suggested earlier to just use the built-in HTTP server in PHP and not bother with Apache or NGINX as you need PHP anyway. The PHP version used here already have it built in and to me performs much better than Apache.

[Pangu]

that sounds also interesting and I would like to get some more information. Can you explain how to use the buil-in HTTP server of PHP in detail, please?

[hystrix]

I would like to have a button on the web interface to reboot my Pi (to restart RaspiMJPEG in case it has crashed for some reason). Is this possible?

I would be grateful if someone could give me an indication about how to do this.

Many thanks.

Can anyone help me with the above?

Many thanks.

[poing]

I would like to have a button on the web interface to reboot my Pi (to restart RaspiMJPEG in case it has crashed for some reason). Is this possible?

I would be grateful if someone could give me an indication about how to do this.

Many thanks.

Can anyone help me with the above?

Many thanks.

I'll see if I can put something together tonight. Should be easy.

[stefan.knight]

that sounds also interesting and I would like to get some more information. Can you explain how to use the buil-in HTTP server of PHP in detail, please?

I'l have to look at how I have mine done exactly, but in a nutshell, it just needs to point to the same directory Apache does:

php -S localhost:8000 -t ./home/owner/myapp index.php

[poing]

I would like to have a button on the web interface to reboot my Pi (to restart RaspiMJPEG in case it has crashed for some reason). Is this possible?

I would be grateful if someone could give me an indication about how to do this.

Many thanks.

Can anyone help me with the above?

Many thanks.

First you have to enable the www-data group to reach the shutdown command, otherwise it will not work.
Note that this will introduce a safety risk!!!

To do this type

Code: Select all

sudo visudo

in the console to open nano with the sudoers file. Then put the lines

Code: Select all

www-data ALL=/sbin/shutdown
www-data ALL=NOPASSWD: /sbin/shutdown

at the end of the file and close nano with Ctrl-X, Y and Enter.

Next create a file named 'reboot.php' in /var/www and fill it with this text:

Code: Select all

<?php
shell_exec('sudo shutdown -r now');
echo 'Pi is rebooting now!';
?>

Then paste the following code into 'index.html' to create the reboot button:

Code: Select all

<p><button type='button' id='rebootnow' onClick='window.location="reboot.php"';>Reboot</button></p>

That should do it.

[Pangu]

http://grid.stronazen.pl/rpi/rpi-cam-visual-pack.zip
just upload contents of .zip to var/www and delete default index.html
i haven't really tested it in all browsers but it should be ok since it's based on twitter bootstrap.
hope you like it

Hi and thanks for your visual addon. I have realized unfortunately, that I cannot delete any file when clicking on the "DELETE" button. My HTTP server error log says "permission denied". I checked that, and it's true: all recorded still images or video within the directory /var/www/media are owner+group = root and permissions are set to 755. Of course my Webserver is not allowed to delete such files, because it runs under the "www-data" user I assume.

So, how can we have that fixed?

[DougieLawson]

sudo -i
find /var/www | xargs chown www-data.www-data
find /var/www -type f | xargs chmod 644
find /var/www -type d | xargs chmod 755
exit

[Pangu]

sudo -i
find /var/www | xargs chown www-data.www-data
find /var/www -type f | xargs chmod 644
find /var/www -type d | xargs chmod 755
exit

Hi DougieLawson. Was that a reply to my question? If so, that would not resolve the problem for the future. Of course I could do a "chown pi. /var/www/media/*" and try to delete the file through the WebGUI, but the problem still remains ==> each image or video recorded is saved with root:root and 755.

EDIT: I have found out, that the problem is that the "unlink" PHP command could not be run due to permission restrictions. The evil is the directory itself (/var/www/media) by default is "pi:pi" and 755 permissions. And the media files inside this directory are saved under "root:root" and 755.

I was able to fix that simply by:

Code: Select all

chmod www-data. /var/www/media

I have checked the installation commands of SilvanMelchiors installation procedure:

Code: Select all

 install)
        sudo apt-get install -y apache2 php5 libapache2-mod-php5 gpac motion

        cd /var/www
        sudo wget -N http://grustu.ch/share/rpi_cam/www.tar.gz
        sudo tar -xvzf www.tar.gz -C .
        sudo rm www.tar.gz
        sudo mknod FIFO p
        sudo chmod 666 FIFO
        sudo chown www-data:www-data media

So they seem to be correct, he is executing the right command (here on the last line). So I wonder why my directory /var/www/media was owned by user/group "pi". Any clues?

BTW: Is "sudo -i" the same as "sudo su -" ?

[Pangu]

http://grid.stronazen.pl/rpi/rpi-cam-visual-pack.zip
just upload contents of .zip to var/www and delete default index.html
i haven't really tested it in all browsers but it should be ok since it's based on twitter bootstrap.
hope you like it

Hello again unnamed7,

I would like to ask you if it's possible to add following feauture to your visual addon pack: when you click on an image or preview, it would be nice to have scroll buttons (left, right) to automatically have displayed the further/next image or video when clicked on. Actually the user is clicking on "preview" button, the preview window will appear and I have to close that window and click again on the preview button of the next image (or video). It would be nice to have a better way to look through all the media files like a gallery or something like that. You could also integrate the filename, or maybe the date as a header of each image/video so the user knows exactly which image/video he is actually looking at.

[nolman]

Great work here guys!

I changed <img id="mjpeg_dest" style= width:100%>
so the camera window scales right in chrome on android.

[Pangu]

I cannot find the neccesary information anymore, but I am sure I have red about it. Please anyone help:

I would like to move the image or video after it was successfully under /var/www/media/ to another host. I would like to choose this way, because it doesn't affect write-performance of motion or raspmjpeg. I am not using any mounts (CIFS or NFS) on my RPi, but instead I would like to use "rsync" to move the file to another host and after successful transfer delete it from /var/www/media/ to prevent my SD card filling up.

Where can I insert my own shell script? Was it somewhere in motion's configuration files, if so where exactly? Any help appreciated.

I also have another important question:
when I shoot an image and looking at the preview the image information show me that the image has a resolution of 2.592px × 1.944px and is scaled to 480px × 360px (5.4x times smaller). So far so good, that is acceptable. But: the live cam view doesn't show me the whole FOV like it shows when I shoot an image. I have a much smaller field of view when lookin through the live cam view on the main page. Why? Is it because I use the visual addon pack? Anyone without using the visual addon pack can check that and proof?

[poing]

In script.js there's an if-block that starts with: "if(ajax_status.responseText == "ready") {" which is executed every time an action has been completed. My guess is to launch a php page from there that looks for videos to be uploaded.

The jpegs shown in the browser come from the preview of the video, which has a smaller FOV than the stills. Work is going on to make the video use the whole sensor but it seems troublesome.