Streaming your webcam from your website

Introduction

You want to stream (i.e. (near) real-time) your webcam from your website. However:

This document will show you how to stream your webcam from your website and comply to the bullet points above.

Requirements

Step 1: Install camserv to do the streaming

Camserv takes a video-for-linux (V4L) input and streams it live to clients, on request via a mini-webserver that's built in to camserv.

Install camserv (Debian users: aptitude install camserv).

Step 2: Configure camserv

You need to edit /etc/camserv/camserv.cfg. This contains "sections".

With regards to the video source sections, I removed them all (BTTV, FreeBSD driver etc.) apart from the video_v4l_qcam section, because I have a Logitech Quickcam. Don't remove the video_basic driver though.

I then created myself a custom overlay to use:

[banner_text]
path            /usr/lib/camserv/libtext_filter.so.0
text            /home/david :: Webcam
bg              transparent
fg              #000000
x               0
y               230
mangle          1
fontname        6x11

In the "socket" section, I changed the listen_port to 9191.

I then changed the "filters" section so it looks like:

[filters]
num_filters             3
filter0_section         time_stamp
filter1_section         banner_text
filter2_section         jpg_filter

And finally, the "video" section was changed so that video_section matched what driver I was using (video_v4l_qcam in this case) and set the maxfps option to 1. Make sure memhack is set to 1.

== Step 3: Run and testing camserv ===

Simply run camserv /etc/camserv/camserv.cfg from the command line, as a normal user.

To test it, open your web browser and browse to http://localhost:9191 (assuming you changed the port to 9191, which will be assumed from now on). You should see your webcam image and it should be streaming. Although at this stage it'll be very "jittery" stream and it won't seem like 1fps.

Step 4: Enable the web server to access the stream

This is the part the gets around the issue of opening up ports, forwarding them from the Internet in to your LAN and then you're stuck with the machine the port is forwarded to and you can't move around freely. To enable all this, we use a reverse SSH tunnel.

Assuming in your camserv configuration you changed the port to 9191, create a reverse SSH tunnel to the server your website is on:

$ ssh -C -c blowfish-cbc -R 127.0.0.1:9191:127.0.0.1:9191 -l username webserver.com

Once you're SSH'd to the web server (webserver.com in the above ssh command), telnet to 127.0.0.1 on port 9191 and you should see loads of rubbish on the screen. Pressing Ctrl+] and then typing quit will exit you from telnet.

If you don't see anything or you get "Connection refused", something is horribly wrong.

Step 4: Install the web page components

SSH'd to the server your website is on, you need to download Cambozola which is a Java applet to let users view your live webcam stream:

$ mkdir webcam
$ cd webcam
$ wget http://www.charliemouse.com/code/cambozola/cambozola-latest.tar.gz
$ tar -zxvf cambozola-latest.tar.gz
$ cp cambozola-0.68/dist/cambozola.jar .
$ rm cambozola-latest.tar.gz
$ rm -rf cambozola-0.68

Now you need to create a "proxy" using PHP which Cambozola will connect to and in turn this PHP proxy will connect to your reverse SSH tunnel and get the live webcam stream from you.

Create a file called connect.php:

<?
set_time_limit(0);

$fp = @fsockopen ("127.0.0.1", 9191, $errno, $errstr, 5);
if ($fp)
{      
{{{
        fputs ($fp, "GET / HTTP/1.0\r\n\r\n");
       
        while ($str = trim(fgets($fp, 4096)))
                header($str);
       
        fpassthru($fp);
       
        @fclose($fp);
}
?>

}}}

Create a HTML page to tie everything together (such as index.html):

<html>
<head>
<title>Webcam</title>
</head>
<body>

<div align="center">
<applet code="com.charliemouse.cambozola.Viewer"
{{{
        archive="cambozola.jar"
        width="320" height="240"
        style="border-width: 1px; border-color: black; border-style: solid;">   
  <param name="url" value="/webcam/connect.php" />
  <param name="accessories" value="[[ZoomIn]],[[ZoomOut]],Pan,Info" />
  <param name="retries" value="5" />
  <param name="delay" value="1000" />
  <param name="failureimage" value="/images/offline.gif" />
</applet>
</div>

}}}

Step 5: Testing it out

Simply go to http://webserver.com/webcam/ and (fingers crossed) your your image should be streaming, in real time (ish)! It's best to test it from another machine in case the Java applet hasn't been configured correctly and it's connected directly to camserv via 127.0.0.1 for some reason.

Step 6: Automating everything

Under Debian, camserv is run at boot time unless you've changed something. So that's taken care of.

This script will setup the SSH tunnel when you login (this goes on your local machine and is probably very hacky):


#

if [[ -z|$(ps fx | grep ssh | grep '127.0.0.1:9191' | grep -v grep | awk '{print $1}') ]]; then
{{{
        echo "  * Creating reverse SSH tunnel."
        ssh -o '[[ServerAliveInterval]]=10' -o '[[KeepAlive]]=yes' -f -q -nNT -R 127.0.0.1:9191:127.0.0.1:9191 -C -c blowfish-cbc -l username webserver.com
fi


}}}

Save it somewhere sensible (for example ~/bin, assuming that ~/bin is in your $PATH) and chmod +x the script. Now you can either run this script manually each time you login to your machine or we can automate it so it runs on login.

If you want to do this, edit your ~/.bash_profile to call the "webcam SSH reverse tunnel script" we created above. But it's also important you edit/create ~/.bash_logout so it contains:

webcamtunnel=$(ps fx | grep ssh | grep '127.0.0.1:9191' | grep -v grep | awk '{print $1}')
if [[ !|-z "$webcamtunnel" ]]; then kill -TERM $webcamtunnel; fi

Otherwise when you logout, shutdown or reboot your local machine, the server your website is on doesn't realise this and keeps the reverse SSH tunnel open. So the next time you login nothing will work because the port is already in use.

Summary

When things go wrong

To-do/Notes


Page written by DavidRamsden

LinuxHints/StreamWebcam (last edited 2009-01-22 16:15:50 by 86)