Live streaming from the webcam with WebSockets and Base64

The problem:

We want to stream live video from the webcam to any connected client.

A possible solution

Send each frame from the webcam to a websocket server wich will send the frame to an array of clients.

The data flow

Prerequisites

Basic understanding of how websockets work

JavaScript and Node.js knowledge

A computer/laptop with a webcam

Let’s get to coding!

Initialization

Create a new project and install the ws library and express framework(express is not necessary but we will use it to serve the streamer and the client with the .html files):

mkdir wsServer && cd wsServer && npm init -y && npm i -S ws express && touch index.js client.html streamer.html

The Node.js server

Simple HTTP server to handle the /client and /streamer endpoints

index.js

HTTP Server

And with the WebSocket server:

HTTP Server and WS Server

Great! So now we have a working(hopefully) HTTP and WS server. We need to implement the streamer and client(the actual viewer)

What is the streamer doing ?

Connects to our WebSocket server

Requests permission to access the webcam

Displays the webcam video on a <video/> tag (optional)

tag (optional) Creates a frame encoded in base64 at some interval (FPS)

Sends the base64 string to the server at some interval (FPS)

streamer.html

Cool, now we need to implement the client wich it will receive the base64 string and display it in an <img/> tag.

What is the client doing ?

Connects to our WebSocket server

Listens to incoming messages (the base64 string)

Adds the base64 string on an <img/> tag

client.html

And thats it!

Why it is so laggy ?

Well, we should not forget that Base64 encoding is less efficient than the raw binary. If you want, you can use GZIP or even LZ77 to compress the base64 string although keep in mind that it may not have the best compression rate(because of the randomness of the base64). It’s up to you.

Demo

Demo website: https://base64-live.herokuapp.com/

Github repo: webcam-base64-streaming