Now that we have the required software installed and configured, it is time to install our own software. We will start by installing our home page, called index.html
, in the directory where Lighttpd expects to find it.
The directory name is /var/www
, as shown here:
The software uses a modified version of wfb.php
, which is a web-based file browser written in PHP. It is available for download at http://cgdave.github.io/webfilebrowser/.
There are three subdirectories:
wfbtrash
directory is used by wfb
to store deleted files. This directory must have write privileges enabled or the delete button on the form will not be available.wfbimages
directory is where the icons for the form are stored. If you want to use your own icons, this is where you will put them.video
directory is where we will store all our pre-recorded videos. This directory is the cleanest way of keeping our video files separate from the program files.What I have done is created two versions of wfb.php
and changed the base directory
information in each file.
The following is the code for wfb_video.php
:
$basedir = "video";// Base directory = custom directory $filelinks = true;// Links on files enabled $basevirtualdir = "video" //video directory
File links are enabled so that when the user clicks on a given link, the video will automatically start playing, assuming that the required codecs are installed in the browser.
The following is the code for wfb_files.php
:
$basedir = "/"; // Base directory = custom directory $filelinks = true;// Links on files enabled $basevirtualdir = "/"; // root directory
In this case, the root directory of the file system can be accessed. There doesn't appear to be any way to pass directory information to the PHP code, so we need a different wfb.php
file for each location.
When the user enters the location of the media server into their browser, they will be directed to index.html
on the BeagleBone (in my case, 192.168.10.127
).
When the user presses the Recorded Video button, the following custom file browser screen appears:
The File Manager interface is pretty much the same, except that the browser is now pointing to the root directory of the BeagleBone. This version of the PHP file should have password access enabled in order to keep normal users from damaging things.
As we can see in the following screenshot, we have Root File System Access:
In both cases, there is an additional area at the bottom of the page that allows the user to do many of the things that they can do in a graphical user interface based system, including uploading files from the Internet.
The user is also able to access the IP cameras that are connected to their local network. In this case, the HTML code of index.html
must be modified so that it points to the user's camera.
In this case, the IP address is 192.168.10.110
and the default page to view is jview.htm
. The reader's IP address and default page will probably be different. This information is for a D-Link DCS-933L camera, which requires the user to log in before accessing the video.
<h2>For Realtime Video from your IP Camera Press:</h2> <p> <a href="http://192.168.10.110/jview.htm" target="_parent"><button>IP Camera 1</button></a> </p>
Most, if not all, IP cameras have a built-in web server with a configuration page. What you can configure varies from camera to camera, but the most important part is the camera's IP address. In the following screenshot, you will see that I have configured the camera to use a static IP address. This is so that our home page will always be able to find the camera. My network uses the IP addresses 192.168.10.xxx
, so I set up the camera at 192.168.10.110
in the LAN settings. My default gateway is 192.168.10.1
; yours may be different.
When you access the camera, you must first enter a username and password. The username is admin
and the password field is blank. You should probably change this in the settings menu.
As you can see in the following screenshot, this particular camera has a number of features that can be SETUP for security monitoring:
Once this is done, the user can access the camera from the web application by clicking on the LIVE VIDEO button at the top of the screen, as shown here:
There are several buttons at the bottom of the video's window, which allows the user to (digitally) zoom in and out, turn the sound on and off, and enable Night Mode. In night mode, the camera will automatically detect when the light level drops and will turn on the Infrared LEDs. Other IP cameras will, of course, have different controls, such as pan, tilt, and optical zoom.