RPi-Cam-Web-Interface

From eLinux.org
Jump to: navigation, search

RPi Cam Web Interface is a web interface for the RPi Cam that can be opened on any browser (smartphones included) and contains the following features:

  • View, stop and restart a live-preview with low latency and high framerate. Full sensor area available.
  • Control camera settings like brightness, contrast, ... live
  • Record full-hd videos and save them on the sd-card packed into mp4 container while the live-preview continues
  • Take single or multiple (timelapse) full-res pictures and save them on the sd-card (live-preview holds on for a short moment)
  • Preview, download and delete the saved videos and pictures, zip-download for multiple files
  • Trigger captures by motion detection
  • Trigger captures by many scheduling-possibilities
  • Circular buffer to capture the last actions afterwards
  • Control Pi-Pan and Pi-Light (http://www.openelectrons.com/Pi-Pan)
  • Shutdown/Reboot your Pi from the web interface
  • Show annotations (eg timestamp) on live-preview and taken images/videos

It's been programmed by silvanmelchior as a client for RaspiMJPEG in 2013. Since then, thanks to the help of many other programmers, it has become the best interface to control the RPi Cam over your browser.

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

Installation Instructions

Basic Installation

Warning: The installer will replace various files, so backup all your data.

Step 1: Install Raspbian on your RPi
Step 2: Attach camera to RPi and enable camera support (http://www.raspberrypi.org/camera)
Step 3: Update your RPi with the following commands:

sudo apt-get update
sudo apt-get dist-upgrade
sudo rpi-update

Step 4: Clone the code from github and run the installer with the following commands:

git clone https://github.com/silvanmelchior/RPi_Cam_Web_Interface.git
cd RPi_Cam_Web_Interface
chmod u+x RPi_Cam_Web_Interface_Installer.sh

If you want to install the web interface in a subfolder of /var/www, edit "RPi_Cam_Web_Interface_Installer.sh" according to the comments in the file and run the installer. Otherwise directly run the installer:

./RPi_Cam_Web_Interface_Installer.sh install

Step 5: After the setup finishes, you have to restart your RPi. Now just open up any browser on any computer in your network and enter the IP of the RPi as URL.

Startup Behaviour

To change the default startup-settings, edit the config-file /etc/raspimjpeg. If you want to disable autostart completely, navigate back to the directory, where you cloned the git-repo in Step 4 and run one of the following command: ./RPi_Cam_Web_Interface_Installer.sh autostart_no --> the interface doesn't start at startup, you need to run a command to use it (commands below) ./RPi_Cam_Web_Interface_Installer.sh autostart_yes --> the interface starts at startup and takes control over the camera (standard)

To temporarily start/stop or deinstall: Navigate back to the directory, where you downloaded the installer in Step 4. If you want to stop the interface temporarily, run "./RPi_Cam_Browser_Control_Installer.sh stop". To restart it, run "./RPi_Cam_Browser_Control_Installer.sh start". If you want to remove the interface completely, run "./RPi_Cam_Browser_Control_Installer.sh remove". Attention: It removes all files in /var/www.

Links

Project itself: https://github.com/silvanmelchior/RPi_Cam_Web_Interface
RaspiMJPEG: https://github.com/roberttidey/userland/tree/master/host_applications/linux/apps/raspicam
Forum: http://www.raspberrypi.org/forums/viewtopic.php?f=43&t=63276
PDF: https://github.com/silvanmelchior/RPi_Cam_Web_Interface/blob/master/RPiCam.pdf

Special thanks

To btidey for many, many new features
To jarrah31 for this wiki
To jonar for the github-repo
To James Cooke for the styling
To slabua for many fixes/improvements
To everybody else who helps on github, in the forum or here to develop the RPi Cam Web Interface

Ps: If you like my work and have some extra-money ;) :
Bitcoin: 398h4RVQhptrgN7eT9abAStCe1yu7zxBoV
PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=HN25F6V378FB4&lc=CH&item_name=Private&currency_code=CHF&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted

Usage

Basic usage

Navigating to the main web site brings up a medium resolution live view of the camera, access to a number of control buttons, and access to camera settings and system controls. On all screens the top navigation bar steps back one view.

RpiCamMain1.png

The basic controls allow for capturing single images, videos, or time lapse sequences. It can also be put into a motion detection state where motion will trigger activity like a video recording.

The buttons under the main controls allow for Downloading and previewing any captures, plus access to motion detection and scheduling set up.

Below this are Camera settings and a system control bar.

Clicking on Camera settings gives access to a wide range of camera set up controls from controlling annotation through to exposure set ups and image and video formats.

The system control bar allows for selection of streaming mode, shutdown and reboot of the system, clearing settings and selection of custom styles. By default the system generates the live preview as a continuous set of captured images as this has maximum browser compatibility. MJPEG streaming may be selected but this may not work on all browsers. This is a per browser setting.

The custom style bar shows any extra styles that have been added. As installed there is the normal white default look, and a dark night mode.

Download Clicking the Download Videos and images button shows all previous captures as a series of thumbnails.

RPiCamDownload1.png

These may be selected individually or as a set and either deleted or zip downloaded.

Clicking on an individual thumbnail brings it up in a larger preview pane and videos may be played from here.

RPiCamDownload2.png

The selected file may be deleted or downloaded as a single file. If it is a timelapse sequence it will still be zipped as it contains multiple files.

The size of the thumbnails and the main preview may be updated and this will be remembered as a per browser setting.


Scheduler

The same program file schedule.php is used both as the web facing settings interface and the run-time daemon which does the automation. All the settings used are contained within the schedule.json config file.

RPiCamScheduler1.png

Different rows will be shown according to the day mode selected. For example if Fixed Times is selected then 6 time based rows appear.

RPiCamScheduler2.png

The Scheduler will normally be started on boot up and can be left running all the time. A Stop button shows when the background scheduling program is running and turns into a start button if it is not. Normally it should just be left running. Note that if it is stopped then motion start stop triggers will not be actioned as they pass through the scheduler. If the software is updated without rebooting then stop and start scheduler to make sure the new version is running.

Save Settings saves the settings to schedule.json. Changes will be passed to the background program and take immediate effect. These settings may be backed up and restored.

  • scheduleLog is the file where scheduling activity is recorded. The contents are displayed when the Show Log button is used and the log may be cleared from there.
  • Fifo_In defines the named pipe that schedule monitors. It should be the same as where motion sends its commands. Fifo_Out is where scheduler sends its commands to raspimjpg Do not change these without good reason. Other configs are relying on these and would need to be changed as well.
  • Cmd_Poll is how often the scheduler checks the Fifo_In for incoming commands. It should be kept quite short to avoid unnecessary delays.
  • Mode_Poll is how often the scheduler checks for changes between the 4 main daily periods. Setting it to 10 means there might be a 10 second delay in determining when day starts for example.
  • Max_Capture determines the maximum capture period. If motion sends a start command and doesn’t send a stop command then the scheduler will automatically stop the capture after this interval. This can be used to make all recordings this length by configuring motion never to send stop commands. The scheduler will then always time out and stop the recording. A value of 0 means no timeout.
  • Management_Interval causes Scheduler to run a task every Interval (seconds). This is an optional user command plus automated purging.
  • Management_Command is a command line which will be run every Management_interval. Take care when using this facility; test out any commands first.
  • Purge settings. See below.
  • Latitude, and Longtitude define where the camera is and allow the sunrise and sunset times to be calculated throughout the year.
  • GMTOffset adjusts for sunrise / sunset calculation. Set in hours or TimeZone string
  • DawnStart_Minutes through to DuskEnd_Minutes divide the day up into 4 periods based on sunrise and sunset. Dawn starts at sunrise + DawnStart_Minutes so would normally be negative to make Dawn start before sunrise. Similarly for the other 3 numbers. Night is from DuskEnd to DawnStart the next day.
  • DayMode – This provides 3 different types of scheduling.
    • Sun based splits the day up into 4 periods (Night, Dawn,Day, Dusk) based on sunrise and sunset calculations and the offsets.
    • All Day uses just the Day settings for the whole 24 hour period.
    • Fixed Times splits the Day up into up to 6 periods based on fixed times. The commands in force are those for the time just less than current time. These do not have to be in order.

The period table allows mode changes and start and end commands to be different in each of the daily periods. Times are to the nearest minute and there can be an additional delay of Mode_Poll seconds before a period change is detected.

  • Motion Start are used to start captures when a motion trigger start is received. If left blank (e.g. at night) then no capture happens when motion is detected.
  • Motion Stop are used to end captures when a motion trigger stop.
  • Period Start are used to send in commands at the start of each daily period. So, for example they may be used to control motion detection and change camera settings. Changing to night mode for example extends the usefulness of the camera in dusk and dawn periods. They may also be used to start and stop recordings at the beginning of each period.

Note the scheduler is calculating the day periods based on local time conditions. The raspberry pi should have the appropriate time zone set in raspi-config. This may be checked by issuing a date +%R command line which should show local time. It is also displayed on the schedule settings page.

A commands reference table is included. A button Show Log shows scheduler and also raspimjpeg activity (if raspimjpeg log is set the same as scheduler). The log may be downloaded and cleared.

Purging

The scheduler has facilities for removing old files automatically. There are two mechanisms which are both checked and used at each Management_Interval. First the 3 PURGE_HOURS (one per file type) are checked and any file older than this is removed. So if PurgeVideo_Hours is set to 98 then any video captured more than a week ago will be removed. Setting the values to 0 disables this . This type of purging is useful when there is plenty of storage but you just want to remove old material. The second mechanism purges based on filing system space available. The detailed mechanism is selected with PurgeSpace_Mode which can be Off, Min Space or Max Usage. Min Space means that the available remaining space is checked and older files are removed until there is at least the level of free space set available on the filing system. Max Usage means that older files are removed so that the total space used by the media is less than the level set. The level in either case may be set in GB or as a % of the total filing system size. To use GB either put the level as a pure number or use GB. To use % just include that after the number, e.g. 20%.


Motion

The motion screen gives access to the motion config settings. Motion detection must be on for this to work.

Not all motion settings are relevant here. A filtered list is shown and the full list can be accessed if required. Settings can be saved backed up and restored. Saving does tell motion to start using the new settings.

RPiCamMotion1.png

Configuration

Configuration Scheme

A number of configuration files control how the overall system operates. The web pages give browser access to some of these.

raspimjpeg file in /etc is read whenever the raspimjpeg process starts up including if it is stopped and started from the browser. It contains basic paths and information to allow raspimjpeg to do its job plus the camera settings that will be used by default.

uconfig file in the /var/www folder is used to hold any changes from the defaults in raspimjpeg applied from the web browser. To start with it doesn’t exist but new values will be added if changes are made from the browser. Changes apply directly because the cmd_ipipe process has fed those into the raspimjpeg process, but they are also written by raspimjpeg to the uconfig file. When raspimjpeg starts it reads the factory defaults file first and then overwrites any settings that are in the uconfig file. You can also clear the uconfig file from the web browser to effectively return to factory settings. This doesn’t hold real-time commands like capture start/end commands or motion enable.

The main index page also reads raspimjpeg config (via a link) and the uconfig file so that it can show the current settings. When a setting is changed here this triggers a cmd_pipe command into raspimjpeg. That updates uconfig and the web page reloads the config files to show the change.

motion.conf in the /etc/motion folder is read by motion to determine its operating characteristics. As motion is being used here in a failry simple mode of motion detection then many of its parameters are irrelevant. The primary ones of interest are those setting the motion detection characteristics like mask files, thresholds, noise levels. motion provides a web api to view and edit these settings and this is used by the motion.php page to show and allow altering the settings.

schedule.json in the /var/www folder is used by the scheduling process to determine the characteristics of the automation. It is read and edited using the browser based schedule.php. It is also read by the same file running in command line mode as a background daemon. If changes are made then the scheduler daemon must be started and stopped via theweb page to allow it to see the new settings.

Naming Scheme

raspimjpeg uses a name scheme for captures and annotation that are controlled by the settings in the config files. These have a number of %X substitution parameters which will be filled in as follows. X must be one of the the following characters. They can be put in any order and repeated if required for a maximum total of 16 substitutions. Any other characters are passed through, but do not use any ‘illegal’ filename characters or the subdir_char (@). Extra path separators may be put in below the media folder level.

 %variable Substitution
 %% Single %
 %Y 4 digit year
 %y 2 digit year
 %M 2 digit month
 %D 2 digit day
 %h 2 digit hour
 %m 2 digit minute
 %s 2 digit second
 %v 4 digit video index
 %i 4 digit image index

Also used for time lapse batch

 %t 4 digit lapse index

Starts at 1 in each batch

So a config image_path of /var/www/media/im_%i_%Y%M%D_%h%m%s.jpg

will give a name like im_0005_20150309_093057.jpg

Lapse Index starts at 1 for a particular Time Lapse set and increments.

Thumbnails are named with the base capture name appended with ‘ . [vit]IndexNumber.th.jpg’ where [vit] is a single character for video, image and lapse recordings. This allows cross referencing back to the real capture files independent of the actual base name.

The %i IndexNumber is shared between thumbnails and images. Vidoes have their own IndexNumber %v. raspimjpeg when starting scans the highest number in each category and uses these as the base. A pipe command (sc) can also be used to trigger a scan and set the indexes.

Additions & Tricks

This section will be updated to contain links to posts with useful information and answers to popular questions. Anyone can add to this, so please create an eLinux account and help contribute!

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:

#!/usr/bin/env python
 
import time
import os, sys
import pipan
import pilight
 
p_servo = pipan.PiPan()
p_led = pilight.PILIGHT()
 
while True:
  pipein = open("/var/www/FIFO_pipan", 'r')
  line = pipein.readline()
  line_array = line.split(' ')
  if line_array[0] == "servo":
    p_servo.do_pan(int(line_array[1]))
    p_servo.do_tilt(int(line_array[2]))
  elif line_array[0] == "led":
    p_led.createPiLight(int(line_array[1]),int(line_array[2]),int(line_array[3]))
  pipein.close()
  • Navigate to "/var/www" and add a named pipe with the following commands:
sudo mknod FIFO_pipan p
sudo chmod 666 FIFO_pipan
  • Edit "/etc/rc.local": add the following line above the exit-command (change the path to the directory where you extracted the pipan-files):
python /home/pi/pipan_pipe.py &
  • Go to /var/www and rename the file "pipan_off" to "pipan_on" and "pilight_off" to "pilight_on"

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. To change the minimum/maximum pan/tilt angles, edit the settings in /var/www/pipan.php.

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:

netcam_userpass username:password

(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

Now that an MJPEG stream has been implemented, you can configure iSpy with the following:

MJPEG URL tab within Video Source:

http://<IP>/cam_pic_new.php?

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

(note - cam.jpg created during the installation now)

  • 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:

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

js:

var mjpeg_img;
 
function reload_img () {
  mjpeg_img.src = "cam_pic.php?time=" + new Date().getTime();
}
function error_img () {
  setTimeout("mjpeg_img.src = 'cam_pic.php?time=' + new Date().getTime();", 100);
}
function init() {
  mjpeg_img = document.getElementById("mjpeg_dest");
  mjpeg_img.onload = reload_img;
  mjpeg_img.onerror = error_img;
  reload_img();
}

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.

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:

sudo mount --bind /mnt/myshare /var/www/media

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.

<?php
/// derived from http://www.php.net/manual/en/imagick.compositeimage.php
/// requires 'sudo apt-get install php5-imagick' on RPi
/// backup /var/www/cam_pic.php, then replace it with this
/// goal is to put backup lines on reverse truck/trailer camera(s)
 
    $tlines = new Imagick('/var/www/lines/TrailerLines0deg.png');
    /// TrailerLines0deg.png is a image of the guidelines with a transparent background
    /// TODO: use steering wheel to select correct line graphic from library
 
    $camimg = new Imagick('/dev/shm/mjpeg/cam.jpg');
    $camimg->compositeImage($tlines, Imagick::COMPOSITE_DEFAULT, 70, 20);
    header("Content-Type: image/png");
    echo $camimg;
?>


Architecture

The overall functionality is quite complex but centres around the raspimjpeg process which accesses the camera data. The following diagram shows the major components. Blue lines indicate data flows. Red lines indicate control.

RPiCamArchitecture.png

Data Flow

In normal monitoring mode raspimjpeg makes a connection to the camera (MMAL) and generates a continuous stream of preview jpeg captures in the /dev/shm/mjpeg directory all with the same name cam.jpg. This folder is RAM memory based so does not strain the SD card memory.

These captures may be accessed via URLs on the Apache Web server. cam_pic.php process returns the latest one and cam_pic_new.php merges them into a mjpeg stream. When a browser has logged into the web server then the main page (index.php) will use cam_new_pic.php to give a moving representation of the camera output. If motion detection is active then the motion process also accesses these images via cam_pic.php in order to analyse differences between successive frames and detect motion.

If raspimjpeg is put into a capture mode (described below) then the flow of preview images is maintained but an extra recording is made of either a single image, a time lapse sequence of single images, or a full video recording which can be at any format the camera can support including HD normal frame rates. This data is stored in the media folder. For the images and tile lapse images these are stored directly in jpg format. The video is initially stored as a raw h264 stream from the camera but can be automatically formatted into mp4 when the recording ends. The boxing mode (MP4Box) controls this. Three options are provided; false leaves the files in raw h264, true converts them inline but no further recording is possible till this completes, background spawns a separate process to do the boxing operation.

When raspimjpeg initiates any of these sequences it also grabs the current cam.jpg from the preview stream and stores it in the media folder with a thumbnail name tied to the captured data. These thumbnails are used by the preview_php process to give a representation of each capture when the download button is pressed.

Control Flow

Raspimjpeg can be controlled by sending in commands into a named FIFO pipe in the /var/www folder.

The commands give access to most of the camera settings plus stopping and starting the capture processes. Commands can come from effectively 3 sources but one is directed through a secondary process for scheduling purposes.

  • Commands can come from the web browser via the cmd_pipe.php web page. This is used to allow changing the camera settings and manually starting and stopping captures.
  • Commands can come from the scheduling process (scheduler.php – daemon) which can be used to change various modes, camera settings at different times based on sunrise and sunset.
  • Commands can also come from motion and these are used to start and stop captures based on motion detection. In the original scheme these commands went straight to raspimjpeg. In the modified scheme they are sent through the scheduling process daemon so that it may change the nature of stop and start based on the daily periods. To achieve this motion now sends its commands to a secondary named FIFO pipe (FIFO1). The scheduler is monitoring this for motion start / stops and then sends in translated commands to the main raspimjpeg process.

RaspiMJPEG

Components

TODO: fill with content

Pipe

The following commands are supported by raspimjpeg when received from the pipe. Many are equivalents of values in the config file. Others are associated with several parameters. They are sent in as a serial stream as a 2 character command, space, and space separated parameters.

Cmd Parameters Description
an Text set annotation
ab 0/1 annotation background off/on
px AAAA BBBB CC DD EEEE FFFF set video+img res video = AxB px, C fps, box with D fps, image = ExF px)
as Number Set text size 0-99
at E YYY UUU VVV Set Text colour E (0/1 enable ) Colour as Y:U:V
ac E YYY UUU VVV Set background colour E (0/1 enable ) Colour as Y:U:V
sh Number set sharpness (range: [-100;100]; default: 0)
co Number set contrast (range: [-100;100]; default: 0)
br Number set brightness (range: [0;100]; default: 50)
sa Number set saturation (range: [-100;100]; default: 0)
is Number set ISO (range: [100;800]; default: 0=auto)
vs Number 0/1 turn off/on video stabilisation
ec Number set exposure compensation (range: [-10;10]; default: 0)
em Keyword set exposure mode (range: [off/auto/night/nightpreview/backlight/spotlight/sports/snow/beach

/verylong/fixedfps/antishake/fireworks]; default: auto)

wb Keyword set white balance (range: [off/auto/sun/cloudy/shade/tungsten/fluorescent/incandescent

/flash/horizon]; default: auto)

mm Keyword set metering mode (range: [average/spot/backlit/matrix]; default: average)
ie Keyword set image effect (range: [none/negative/solarise/posterize/whiteboard/blackboard/sketch/denoise/emboss/oilpaint

/hatch/gpen/pastel/watercolour/film/blur/saturation/colourswap/washedout/posterise /colourpoint/colourbalance/cartoon]; default: none)

ce A BB CC set colour effect (A=enable/disable, effect = B:C)
ro Number set rotation (range: [0/90/180/270]; default: 0)
fl Number set flip (range: [0;3]; default: 0)
ri AAAAA BBBBB CCCCC DDDDD set sensor region (AAAAA BBBBB CCCCC DDDDD, x=A, y=B, w=C, h=D)
ss Number Set shutter speed
qu Number set output image quality (range: [0;100]; default: 85)
bi Number set output video bitrate (range: [0;25000000]; default: 17000000)
bo Number Set mp4 boxing mode 0=off,1=inline,2=background
rl 0/1 0/1 disable / enable raw layer
ru 0/1 0/1 halt/restart RaspiMJPEG and release camera
rs 1 Reset user config to default
md 0/1 0/1 stop/start motion detection
ca 0/1 0/1 stop/start video capture
im 1 capture image
tl 0/1 Stop/start timelapse
tv Number Set timelapse between images number * 1/10 seconds.
sc 1 Scan and set video and image indexes