RPi-Cam-Web-Interface

This is the wiki for user contributed ideas and code for the excellent RPi Cam Web Interface found here: http://www.raspberrypi.org/phpBB3/viewtopic.php?f=43&t=63276

Source code also available on GitHub:
 * https://github.com/silvanmelchior/RPi_Cam_Web_Interface
 * https://github.com/silvanmelchior/userland/tree/master/host_applications/linux/apps/raspicam

Remember, anyone can create an account on here and add to this wiki.

New and Improved
Robert (aka btidey) has forked Silvanmelchoir's original source code to add some really useful additional features to the program.

It extends functionality in the following ways:
 * Download Video and Images (preview) page shows thumbnails and capture details. Thumbnail and preview sizes may be customised per browser. Extra buttons allows for selective deletes and zip downloads directly from thumbnails. Time lapse recordings are grouped together into batches. A time lapse batch will download as a zip containing all the captured data.
 * Scheduling page allows automation of capture settings and config split into daily periods based on sunrise and sunset. Enter latitude and longtitude and time zone to set up sunrise/set calculation, then put capture commands and operating mode for four daily periods. Schedule can also automate old capture purging.
 * Motion page gives access to viewing and editing motion detection settings from the browser. Changes are applied immediately with no restarts required.
 * Main page Camera settings shows current values and changes are remembered across stops, starts, reboots. Extra settings added for annotation and MP4Box control.
 * Core software changes include more flexible file naming, subfolder support, v3 annotation, background MP4Boxing, user config support. It finds video and image indexes on start instead of installer script. More tolerant to on-line errors and formatting of commands.

''' Seriously, check out these instructions. They cover not only the additional features but a very clear and informative writeup on how RPi Cam Web Interface works: https://github.com/roberttidey/RPi_Cam_Web_Interface/blob/master/RPiCam.pdf '''

Github page: https://github.com/roberttidey/RPi_Cam_Web_Interface

Robert's code can be installed from fresh using the same method that Silvanmelchoir set up - all you do is download from a different Github source:

Usual initial Pi upgrade before installing the software:

Install Robert's / Silvanmelchoir's code:

If you already installed Silvanmelchoir's version, please remove this by following these commands, then install as described above:

A note about the scheduler

 * Scheduler calculates sunrise and sunset every Mode_Poll check interval.
 * A dawn start is then calculated by adding DawnStart_Minutes to sunrise (normally negative to make Dawn start before sunrise).
 * Similarly a Day start is sunrise + DayStart_Minutes.
 * Dawn is then the period from Dawn start till Day start.
 * Day then begins until sunset + DayEndMinutes.
 * Dusk then starts and continues to sunset + DuskEnd_Minutes.
 * Night then starts until the following Dawn.

The Config File
Thanks to the amazing hard work by Silvan Melchior, RaspiMJPEG now uses a config file to set various parameters on starting the RPi Can Web Interface.

/etc/raspimjpeg

The release update which includes an example of the config file can be found here: http://www.raspberrypi.org/phpBB3/viewtopic.php?p=524707#p524707

A few examples on how to set variables can be found below.

Changing the Field of View
Follow this tutorial to start a different view automatically during boot:

There are three different preview modes available which are set by changing the resolution of the video_width and video_height options in the # Video Options section.

The view along with resolution is shown below: e.g. to set 4:3 full FOV:

Remote access to website with User/Pass and changing port
http://www.raspberrypi.org/forums/viewtopic.php?p=500460#p500460

If using motion you need to edit motion.conf adding the directive:

(source http://www.raspberrypi.org/forums/viewtopic.php?p=530057#p530057)

Central Motion Detection from Multiple Cams using iSpy Connect
http://www.raspberrypi.org/forums/viewtopic.php?p=518500#p518500

Configure Timelapse
Timelapse is now built into RaspiMJPEG

Use nginx web server instead of Apache
This could cause difficulties when silvanmelchior releases an update because it would try to install Apache again

http://www.raspberrypi.org/phpBB3/viewtopic.php?p=515259#p515259

View video stream on an iDevice / Smartphone
Credit goes to Oke for the original post. A few more tweaks added for iPhone app. http://www.raspberrypi.org/phpBB3/viewtopic.php?p=507756#p507756


 * On the Pi, run:


 * Download "IP Cam View Pro" (I used IP Cam View Lite on the iPhone - can upgrade to Pro)
 * Select the menu icon
 * Press Manage Cameras
 * Select Add Camera then Generic URL
 * Give your cam a name
 * For Type choose Generic Video URL
 * Enter your URL, e.g. http://192.168.0.1:80/cam.jpg
 * Press Test
 * If it works, press Save

Embed live-preview in own homepage
This is the minimal code to embed the preview:

php:

js:

The size can be changed either as parameter in /etc/raspimjpeg or with CSS. To add further features (change settings, record images/videos), study the existing homepage.

Save an image upon motion detection
http://www.raspberrypi.org/forum/viewtopic.php?f=43&t=63276&start=175#p491013

Move saved images and videos to another folder
Detailed instructions on how to map a network NFS share to /var/www/media - http://www.raspberrypi.org/forums/viewtopic.php?p=531344#p531344

When to do the move - http://www.raspberrypi.org/forum/viewtopic.php?p=515967#p515967

Mounting a share - http://www.raspberrypi.org/phpBB3/viewtopic.php?p=513781#p513781

Mounting a Windows Share - http://www.stuffaboutcode.com/2012/05/raspberry-pi-connect-nas-windows-share.html

If you've mounted a network share to something other than /var/www/media, such as /mnt/myshare, you can bind the two together using this command:

Scale camera window correctly in Chrome on Android
http://www.raspberrypi.org/phpBB3/viewtopic.php?p=515786#p515786

Button on web interface to reboot the Pi
http://www.raspberrypi.org/phpBB3/viewtopic.php?p=515504#p515504

Rotation not working?
Try a different browser - http://www.raspberrypi.org/forum/viewtopic.php?p=513705#p513705

Internet Explorer isn't supported, Opera and Firefox <21 can't show the preview of recorded videos.

Slow video stream?
http://www.raspberrypi.org/forum/viewtopic.php?p=513162#p513162

Pi-Pan and Pi-Light
Information about Pi-Pan and Pi-Light: http://www.openelectrons.com/Pi-Pan‎

Needed Hardware for this addition:
 * Pi-Pan (OpenElectrons)
 * Pi-Light (OpenElectrons)
 * Pi-Case to mount Pi-Pan recommended (e.g. OpenElectrons)

With these code-changes and additions, it's possible to control Pi-Pan and Pi-Light from the RPi Cam Web Interface. Just follow these steps:


 * Assembly and install Pi-Pan: http://www.openelectrons.com/index.php?module=pagemaster&PAGE_user_op=view_page&PAGE_id=20
 * Add the file "pipan_pipe.py" to the pipan-files with the following content:


 * Navigate to "/var/www" and add a named pipe with the following commands:


 * Edit "/etc/rc.local": add the following line below the raspimjpeg-command (change the path to the directory where you extracted the pipan-files:


 * Add the file "pipan.php" to "/var/www":


 * Add the file "pipan.js" to "/var/www":


 * Add the following line to "index.html" below " ":


 * Add the following lines to "index.html" below "":


 * Add the following lines to "index.html" below "":

That's it. After rebooting your Pi, you should be able to control Pi-Pan with the new Buttons "Up", "Down", "Left" and "Right" or on the keyboard with "W", "S", "A" and "D". The Pi-Light can be controled in the settings-table or on the keyboard with "F". If you have a touch-device (Android or iOS), you can pan/tilt by dragging the preview-image around and change the Pi-Light by clicking on the preview. To change the minimum/maximum pan/tilt angles, edit the settings in /var/www/pipan.php.

Overlay/Composite two images together
One way to add an image over the top of another is with ImageMagick. I've constructed a crude example below, and it works! But it bogs down the refresh rate, drives the load level to 1.5 and is barely acceptable. I'd like to toggle it on/off with a new button, and improve it's performance, so please edit this article better.