Raspberry Pi Webcam

This entry is part 1 of 1 in the series Web Controlled Camera with Raspberry Pi and NodeJS  

When I received my Raspberry Pi 2 for Christmas, I immediately wanted to put it’s quad-core processor to good use. Earlier in the year I had tried to run a webcam from my Model A but had no luck. It would run for a little while but could not handle encoding video at the same time as serving up images on the web.

I was pleasantly surprised that the Raspberry Pi 2 handles both tasks like a champ!

One of my requirements was to serve up a live webcam stream via web sockets. I tried multiple projects but settled on one called jsmpeg from Phoboslab. This small script takes an ffmpeg mpeg1 stream and serves it up to a client via NodeJS. All the client needs is a simple JavaScript script and an html5 canvas. I have had this running for weeks at a time without a glitch. Even after running for a very long time the delay from camera to client is a little less than 1 second!

The shop webcam can be controlled from anywhere in the world.
The shop webcam can be controlled from anywhere in the world.

Here is the script that displays the stream on the webpage:

<canvas id="videoCanvas" width="320" height="240" style="width:320px; height:240px; background-color:black;">
<script src="jsmpg.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('videoCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#444';
ctx.fillText('Loading...', canvas.width/2-30, canvas.height/3);

// Setup the WebSocket connection and start the player
var socketPort = YourWebcamStreamPortHere;
var client = new WebSocket( 'ws://mycontraption.com:' + socketPort + '/' );
var player = new jsmpeg(client, {canvas:canvas});

Here is the upstart script that I use to start the webcam on boot:

# /etc/init/jsmpeg-webcam-server.conf

description "Webcam streaming server using jsmpeg and node.js"
author      "MyContraption.com"

start on (local-filesystems and net-device-up IFACE!=eth0)
stop on shutdown

    exec ffmpeg -s 320x240 -f video4linux2 -i /dev/video0 \
 -f mpeg1video -b 400k -r 30 \
 -vf "drawtext=fontfile=/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf: text='MyContraption.com': fontsize=10:fontcolor=white@1.0: box=1: boxcolor=black@0.5: x=7: y=220, drawtext=fontfile=/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf: text='%{localtime} EST (GMT -6)': fontsize=10:fontcolor=white@1.0: box=1: boxcolor=black@0.5: x=(w-175): y=220" http://localhost:8082/SecretCodeGoesHere/320/240
end script

pre-start script
    echo "[`date`] Starting ffmpeg video capture" >> /home/pi/Devel/Webcam/jsmpeg/jsmpg.log
end script

pre-stop script
    echo "[`date`] Stopping ffmpeg video capture" >> /home/pi/jsmpg.log
end script

The script used to serve it up on the client can be found at the jsmpeg project on github.

Leave a Reply

Your email address will not be published. Required fields are marked *