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>

 

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

  1. Is there a way to wrap the video in mp4 on the fly before streaming? That should allow you to use the html5 video tag

    • I think in theory if the output was run through ffmpeg/avconv before it was streamed with vlc, then yes. When I tried to do that, it only gave me 4fps and the buffer quickly ran out.

  2. i have a delay of about 4 – 6 seconds. is there a way to reduce this? i tried to reduce the video size but it didn’t work…

      • okay, now i got it working with –fps 10
        now it works perfectly 🙂
        the next is to stream mp4 to use it directly in the html5 video tag
        thanks for sharing 🙂

        • You’re welcome 🙂 Let me know if you get it working. I’ve tried to do it before but I’ve lost the command to do it – wasn’t very successful anyway, about 4fps

  3. Thanks for the great Post. Would also love streaming via the html5 video tag. Going to test these things out.

  4. Hi all

    if I try over lan cable it works fine, but if I change to wlan then the PI restart after executre the comand. did anybody have an idea?

    thx

  5. hi,
    I am experimenting with my pi and its camera module.
    I have tried to implement your scripts but i get an error implying cvlc is unkmown.
    i have tried to install cvlc via apt-get but it is not available.
    I would appreciate any advice you can give.
    Thanks in advance

  6. Thanks !
    When I write the comand raspivid -o – -t 9999999 -w 800 -h 600 –hflip | cvlc -vvv stream:///dev/stdin –sout ‘#standard{access=http,mux=ts,dst=:8080}’ :demux=h264:

    I have some errors :

    [0x1ac6148] inhibit interface error: Failed to connect to the D-Bus session daemon: /usr/bin/dbus-launch terminated abnormally with the following error: Autolaunch error: X11 initialization failed.


    [0x1ac6148] main interface error: no suitable interface module

    [0x1ac8988] main interface error: no suitable interface module
    [0x19618f0] main libvlc error: interface “globalhotkeys,none” initialization failed

    any idea ?
    Michel

  7. Has anyone tried to put the command raspivid -o – -t 9999999 -w 800 -h 600 –hflip | cvlc -vvv stream:///dev/stdin –sout ‘#standard{access=http,mux=ts,dst=:8080}’ :demux=h264 in a startup script? Everytime i try it gives me an error.

  8. i had a problem when I write the comand raspivid -o – -t 9999999 -w 800 -h 600 –hflip | cvlc -vvv stream:///dev/stdin –sout ‘#standard{access=http,mux=ts,dst=:8080}’ :demux=h264
    net: listening to * port 8080
    [0xeb6900] main access out error: socket bind error (Permission denied)
    [0xeb6900] main access out debug: socket error: Address family not supported by protocol
    [0xeb6900] main access out error: cannot create socket(s) for HTTP host
    [0xeb6900] access_output_http access out error: cannot start HTTP server
    [0xeb6900] main access out debug: no sout access module matching “http” could be loaded
    [0xeb6900] main access out debug: TIMER module_need() : 31.863 ms – Total 31.863 ms / 1 intvls (Avg 31.863 ms)
    [0xeb5018] stream_out_standard stream out error: no suitable sout access module for `http/ts://:8080′
    [0xeb5018] main stream out debug: no sout stream module matching “standard” coul d be loaded
    [0xeb5018] main stream out debug: TIMER module_need() : 42.857 ms – Total 42.857 ms / 1 intvls (Avg 42.857 ms)
    [0xeb5018] main stream out debug: destroying chain… (name=(null))
    [0xeb5018] main stream out debug: destroying chain done
    [0xeb4dd0] main stream output error: stream chain failed for `standard{access=ht tp,mux=ts,dst=:80}’
    [0xea70a0] main playlist debug: finished input
    [0xd57208] main input error: cannot start stream output instance, aborting
    [0xea70a0] main playlist debug: dead input
    [0xd57208] main input debug: TIMER input launching for ‘stdin’ : 56.482 ms – Tot al 56.482 ms / 1 intvls (Avg 56.482 ms)
    [0xea70a0] main playlist debug: changing item without a request (current 0/1)
    [0xea70a0] main playlist debug: nothing to play

      • I changed the port but i have the same problem 🙁
        [0x1a18a8] inhibit interface error: Failed to connect to the D-Bus session daemon: Unable to autolaunch a dbus-daemon without a $DIS PLAY for X11
        [0x1a18a8] main interface debug: no interface module matching “inh ibit,none” could be loaded
        [0x1a18a8] main interface debug: TIMER module_need() : 8.441 ms – Total 8.441 ms / 1 intvls (Avg 8.441 ms)
        [0x1a18a8] main interface error: no suitable interface module
        [0x27b0a0] main playlist debug: playlist threads correctly activat ed
        [0x27b0a0] main playlist debug: adding item `stdin’ ( stream:///de v/stdin )
        [0x27cb20] main interface debug: looking for interface module: 1 c andidate
        [0x27cb20] main interface debug: no interface module matching “glo balhotkeys,none” could be loaded
        [0x27cc10] main input debug: Creating an input for ‘stdin’
        [0x27b0a0] main playlist debug: no fetch required for (null) (art currently (null))
        [0x27b0a0] main playlist debug: rebuilding array of current – root Playlist
        [0x27b0a0] main playlist debug: rebuild done – 1 items, index -1
        [0x27cb20] main interface debug: TIMER module_need() : 13.922 ms – Total 13.922 ms / 1 intvls (Avg 13.922 ms)
        [0x27cb20] main interface error: no suitable interface module
        [0x1188f0] main libvlc error: interface “globalhotkeys,none” initi alization failed
        [0x27cb20] main interface debug: looking for interface module: 1 c andidate

  9. I changed another port but i have the same problem 🙁

    0x163b820] main interface debug: looking for interface module: 1 candidate
    [0x163b820] inhibit interface error: Failed to connect to the D-Bus session daemon: Unable to autolaunch a dbus-daemon without a $DISPLAY for X11

    [0x15b28f0] main libvlc error: interface “globalhotkeys,none” initialization failed

    • It’s not the same problem. It looks like you’re not in X windows and VLC needs X windows to work.. Try doing startx and running it from within an LX Terminal.

  10. I used the code and got it working fine. However I experience the video at the receiving end to be pretty poor with a lot of artifacts. Basically if there is any movement in the video I see “broken” tiles with incorrect color and so on as if those parts were not being received correctly. Is this something that is recognized and can it be mended?

  11. Sorry, I’m new to this. You wrote, “View the web-page in your browser …” It’s not clear to me how to do that. Don’t you have to somehow integrate with a web server? This may be really basic, but I’d be grateful for help filling the gap.

    • Yes, you’ll need to look up how to install something like Apache 2 or Nginx (which is lighter-weight)

  12. thanks !
    recantha
    How do I put web-page code that Not specified stream server string?
    for example
    target=”rtsp://PI_IP_ADDRESS:8080/
    ip adress:port and string stream hidden in web page source code in web clint web brouwser???!!
    any idea ?
    mahdi

  13. Hello,
    Just wondering if there is an alternative to VLC for streaming video from RPi to web browser, NPAPI plugin for VLC is no longer supported on Chrome which is preventing me from using it in my android app.
    I really dont want to use mjpeg streamer.

    Any thoughts?
    Thannks
    Robyn

    • Hi Robyn,
      I’m afraid it’s been a long time since I’ve actually done this.
      I think the best thing to do is to post your query to the Foundation forums – there should be _somebody_ who has got the same problem.

      Mike

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.