Raspberry Pi Camera Livestream

Using NodeJS and Raspberry Pi camera module to provide a livestream for your website. Forked and improved version of caseymcj's raspberrypi_node_camera_web_streamer. This project is up-to-date and works with the latest Raspberry Pi OS 11 (Bullseye).

Installation

First make sure the legacy camera support is enabled using sudo raspi-config and then select 3 Interface Options.

Install via npm

Create a new project with

npm init -y

and after that, install this package with

npm install rpi_camera_livestream

Install via git

Clone this repository with

git clone https://github.com/RootDev4/rpi_camera_livestream.git

and install the dependencies with

npm install

Quick start

The following snippet automatically starts an express webserver and continuously streams the captured video frames from the Raspberry Pi camera module via the default route /live.stream

Server

const livestream = require('rpi_camera_livestream')

livestream.start()

Client

<img src="http://<your_server_ipaddr>/live.stream">

or just open http://<your_server_ipaddr>/live.stream in your browser.

Basic usage

const livestream = require('rpi_camera_livestream')

livestream.setVerboseMode(true)     // enable verbose mode
livestream.setPort(3333)            // set webserver port
livestream.setPathname('/webcam')   // set route/pathname
livestream.start().then(url => console.log(`Livestream started on ${url}`))
// > Livestream started on http://<your_server_ipaddr>:3333/webcam

Controls

const livestream = require('rpi_camera_livestream')

livestream.start()  // Starts livestream and returns livestream URL
livestream.pause()  // Pauses a started livestream
livestream.resume() // Resumes a paused livestream
livestream.stop()   // Stops a started livestream

All controlling methods are promise-based and hence await'able and then'able

const livestream = require('rpi_camera_livestream')

livestream.start().then(url => {
    console.log(`Livestream started on ${url}`)

    livestream.pause().then(() => {
        livestream.resume()
    })
})

await livestream.stop()

Get last frame

Returns the last captured frame as buffered value. If no images have been captured (which may be the case if no users have connected yet), this value is null.

livestream.getLastFrame()

Take snapshot

Takes a snapshot by using the last captured frame if it is not null and returns it as a base64 encoded image string based on the encoding type you set.

livestream.getSnapshot()

Get supported encoding types

Returns a comma-separated string list containing the supported encoding types.

livestream.getSupportedEncodingTypes()

Socket.io support

Server

First install Socket.io with npm i socket.io

const livestream = require('rpi_camera_livestream')
livestream.start()

// Web socket
const http = require('http').Server(livestream.server.app)
const io = require('socket.io')(http)

io.on('connection', socket => {
    console.log('User connected to socket')
    livestream.camera.on('frame', data => socket.emit('stream', data))
})

// Start HTTP server
// IMPORTANT: use http.listen() and NOT app.listen()
const port = livestream.server.port
http.listen(port, () => console.log(`Server is up and listen on port ${port}`))

Client

<img id="webstream" width="800" height="600">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/client-dist/socket.io.min.js"></script>
<script>
    const bufferToBase64 = buffer => {
        const bytes = new Uint8Array(buffer)
        let binary = ''
        for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i])
        return `data:image/png;base64,${window.btoa(binary)}`
    }

    const socket = io()
    const image = document.getElementById('webstream')

    socket.on('stream', data => image.src = bufferToBase64(data))
</script>

Documentation

Verbose mode

Enable/Disable verbose mode. Default: disabled

livestream.setVerboseMode(true)

Register a running express webserver

Register an express webserver, if you want to use your already running webserver

const livestream = require('rpi_camera_livestream')
const express = require('express')
const app = express()
const port = 8080

livestream.register(app, port)
livestream.start()

app.listen(port, () => console.log(`Webserver listening on port ${port}`))

Set webserver port

Default: 8000

livestream.setPort(3333)

Set route/pathname

Default: /live.stream

livestream.setPathname('/webcam')

Set video width

Default: 1280px

livestream.setWidth(800)

Minimum width is 32px. Maximum width depends on your camera version (v1: 2592px, v2: 3280px). Specify your camera version if necessary (default: v2)

livestream.setWidth(800, 1) // v1 camera

Set video height

Default: 720px

livestream.setHeight(600)

Minimum height is 16px. Maximum height depends on your camera version (v1: 1944px, v2: 2464px). Specify your camera version if necessary (default: v2)

livestream.setHeight(600, 1) // v1 camera

Set FPS

Default: 16

livestream.setWidth(25) // min: 1, max: 90

Set encoding type

Default: JPEG (hardware accelerated)

livestream.setEncoding('PNG')

Valid encoding types are: JPEG, GIF, PNG, PPM, TGA, BMP

Set quality

Default: 25

livestream.setQuality(15) // min: 1, max: 100

Lower values lead to a faster stream.

To-Do

• Add SSL support

License

MIT