RPi Cam Web Interface

ludespeedny · Mon Mar 30, 2015 2:58 pm

Basically I am using this as a monitor for the kids room and is usually dark and night mode gives enough to see in those situations.

btidey · Mon Mar 30, 2015 3:23 pm

Sephiron wrote: I actually followed these steps. The only change I made is that I moved pipan.js into /var/www/ instead of /var/www/js and modified index.php accordingly. The servos work (I tested it with test scripts), but the buttons don't do anything, even though all the necessary scripts are enabled according to instructions. I just don't see what is wrong there.

You shouldn't need to move pipan.js from the js folder as the standard index.php references it from there. I put it in the js folder with all the other js files to keep it clean. If you move it and modify index.php then you'll have to do that every time there is an update. I checked the browser loads pipan.js OK from that location.

If not working then its likely to be some other step missed out in the chain.

When a pipan button is pressed then it calls a function in pipan.js which in turn does a get of the pipan.php url on the server. This should then write stuff into a named pipe on the server (FIFO_pipan in the /var/www folder) which the python is monitoring for commands.

So some steps are
1) Does FIFO_pipan exist on server? This is not made automatically the wiki describes how to create it manually.
2) Is the button linked through to pipan.php and writing commands OK
3) Is the rest of pipan (python) monitoring FIFO_pipan correctly.

For 2) I just did a quick test even though I don't have pipan (yet).
I enabled pipan controls with pipan_on
I modified the pipan.php on the server so that it appended commands it received from the buttons to a file rather than write them into the FIFO_pan. To do this I temporarily changed the line in /var/www/ pipan.php (under Get["pan"]

Code: Select all

$pipe = fopen("FIFO_pipan","w");

to

Code: Select all

$pipe = fopen("pipan.txt","a");

If I then pressed the pan buttons in the browser then it wrote the commands into the pipan.txt file in the /var/ww folder. So I think all that side is working.

dutchronnie · Mon Mar 30, 2015 3:42 pm

btidey wrote:
dutchronnie wrote:Thanks for this application, it is working well.
But i have one problem.
I always use chrome as browser, but there is always a thick black part in my screen with the text "RPi Cam Control v4.4.2R: mycam@raspberrypi" and it covers the top of the video image, and the buttons on the "download and video pages"

I it possible to change this?
Or is it an setting in the chrome browser
The black bar is a title bar which is at the top of all screens and also acts as a back link. All other page content should be below this. I use Chrome on Windows as my main browser and I don't get this problem. It is probably a problem loading the css style sheets.

The other possibility is the screen resolution. What device are you running Chrome on?

If you view page source in chrome then it should start
Code: Select all
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=550, initial-scale=1">
      <title>RPi Cam Control v4.4.2R: mycam@tideypicam1</title>
      <link rel="stylesheet" href="css/style_minified.css" />
      <link rel="stylesheet" href="css/extrastyle.css" />
      <script src="js/style_minified.js"></script>
      <script src="js/script.js"></script>
      <script src="js/pipan.js"></script>
   </head>
   <body onload="setTimeout('init();', 100);">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"style="display:block;">
         <div class="container">
            <div class="navbar-header">
               <a class="navbar-brand" href="#">RPi Cam Control v4.4.2R: mycam@tideypicam1</a>
            </div>
         </div>
      </div>
If you use Chrome developer tools, set to network and load main page again then you should see style_minified.css file being fetched straight after the index.php. If that looks OK then it could be some local Chrome setting. Try Firefox as an experiment to check out if this is the case.

I have checked the page source, and is exactly the same code as you gave.

I use a high resolution screen, but have checked in other resolutions, it was the same issue.

I do have 3 computers at home, all with chrome, and they look all the same, the title bar is over the previeuw video, and over the buutons.

Then i tried firefox, and that looks good.
But i want to use chrome.
I don't use developers tools, I think.

Are there some other settings in crome to repair this?

btidey · Mon Mar 30, 2015 4:13 pm

dutchronnie wrote: I have checked the page source, and is exactly the same code as you gave.

I use a high resolution screen, but have checked in other resolutions, it was the same issue.

I do have 3 computers at home, all with chrome, and they look all the same, the title bar is over the previeuw video, and over the buutons.

Then i tried firefox, and that looks good.
But i want to use chrome.
I don't use developers tools, I think.

Are there some other settings in crome to repair this?

It definitely is compatible with Chrome so there must be something different in the Chrome set up.

What OS are you on?

Developer tools are built into Chrome. You click on the top right 3 bar menu and under More tools there should be a Developer tools item. This brings up a panel at bottom of screen that has lots of way of seeing what the browser is up to. The network tab will show the files being loaded.

One thought here is that the index page tries to load an extra style sheet called css/extrastyle.css This is used to allow creation of different extra styles like the night mode. Selected under the system menu. Normally there is no file called extrastyle.css so that the default style is used. On my tests Chrome shows an error trying to load this file but no difference happens. Maybe on your Chromes they are behaving differently on this error.

To test if this is the case create a totally empty file called es_Test.css and put it in the css folder. Refresh the index page and now under style you should see an item called Test. Try selecting that. It should satisfy the fetch so there is no error but have no other effect on the display.

Also are there any extra extensions you have added to Chrome that might have an impact?

dutchronnie · Mon Mar 30, 2015 4:32 pm

Thanks, Problem solved.

I removed some extension in chrome i never use.
And one of them was causing the problems.
I don't which one, because i have removed more then one.

jarrah31 · Mon Mar 30, 2015 6:45 pm

btidey wrote: 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.

My time-lapse didn't turn off at sunset this evening, so can I verify if the following should turn off time-lapse at the specified Sunset please?

- All Start/End Minutes are 0
- No entries within Commands_On/Off
- Modes fields are empty except for "tl 1" in Dawn and "tl 0" in Dusk

: schedule.png (61.45 KiB) Viewed 3647 times

Thanks.

btidey · Mon Mar 30, 2015 11:30 pm

jarrah31 wrote: My time-lapse didn't turn off at sunset this evening, so can I verify if the following should turn off time-lapse at the specified Sunset please?

- All Start/End Minutes are 0
- No entries within Commands_On/Off
- Modes fields are empty except for "tl 1" in Dawn and "tl 0" in Dusk

schedule.png
Thanks.

I think the issue here is caused by having 0 for all the offsets. Effectively what that means for dusk is that day ends at sunset dusk starts at sunset but lasts for 0 minutes and then night starts. The software is checking every Mode_poll interval (10 seconds) for what period it is in and then if the period changes it issues the mode commands for the new period it finds itself in. It does not guarantee to go through all periods.

Under this set up it will not see dusk start as it is going straight from day to night. The schedule log should show this as day period (2) will be followed by night period (0) and would therefore issue the night mode at this point and never issue the dusk mode.

You can either change the offsets so that Dusk at least lasts for a minute or so, or you could put the tl 0 in the night mode setting. The same would apply to dawn which under these conditions might also be 'non existent'. Personally I'd use the offsets to ensure that dawn and dusk do last for at least a little while ensuring that the scheduler transitions through each in turn. You can then put the tl commands into whichever periods you want.

StNNNx · Tue Mar 31, 2015 3:20 pm

Hi,

I am developing a little project which uses the raspimjpeg stream.

I have some noobish doubts, here they go:

1) When I send a change on the settings (i.e. Contrast 50) it works fine, but I dont see the changes on the /etc/raspimjpeg file. Where are these changes going to?

2) I don't understand the PIPE thing. I can see that when you send a change it writes on the PIPE file, but how does it work? and where is the parser of those commands?

3) I try to run the raspistill command when the raspimjpeg is active and it doesn't work. Do you know how could I fix it? Or another command to be able to take a snapshot while the raspimjpeg is running?

4) Which command does the "Record Image" button execute? Does it go through the PIPe also?

Thanks in advance,

StNNNx!

wanwari · Tue Mar 31, 2015 4:14 pm

I was wondering what method this actually used to stream the video. For example I've seen it being done with VLC, obviously that is not the case here.

btidey · Tue Mar 31, 2015 5:26 pm

StNNNx wrote:Hi,

I am developing a little project which uses the raspimjpeg stream.

I have some noobish doubts, here they go:

1) When I send a change on the settings (i.e. Contrast 50) it works fine, but I dont see the changes on the /etc/raspimjpeg file. Where are these changes going to?

2) I don't understand the PIPE thing. I can see that when you send a change it writes on the PIPE file, but how does it work? and where is the parser of those commands?

3) I try to run the raspistill command when the raspimjpeg is active and it doesn't work. Do you know how could I fix it? Or another command to be able to take a snapshot while the raspimjpeg is running?

4) Which command does the "Record Image" button execute? Does it go through the PIPe also?

Thanks in advance,

StNNNx!

1) Camera setting changes like Contrast 50 are sent as a command through the FIFO pipe and the raspimjpeg program acts on them but it doesn't affect the settings as defined in the config file /etc/raspimjpeg. They would therefore have got lost if raspimjpeg is restarted or th epi is rebooted. However, the web program sending these commands saves the changes to a file called uconfig in the www folder. raspimjpeg reads both the default /etc/raspimjpeg followed by the uconfig data so the extra changes in there take effect..

2) The pipe FIFO is a linux communication device that acts a bit like a file that one program writes to and another program reads and deletes from. So in this case the web programs write commands to the FIFO and the raspimjpeg program is checking it every 100mSec. If it finds a new command it reads it, parses it and tries to do it. This applies to all settings commands and action commands like start and stop video recording, or go into motion detection. All of these commands are a 2 letter cmd followed by required parameters. The scheduler web page has a command reference table listing all the commands and what they do.

3) Only 1 program can 'own' the camera at any one time. When raspimjpeg is running then it owns the camera and attempts to use other camera applications will fail. You can stop raspimjpeg's use of the camera from the main web page but obviously it then stops doing anything until started again. What you may want to consider is using the raspimjpeg commands to do whatever else you want. So for example, using the 'im' command will take a single image like raspistill. Of course, if raspimjpeg is already doing something like recording a video that could fail. Depending on what you want to do you might be able to use scheduler or you can also just script in a command like echo -n 'im' >var/www/FIFO which will trigger the image capture. This is exactly what the web page do. You will even see the buttons change on the web page if you do this. One could easily send these commands into the pipe from a python program which is how I started before moving everything on to the web side.

4) All commands go through the pipe. See the reference table on schedule.

Also there is a full description in the pdf on the github site.

btidey · Tue Mar 31, 2015 5:33 pm

wanwari wrote:I was wondering what method this actually used to stream the video. For example I've seen it being done with VLC, obviously that is not the case here.

The main page is a simulated stream. raspimjpeg continuously produces medium resolution jpegs in a ram folder /run/shm/mjpeg/cam.jpg. The main Index page is using ajax to continuosly fetch the updated preview image making this roughly equivalent to a mjpeg stream.

This technique allows raspimjpeg to feed motion detection the same way and to keep both feeds going even when simultaneously doing a high frame rate full HD video capture in the background.

It is fairly easy to extract just the preview part of the main page if one wanted this displayed in some other web context.

wanwari · Tue Mar 31, 2015 8:15 pm

btidey wrote:
wanwari wrote:I was wondering what method this actually used to stream the video. For example I've seen it being done with VLC, obviously that is not the case here.
The main page is a simulated stream. raspimjpeg continuously produces medium resolution jpegs in a ram folder /run/shm/mjpeg/cam.jpg. The main Index page is using ajax to continuosly fetch the updated preview image making this roughly equivalent to a mjpeg stream.

This technique allows raspimjpeg to feed motion detection the same way and to keep both feeds going even when simultaneously doing a high frame rate full HD video capture in the background.

It is fairly easy to extract just the preview part of the main page if one wanted this displayed in some other web context.

So when a video is saved it's just putting those JPEGS together?

Dittie · Tue Mar 31, 2015 10:18 pm

Great piece of software!

So I want to move my media directory to /var/www/media/usb which I mounted my USB disk on. Now I can get the GUI to look at that directory for downloading images/video. However I cannot find which config I need to change to have the files actually written to that directory.

btidey · Tue Mar 31, 2015 10:32 pm

wanwari wrote: So when a video is saved it's just putting those JPEGS together?

No. The capture of images, videos and time lapse batches is completely separate from the preview on the main page.

This is the main distinguishing feature of this approach. raspimjpeg can simultaneously pull two independent feeds from the camera. The first is a sequence of these medium resolution medium refresh rate jpegs used to feed motion detection and the main web page. The second is either video or still capture which are initiated either manually or on motion detection and these can be at the resolution / frame rate specified up by the settings up to the limits of the camera. When you go into the downloads page and select a capture to view then you are seeing the full high definition playback (e.g. playing back a mp4 video in an html video window. Now you might not see the full benefit of a high resolution capture there because it is being scaled by the browser to fit into the window. If you download the video and play it back with a media player then you get the full benefit.

jarrah31 · Wed Apr 01, 2015 6:49 am

Dittie wrote:Great piece of software!

So I want to move my media directory to /var/www/media/usb which I mounted my USB disk on. Now I can get the GUI to look at that directory for downloading images/video. However I cannot find which config I need to change to have the files actually written to that directory.

Hi, this should help: http://elinux.org/RPi-Cam-Web-Interface ... her_folder

adulhamid20 · Wed Apr 01, 2015 8:25 am

hi
how can i make RPI web interface opening in Webiopi page ?

i saw this but ... and i dont know how can i make it ..
https://raw.githubusercontent.com/mardi ... uction.txt
please help me
thanks

Dittie · Wed Apr 01, 2015 12:24 pm

jarrah31 wrote:
Dittie wrote:Great piece of software!

So I want to move my media directory to /var/www/media/usb which I mounted my USB disk on. Now I can get the GUI to look at that directory for downloading images/video. However I cannot find which config I need to change to have the files actually written to that directory.
Hi, this should help: http://elinux.org/RPi-Cam-Web-Interface ... her_folder

Hi Jarrah,

Thanks for your reply. This documentation does not seem to mention anything about setting the standard /var/www/media folder to /var/www/media/usb (which is where I mounted my usb disk).

piecam · Wed Apr 01, 2015 1:47 pm

HI Robert,

Just noticed that 2 out of 5 pis seemed stuck again. Web feed frozed at timestamp of yesterday's eventing 6:00 clock. there's a unconverted h264 file in the folder still.

Any info you may need that help fix this problem?

thanks
peng

piecam · Wed Apr 01, 2015 1:50 pm

one of the two was stuck at yesterday's morning 9:00am.

KarolGT · Wed Apr 01, 2015 5:15 pm

How to enable image recording and video recording at the same time?

I have set image_path and video_path, video is capturing fine, but I would like to capture also images with maximum resolution (2592 x 1944) with video (1920 x 1080)

My settings:

# Video Options
#
video_width 1920
video_height 1080
video_fps 25
video_bitrate 17000000
MP4Box false
#MP4Box_fps 25

#
# Image Options
#
image_width 2592
image_height 1944
image_quality 100

The problem is I do not see everything, my video (picture) is cut, but if I set for example video for 1296x976 I see everything (but of course in lower resolution),
how to see everything with big resolution?

The other possibility I can accept: capture video 1920x1080 and 2592 x 1944 images.
I hope I described problem correctly.

KarolGT · Wed Apr 01, 2015 5:28 pm

ok, with

video_width 1600
video_height 1200

it is fine.
but I still do not understand why with FullHD (1920x1080) the video is cut?

btidey · Wed Apr 01, 2015 5:35 pm

Dittie wrote:
jarrah31 wrote:
Dittie wrote:Great piece of software!

So I want to move my media directory to /var/www/media/usb which I mounted my USB disk on. Now I can get the GUI to look at that directory for downloading images/video. However I cannot find which config I need to change to have the files actually written to that directory.
Hi, this should help: http://elinux.org/RPi-Cam-Web-Interface ... her_folder
Hi Jarrah,

Thanks for your reply. This documentation does not seem to mention anything about setting the standard /var/www/media folder to /var/www/media/usb (which is where I mounted my usb disk).

The docs are basically saying you can set up a mount point to reference the /var/www/media folder without having to create a separate usb subfolder. That should work with the standard set up without having to change anything on the RPi Cam side.

If you do want to physically use a subfolder for other reasons then you just need to change one or more of the path definitions in /etc/raspimjpeg

e.g.
image_path /var/www/media/usb/im_%i_%Y%M%D_%h%m%s.jpg
lapse_path /var/www/media/usb/tl_%i_%t_%Y%M%D_%h%m%s.jpg
video_path /var/www/media/usb/vi_%v_%Y%M%D_%h%m%s.mp4

These control where the real captures are stored. The thumbnails always go into the media folder directly.

It is possible to move the thumbnail folder by using the media_path but you then also have to edit config_php so the web side knows where stuff is so I don't recommend doing that without good reason.

btidey · Wed Apr 01, 2015 5:49 pm

KarolGT wrote:ok, with

video_width 1600
video_height 1200

it is fine.
but I still do not understand why with FullHD (1920x1080) the video is cut?

This is just the way the video works on the camera nothing directly to do with RPI Cam Web. The camera sensor has 2592 * 1944 pixels and when you grab a still at this resolution all pixels are used. Note this aspect ratio here is 4:3 (2592/1944).

Check out https://github.com/waveform80/picamera/ ... cs/fov.rst

Note that it doesn't mention 1600x1200 there but that might have been added.

btidey · Wed Apr 01, 2015 5:55 pm

piecam wrote:HI Robert,

Just noticed that 2 out of 5 pis seemed stuck again. Web feed frozed at timestamp of yesterday's eventing 6:00 clock. there's a unconverted h264 file in the folder still.

Any info you may need that help fix this problem?

thanks
peng

I am not sure why you are having difficulties unless it is associated with errors accessing your external storage. I have made the code more tolerant to file errors during saving data but there still may be issues in that area.

2 suggestions.

1) Set 1 of the Pi's to use the standard internal set up and see if that remains stable.

2) Start the software in debugF mode. Just run the installer script with debugF instead of start. This will cause raspimjpeg to log its activity and errors to a file called raspiDebug.txt in the www folder.

dutchronnie · Thu Apr 02, 2015 6:13 am

Yesterday i had a problem wit RPI Cam Web Interface, and i was not able to solve.
The only way to have it al function again was to make a new image, and install eveything from beginning.

This is what i did.
In the camera settings i have set the iso value on "800" (was "0")
and i have set the "sports" setting (was night)

My screen starts flickering, and had no image preview. i was not able to turn back the settings.
on other browser i could not connect to RPI cam web interface.
rebooted the Pi, but it was all the same.
then tried with putty to change manually the config files, but i noticed that the iso setting was "0"
but stil not able to start RPIwebcam.

on that moment the only solution for me was to re-install everything again.

RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface

Re: RPi Cam Web Interface