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

  1. Mike
    19 May 2013 at 7:03 pm

    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

    • 20 May 2013 at 5:11 am

      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. elo
    25 May 2013 at 1:49 pm

    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…

    • 25 May 2013 at 5:24 pm

      Not that I’m aware of. There’s an amount of buffering that happens.

      • elo
        25 May 2013 at 8:38 pm

        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 🙂

        • 26 May 2013 at 5:43 am

          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. riddl
    26 May 2013 at 10:50 am

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

    • 1 April 2014 at 11:50 am

      have you found out how to do it on html5?

      • 4 April 2014 at 10:27 am

        Nope. But others might have done – check the Foundation’s forum?

  4. 29 May 2013 at 8:55 pm

    Thanks for this, saved me a lot of time!

  5. cola
    30 May 2013 at 9:14 am

    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

  6. Angus Lyon
    21 July 2013 at 2:35 pm

    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

    • 21 July 2013 at 3:07 pm

      Try:
      apt-get install vlc

      • Angus Lyon
        21 July 2013 at 6:54 pm

        Thanks for the feedback

  7. Supra
    14 August 2013 at 1:32 pm

    Where do i put html on raspberry pi?

  8. Supra
    19 August 2013 at 7:26 pm

    How do I put web-page to insert code?

  9. WacoJohn
    5 October 2013 at 11:49 pm

    Was relieved to find this tutorial. Since then, it seems axvlc.cab is no longer available:

    https://forum.videolan.org/viewtopic.php?f=16&t=97518

    Can you revise the tutorial to use something else????? Please?? PLEASE?

  10. mic78000
    16 April 2014 at 7:03 am

    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

    • 16 April 2014 at 8:17 am

      Hmmm. Try running it from a terminal inside X windows (startx)?

      • mic78000
        16 April 2014 at 11:03 am

        Inside X windows it’s ok !!!

        thanks !!
        Do you know if it is possible to do that inside putty ?

        • 9 May 2014 at 3:23 pm

          I had the same problem. I set up x11 forwarding in my putty and set the env DISPLAY = :0 and it worked for me

  11. 9 May 2014 at 3:22 pm

    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.

  12. 28 May 2014 at 10:44 am

    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

    • 28 May 2014 at 3:09 pm

      Looks like you have something else running on that port. Try a different one.

      • 30 May 2014 at 9:00 am

        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

  13. 29 May 2014 at 1:50 pm

    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

    • 30 May 2014 at 12:11 pm

      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.

  14. Sj
    6 July 2014 at 7:38 am

    Nice

  15. Shimonu
    22 August 2014 at 6:01 pm

    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?

  16. 22 June 2015 at 4:30 pm

    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.

    • recantha
      2 July 2015 at 11:45 am

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

  17. mahdi
    20 August 2015 at 3:18 pm

    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

  18. Robyn
    9 December 2015 at 5:11 pm

    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

    • Michael Horne
      9 December 2015 at 5:59 pm

      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

  19. Supra
    10 December 2015 at 3:44 am

    How do I create your web-page? Using Raspbian Jessie Model B+.

Leave a Reply

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