Difference between revisions of "RPi-Cam-Web-Interface"

From eLinux.org
Jump to: navigation, search
(Basic usage (Preview, Settings, Catpures, Download))
m (Merge in pdf material)
Line 273: Line 273:
  
 
= Architecture =
 
= 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.
 +
 
== Data Flow ==
 
== Data Flow ==
TODO: fill with content
+
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 ==
 
== Control Flow ==
TODO: fill with content
+
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 ==
 
== RaspiMJPEG ==
 
=== Components ===
 
=== Components ===
 
TODO: fill with content
 
TODO: fill with content
 
=== Pipe ===
 
=== Pipe ===
TODO: fill with content
+
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. There must only be 1 space and the length of parameters must be as shown
 +
{| class="wikitable"
 +
|-
 +
! 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.
 +
|}

Revision as of 03:57, 16 April 2015

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


Usage

Basic usage

TODO: fill with content (Preview, Settings, Catpures, Download, etc)

Scheduler

TODO: fill with content

Motion

TODO: fill with content


Configuration

Configuration Scheme

TODO: fill with content

Naming Scheme

TODO: fill with content


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

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

Scale camera window correctly in Chrome on Android

http://www.raspberrypi.org/phpBB3/viewtopic.php?p=515786#p515786

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

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.

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. There must only be 1 space and the length of parameters must be as shown

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.