Camera module, Tutorials

Stream the #RaspberryPi camera module through your browser

by  •  • 41 Comments

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>

 

Camera module

Stream the #RaspberryPi camera module to VLC media player

by  •  • 7 Comments

Leo White, on the Foundation forum, has provided the answer to a question I asked about streaming from the Pi camera to VLC.

There are two alternatives. One is over http, the other uses the rstp protocol.

Here’s the HTTP version:

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

And here’s the RTSP version:

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

Now, the RTSP stream is better quality but the HTTP stream lets you do things like allowing remote clients to connect to it through your router.

To open up the streams, use:

http://<pi ip address>:8080

or

rtsp://<pi ip address>:8080