Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Video Surveillance: Configuring the Server

Learn how to read the video stream you set up in the first part of this tutorial and accept it at the remote location.


In the first part of the tutorial, you learned how to create a web camera stream on your PC.

Now we need to read the stream and accept it at the remote location. This task can also be done in Java (using Apache Tomcat and Java Server Pages), but since PHP is a more popular solution for building websites, I'll explain how to solve this problem using PHP.

Displaying the Video Using VLC

Before we start working with the code, I would like to point out that if you just want to watch the video on a remote location (without using storage, secure login etc.), you could do that with using VLC media player only. Just open the program, click File > Open network stream, paste the port and IP address there, and click play.

Displaying the Video on a Web Page

The code used to display a web camera stream on a remote location (i.e. web page) depends on the video format. For example, if the video stream format was .swf, we would have to use the Flash player code; if the stream was .wmv format, we would use Windows media player. Let's start with the flash video format:

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400"> <param name="movie" value="myvideo.swf"> <param name="quality" value="high"> <param name="loop" value="false"> <embed src="myvideo.swf" width="400" height="400" loop="false"

The only thing you need to change for this code to work is the video name (myvideo.swf). In this case, just use the IP address of the stream. Note that we use two HTML tags (object and embed) for maximum browser compatibility. Also have in mind that the code will not work without having the right player installed (flash player in this case).

Windows Media Video (.wmv)

The following code displays a windows media video on a web page:

<object id="MediaPlayer" width="192" height="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
<param name="FileName" value="myvideo.wmv">
<param name="ShowStatusBar" value="false">
<param name="ShowDisplay" value="false">
<embed type="application/x-mplayer2" SRC="myvideo.wmv" name="MediaPlayer"
width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </embed>

QuickTime (.mov)

To show a QuickTime video on a web page, use this code:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="180"
<param name="SRC" value="myvideo.mov">
<param name="CONTROLLER" value="false">
<embed src="myvideo.mov" width="320" height="180" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">

MPEG-4 Video (.mp4)

MPEG-4 videos are also opened with QuickTime, but the HTML code is different:

codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="136">
<param name="src" value="myvideo.mp4">
<embed src="myvideo.mp4" type="image/x-macpaint" 
pluginspage="http://www.apple.com/quicktime/download" width="160" height="136" autoplay="true"></embed>

Displaying the Video from PHP

One of the possible problems with previous streaming methods is that anyone who knows to view the HTML source of a web page can see your stream's address. This can be solved by showing a video stream directly from PHP.

First, you need to check php.ini file and find "allow_url_fopen" option. It should be set to "1", in order to allow PHP file functions to open external URLs. After that, create a PHP page with the following code:

function flush_buffers(){
$path = "/path/to/myvideo.flv";
if (is_file($path)) {
    header("Content-Disposition: attachment; filename=myvideo.flv");
    $fd = fopen($path, "r");
    while(!feof($fd)) {
        echo fread($fd, 1024 * 5);
    fclose ($fd);

The code is pretty self-explanatory. The only things that need to be changed are the path to the stream (IP address in this case) and Content-type header. Content-type is different for each video format and can be seen here.

In the third part of this tutorial, you will learn how to display the received data.

Comment and Contribute








