The DIY Surveillance System Using a Webcam – Part 2

If you are reading this without reading the part 1 of this post I suggest you give that a read before starting with this since its gives the basic hardware needed to get everything going. However if your requirements are a simple streaming server with a client read on.

There are two modules within this post aswell I wont bother splitting them up into two rather just go on describing them in one. The first one is the streaming server with a client which serves the need for our surveillance. The second part includes the PHP webpage which includes the streaming client followed by code to generate a request file telling the motor which direction to rotate in.

Streaming Server:  Ill start off with the server which is needed to stream video from a webcam. Im using Red5 which as an open source alternative to the flash media server and is written in java. It supports shared objects, flv streaming and a lot more. Details of this can be obtained from http://osflash.org/red5.  Red5 uses RTMP (real time messaging protocol) to transmit video and data over the internet between a flash player and a server and therefore it is ideal for multiplayer flash games. Infact it provides some demos when you install it which covers the details of shared objects and other neat stuff. Since I’ve effectively touched the installation bit id simply go on and describe the process. It took me a while to understand and get going with red5 and couldn’t find much help for it. Things you need before you can install and get going with red5:

1- Java SE 1.6 SE its available to download from their website and you can get it from http://java.sun.com/javase/

Since red5 is written in java you need it to make it all work.

2- Tomcat – Optional read below

Now there are two paths from here either install Tomcat run the Red5 as a server on it or use the installer provided by Red5 which embeds tomcat and runs Red5 as a service. This phenomenon is summarized in the images below:

If you chose the first path then you have to download the Red5 “War” file and place it in tomcats the “webapps” folder where it would be extracted automatically, this type of installation is explained in more detail here: http://osflash.org/red5/windowstomcat . I chose the latter but I did try the other one as well and for some reason my demos would not work on that so I decided to go with the installer. Note even with the Installer you do need the Java SE. Once you have done that by default the server is hosted on port 8080 so typing http://localhost:8080 should show you a red5 welcome page.

Now if you get an error on localhost go to windows->services and check for Red5 and make sure its running. If its not make sure you have the right Java sdk I’m using 1.6 along with the installer for that version. You can change the port its running on by going to the directory where you installed red5->conf->Red5.properties file. In here you will see different settings, look at the one which says HTTP and it is the port where http requests are served, change this to whatever you like. RTMP is set to 1935 which is the default standard port for RTMP but you can change this to whichever ones are available on your system.

I had a lot of problems with these since my apache server and Red5 were on the same port and wouldn’t get along. Then I changed the ports but I still could not access them. The reason came out to be that I was behind University Firewall (don’t ask ) and the ports were blocked so I had to get them open to get all of this going! A pain but someone has to do it. Make sure you don’t have these firewall problems.

The Server:

Now for the streaming server, well once youve installed Red5 now you should be able to view the demos. Go to the demo page and there is one called “simpleBroadcaster”. These demos are open source and come with the flash source so you can do all sorts of things with them. Once you are at the demo page, enter the ip address or localhost if you want to run it locally and click connect. The 5 symbol should turn green and you should be able to see your camera. If that is the case your server is working along with the RTMP port. If youve used something other than 1935 for the RTMP you would have to run the broadcaster as “rtmp://localhost:port/oflaDemo”.

The Client:

Similarly within the same demo’s page open another browser page and open simpleSubscriber. Enter the IP address or localhost and click the connect button. Now you should be able to view the stream. Its that simple. You can also use the clients which provide support to view RTMP streams. One can be found at: http://www.longtailvideo.com/ which allows you to configure the player online and generate code to embed in your webpage’s. I’m using the one which comes with the Red5 server.

The webpage:

I copied the swf file for the simpleSubscriber which is present in the Red5 into my apache web server folder where I will create the page embedding the client. Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Rotomatic</title>

</head>

<body>

<script>

swfobject.embedSWF("simpleSubscriber.swf", "myContent", "400", "400", "8.0.0", "assets/expressInstall.swf");

</script>

<div align="right" >

<h1>You need the Adobe Flash Player for this demo, download it by clicking the image below.</h1>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

</div>

</body>

</html>

The swfobject.embedSWF embeds the swf into the webpage, there is an extra “assets/expressInstall.swf” which is a support to allow users visiting the webpage to install flash player or update it without leaving the webpage. You can embed you own player here like the one I mentioned earlier provided by Longtail which can be configured online along with the code to embed it.

The Remaining Webpage:

Now for the rest of the page. Im going to create two simple buttons one to allow the camera to be panned to the right and the other to pan to the left. When these buttons are clicked a file is generated in a request folder. This file contains either a 0 or a 1. “0” for a clockwise rotation and “1” for an anticlockwise rotation. Pretty stupid creating a file with such information right?. Not really it can later be configured to allow auto panning options of the camera along with angle values and other neat stuff. Im using JQuery (sorry Sajax fans but I mentioned I was going to move to JQuery) to transfer data from my webpage to the PHP script that writes the file. The code for the main page is as follows:


<?php

session_start();

$PHPSESSID = session_id();

include("rwfile.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Rotomatic</title>

<script src="scripts/jquery.js"></script>

<script src="scripts/jquery.ajaxmanager.js"></script>

<script src="assets/swfobject.js"></script>

</head>

<body>

<script>

var ajaxManager1 = $.manageAjax({manageType: 'abortOld', maxReq: 10});

var dirc;

function send(){

ajaxManager1.add({   success: function(html)

{

},

type: "POST",

url: "rwfile.php",

data:      "dir=" + dirc

});

}

function incrementAngle(){

dirc=0;

send();

}

function decrementAngle(){

dirc=1;

send();

}

swfobject.embedSWF("simpleSubscriber.swf", "myContent", "400", "400", "8.0.0", "assets/expressInstall.swf");

</script>

<div align="right" >

<h1>You need the Adobe Flash Player for this demo, download it by clicking the image below.</h1>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

</div>

<div align="left">

<label>Camera Panning</label>

<br>

<input type="button" onclick="decrementAngle();"value="<<">

<input onclick="incrementAngle();" value=">>">

</div>

</body>

</html>

The include(“rwfile.php”);  file holds the PHP script which will we will see in a bit and is responsible for writing the text file holding the direction information. The other two within the script tags are the standard JQuery files while the swfObject is for the express installer. The functions incrementAngle() and decrementAngle() simply set the values of the dirc variable and performing a post operation to rwfile.php for writing the file. The code above also includes the streaming client code.

The code for the  “rwfile.php” looks something like this:


<?php

session_start();

$PHPSESSID = session_id();

writeRequestFile();

function writeRequestFile()

{

if(!is_dir("request"))

{

mkdir("request") or die("Could not create request directory");

}

if(!is_dir("request\\temp"))

{

mkdir("request\\temp") or die("Could not create request directory");

}

$id=session_id();

if(is_file("request\\{$id}"))

{

unlink("request\\{$id}");

}

if(@$fh = fopen("request\\temp\\{$id}","w"))

{

$dir=$_POST["dir"];

$angle=$_POST["Angle"];

fwrite($fh,"dir=$dir\r\n");

fwrite($fh,"angle=$angle\r\n");

fclose($fh);

}else

{

return FALSE;

}

return rename("request\\temp\\{$id}","request\\{$id}");

}

?>

The session is used as a file name to which holds the direction values. First it is ensured if the “request” directory exists along with a temp directory whose purpose is explained below, if they don’t exist they are created. If a file exists within the request directory with the same session id it is deleted the unlink command performs this operation. The files are initially written to a temp directory within the request folder. This is just a safety measure to ensure the file is not written while already one is being created with the same session id, since the event occurs on a button click some users might go crazy pressing the button. The ending code is a return call with a rename which moves the temp file to the request directory.

That’s all for the web page front end. Now I will describe how the file created by the PHP is handled by the host program followed by the code for the microcontroller in Part 3 – The communication module. So if you’re still interested move to part 3.

About these ads

~ by garagedeveloper on December 5, 2009.

2 Responses to “The DIY Surveillance System Using a Webcam – Part 2”

  1. [...] Surveillance System Using a Webcam – Part 3 Im going to assume you have read the Part-1 and Part-2 of this post. Part-1 provides the hardware and Part-2 with the software for streaming and [...]

  2. [...] sent us his custom surveillance system, part 1, part 2, and part 3 after needing a way to find out why some cables at work were becoming unplugged [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: