Access Live Stream with Raspberry Pi Camera Module on Web Browser using NodeJS?

Question

I am building a time-lapse camera web application using Raspberry Pi and the Raspberry Pi Camera Module. So far I have built a web application (using NodeJS, Express, AngularJS, and BootStrap 3) that can interact with the Raspberry Camera Module using an open source NodeJS module (https://www.npmjs.org/package/raspicam). My web app can set time-lapse settings and take photos by pushing the buttons on the web interface. However, it currently does not have a live stream feature on the web browser where users can watch what the Raspberry Pi Camera module is seeing remotely. I would love to figure out a way to display a live stream of the camera module on the web by simply doing something like this in the html file:

<img src="live-stream-raspberry-pi-camera">

andrew · Accepted Answer · 2014-04-25T18:05:34.933

Here's something I came up with for live streaming from a camera. It's crude but it works in all browsers.

I don't know how you access the Raspberry pi camera but the example below shows how to access a built-in web cam in linux:

Encode your camera to a updateing image file with ffmpeg:

ffmpeg -analyzeduration 0 -i /dev/video0 -update 1 -q 1 -r 5 -y /video/feed/1.jpg

Read the image file with php and output contents on change:

<?php
session_start();
session_write_close();
$imgFile = '/video/feed/1.jpg';
$img = (file_get_contents($imgFile));
$lastImgSize = $_SESSION['imageSize'];
while (true) {
    usleep(20000);
    $img = (file_get_contents($imgFile));
    $imgSize = strlen($img);
    if ($lastImgSize != $imgSize) {
        break;
    }
} 
session_start();
header("Content-type: image/jpg");
$_SESSION['imageSize'] = $imgSize;
echo $img;
exit;

Reload the image with javascript, the php will deliver a new image when available:

<img id="feed" src>
        <script>
            img = new Image
            function f() {
                img.src = "img.php?rnd=" + Date.now();
                img.onload = function() {
                    feed.src = img.src;
                    setTimeout(function() {
                        f();
                    }, 50);
                };
                img.onerror = function() {
                    setTimeout(function() {
                        f();
                    }, 50);
                };
            }
            f();
        </script>

If you're looking for something a bit fancier:

Take a look at flowplayer which supports live streaming from a rtmp / hls source, both can be encoded with ffmpeg.

Or fancier still Dashcast a linux / windows streaming service which encodes live streams in the html5 mpeg-DASH format currently supported by ie and chrome, firefox support is on the way

score 0 · Answer 2 · answered Apr 25 '14 at 17:23

For something that simple you could send a multipart/x-mixed-replace response where each part is a frame of video. Chrome and Firefox removed support for this type of response when used with XMLHttpRequest, but AFAIK they are still allowed for image elements.

Access Live Stream with Raspberry Pi Camera Module on Web Browser using NodeJS?

2 Answers2