This demo using stdout of raspivid and sends raw JPEG images to webpage in binary mode without any conversion to base64 and back.

$ curl -o rpimjpeg.zip https://github.com/ATAMAH/rpistreaming/archive/master.zip
$ unzip rpimjpeg.zip -d rpimjpeg
$ cd rpimjpeg
$ npm install
$ node server.js

Open webpage http:https://your-rpi-ip-address:8080

The frames capturing by pi-camera-connect library as node.js Buffers:

streamCamera.on('frame', data => {
// data is JPEG image as Buffer
});

Then you can send these buffers as binary data over websockets to client webpage:

ws.send(data, {binary: true});

On client side you can cast this node.js Buffer directly to browser-JS arraybuffer cause on low-level they are both arrays of Uint8:

ws.onmessage = (event) => {
  var arrayBufferView = new Uint8Array(event.data);

Then we tell browser to treat this arraybuffer as Blob object with JPEG data in it:

var blob = new Blob([ arrayBufferView ], { type: "image/jpeg" });

So we have image on client side and can draw it, save or anything. This demo uses canvas to draw frames.

If you getting error like this on starting demo:

% Error opening camera: Error: Could not determine JPEG signature. Unknown system model 'BCM2835 - Pi 2 Model B'

You need to change file node_modules\pi-camera-connect\dist\lib\stream-camera.js like this (issue):

switch (systemInfo.model) {
    case 'BCM2835 - Pi Zero':
    case 'BCM2835 - Pi Zero W':
    case 'BCM2835 - Pi 2 Model B':
    case 'BCM2835 - Pi 3 Model B':
    case 'BCM2835 - Pi 3 Model B+':
    case 'BCM2835 - Pi 4 Model B':

Or send PR to original lib.