PiStreamer 🎥

PiStreamer is a nodeJS module that allows streaming the raspberry pi camera module output over websocket to a webpage using a modified version of 131/h264-live-player.

Origin

PiStreamer has been created due to a need of a streaming module for my end-of-studies work. When looking for a suitable one that could fulfill my expectations, I’ve found the amazing 131’s repository. I reworked and simplified the server side in Typescript ~~and modded the client decoder~~ (not anymore!!) according to my needs.

Installation

npm i pistreamer

Example

To run an example of the project, enter the following commands:

git clone https://github.com/TeaFlex/PiStreamer.git
cd PiStreamer
npm i
npm run test

Usage

Server configuration:

const http = require('http');
const {createClient, createServer} = require('pistreamer');
const port = 8000;
/*
Create a server with an instance of PiStreamerServer with
the given options. Here, it will stream a 244x352 video at 15 fps, 
the stream will end if there's no viewers left and there's a limit of 5 viewers.
*/
const piStreamer = createServer(http,{
    videoOptions: {
        framerate: 15,
        height: 244,
        width: 352
    },
    dynamic: true,
    limit: 5
});
//Put some routing here
piStreamer.listen(port, () => {
    //create a http-live-player.js file in your static folder.
    createClient('./some-static-folder');
    console.log(`App running and listening to port ${port}`);
});

Client configuration:

<!--Call the script that you generated earlier.-->
<script src="/http-live-player.js"></script>

var canvas = document.createElement("canvas");
//Pass a canvas to de decoder.
var player = new WSAvcPlayer(canvas, "webgl", 1, 35);
//Connect to your server.
player.connect('ws://your-ip-or-domain-name');
window.player = player;
//Call any function of the player.
document.getElementById('startStream').addEventListener('click', () => {
    player.playStream();
    document.body.appendChild(canvas);
});
document.getElementById('stopStream').addEventListener('click', () => {
    player.stopStream();
    document.body.removeChild(canvas);
});
document.getElementById('disconnect').addEventListener('click', () => {
    player.disconnet();
    document.body.removeChild(canvas);
});

If you want to send personnalized messages, you can also do like this:

var canvas = document.createElement("canvas");
var player = new WSAvcPlayer(canvas, "webgl", 1, 35);
player.connect('ws://your-ip-or-domain-name');
//We take the ws client from the player;
var wsClient = player.ws;
window.player = player;
document.getElementById('myaction').addEventListener('click', () => {
    wsClient.send("my personnalized action");
});
//*Do stuff with player methods*

Documentation

You can access the documentation of PiStreamer there: