JavaScript client SDK
The JavaScript client — connect over MQTT, LiveKit or Cloudflare, with guides and the API reference for playing and controlling a stream.
Getting Started
Install the SDK and show live video from a pi-webrtc device.
Guides
Short, complete examples for each task. Most examples use an MqttCamera: deviceId must match the --uid of the device, and the MQTT settings are for the broke...
Latency
The browser buffers a few hundred milliseconds of video before it plays. On a fast local network, that buffer only adds delay. jitterBufferTarget sets how mu...
Bandwidth
Limit how much video the device sends to a viewer. A small tile on a monitoring wall does not need full quality, and a lower bitrate saves cloud and mobile d...
Snapshots
Take a still image from the device. Snapshots need an MqttCamera. With datachannelOnly: true, the device sends no video until you ask. The image arrives base...
Recording
Start and stop the device's recorder, and download recorded files. Both use the DataChannel, so they need an MqttCamera.
Camera Controls
Change image controls, such as brightness and contrast, while the camera runs. This works only for libcamera cameras on a Raspberry Pi.
IPC Messages
Send data to a program on the device and get its answers. The device runs pi-webrtc with --enable-ipc. See IPC messages in the pi-webrtc docs.
Gamepad
Send a gamepad from the browser to the device. pi-webrtc writes it to a Unix socket as JSON lines. See Gamepad in the pi-webrtc docs.
LiveKit
Watch through a LiveKit SFU. Everyone in the room sees the same streams, so a device uploads one copy, no matter how many people watch.
Cloudflare Realtime
Use CloudflareRoom to watch every device in a room through Cloudflare Realtime SFU. A cf-sfu-worker gives out access tokens and wakes the devices. The browse...
API Reference
Everything that @mazupo/client exports. Pick the class for the way your device connects. All three are connections, so most of their API is the same.
Connection
MqttCamera, LiveKitRoom and CloudflareRoom are all connections. Everything on this page works the same on all three. Each class adds its own options, events...
MqttCamera
MqttCamera connects to one device, peer to peer, through an MQTT broker. It is the only connection with snapshots, recording, files and camera controls.
LiveKitRoom
LiveKitRoom joins a room on a LiveKit SFU, through a relay. Devices publish into the room, and everyone in the room sees the same streams, so a device upload...
CloudflareRoom
CloudflareRoom watches every device in one room of a cf-sfu-worker. See the Cloudflare Realtime guide for examples.
DataChannels
The SDK uses four DataChannels, each with one job. On an MqttCamera, onDatachannel reports each one as a ChannelRole when it opens.
Gamepad
Sends a controller to the device's gamepad endpoint. Every connection has gamepad(). The entry points below add button names, a React hook and a view.
More
Migrating from 3.x to 4.0
4.0 replaces PiCamera with one class for each way to connect. All of them share one API for the status, IPC, gamepad, microphone and speaker.
Migrating from picamera.js 2.x to @mazupo/client 3.0
This page moves you to 3.0, where the class was PiCamera. 4.0 replaced PiCamera with MqttCamera and LiveKitRoom: after this page, read Migrating from 3.x.