Stream the #RaspberryPi camera module through your browser

Using a combination of the things I’ve learned up to now and a little help from others on the internet, I’ve worked out how to embed video from the Raspberry Pi camera module inside a web-page.

There are two methods of outputting video for this: HTTP and RTSP. I’ll deal with HTTP first as a) it’s better quality video and b) letting traffic through a firewall for HTTP is easier than RTSP. The two methods are very similar though.

All code for this and other camera module stuff is held on GitHub: https://github.com/recantha/camera-pi

The first step is to create a video stream. I covered this on a previous blog, but repeating it here for ease-of-use.

You create the stream by running the following command on the Pi (with thanks to Leo White):

raspivid -o - -t 9999999 -w 800 -h 600 --hflip | cvlc -vvv stream:///dev/stdin --sout '#standard{access=http,mux=ts,dst=:8080}' :demux=h264

This effectively broadcasts the video stream onto port 8080 of the Pi.

Now, we create the web-page that will show the video stream. For this, I’m relying on the VLC browser plugin. It’s probably possible to do this with the HTML5 video player tag but I haven’t figured out how to do that yet. Create your web-page with the following code:

<!DOCTYPE html>
<html><body>
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
 codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
 width="800" height="600" id="vlc" events="True">
 <param name="Src" value="http://PI_IP_ADDRESS:8080/" />
 <param name="ShowDisplay" value="True" />
 <param name="AutoLoop" value="False" />
 <param name="AutoPlay" value="True" />
 <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
 target="http://PI_IP_ADDRESS:8080/" ></embed>
</OBJECT>
</html></body>

Make sure you replace PI_IP_ADDRESS with, surprisingly, the IP address of your Pi.

View the web-page in your browser and, providing the plugin works, you should see live video. There will be a time-delay, and this will depend on the speed of your Pi, the speed of the computer running the web browser and the speed of your network.

The RTSP version is very similar. Here’s the streaming script:

raspivid -o - -t 99999999999 -w 800 -h 600 --hflip | cvlc -vvv stream:///dev/stdin --sout '#rtp{sdp=rtsp://:8080/}' :demux=h264

The HTML code is:

<!DOCTYPE html>
<html><body>
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
 codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
 width="800" height="600" id="vlc" events="True">
 <param name="Src" value="rtsp://PI_IP_ADDRESS:8080/" />
 <param name="ShowDisplay" value="True" />
 <param name="AutoLoop" value="False" />
 <param name="AutoPlay" value="True" />
 <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
 target="rtsp://PI_IP_ADDRESS:8080/" ></embed>
</OBJECT>
</html></body>

 

40 comments for “Stream the #RaspberryPi camera module through your browser

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.