JavaScript client SDK for pi-webrtc

Web and React Native client for pi-webrtc, with TypeScript typings and support for low-latency WebRTC streaming, P2P, SFU, DataChannel control, snapshots, gamepad input, and file transfer.

• Live demo: mazupo.github.io/client-sdk-js/demo
• Demo source: demo/index.html

Quick Start

For Web

npm install @mazupo/client

<video id="videoElement" autoplay playsinline controls></video>
<script type="module">
  import { PiCamera } from '@mazupo/client';

  const videoRef = document.getElementById('videoElement');
  const camera = new PiCamera({
    uid: 'your-custom-uid',
    mqttHost: 'your.mqtt.cloud',
    mqttPath: '/mqtt',
    mqttPort: 8884,
    mqttUsername: 'hakunamatata',
    mqttPassword: 'Wonderful',
    stunUrls: ['stun:stun1.l.google.com:19302'],
  });

  camera.onStream = (stream) => {
    videoRef.srcObject = stream ?? null;
  };

  camera.connect();
</script>

uid has to match the --uid the device was started with, and the MQTT settings are the broker both sides talk to.

For React Native

Install and configure react-native-webrtc, then install @mazupo/client:

npm install react-native-webrtc @mazupo/client

registerGlobals() has to run once at app startup, before any PiCamera is created:

import React, { useEffect, useState } from 'react';
import { RTCView, registerGlobals } from 'react-native-webrtc';
import { PiCamera, RNMediaStream } from '@mazupo/client';

registerGlobals();

export default function App() {
  const [streamUrl, setStreamUrl] = useState<string | null>(null);

  useEffect(() => {
    const camera = new PiCamera({
      uid: 'your-custom-uid',
      mqttHost: 'your.mqtt.cloud',
      mqttPath: '/mqtt',
      mqttPort: 8884,
      mqttUsername: 'hakunamatata',
      mqttPassword: 'Wonderful',
      stunUrls: ['stun:stun1.l.google.com:19302'],
    });

    camera.onStream = (stream) => {
      setStreamUrl((stream as RNMediaStream).toURL());
    };

    camera.connect();

    return () => {
      camera.terminate();
    };
  }, []);

  if (!streamUrl) {
    return null;
  }

  return <RTCView streamURL={streamUrl} style={{ flex: 1 }} />;
}

Contents

• Migrating from 2.x — renamed exports, the new wire protocol, and what it means for your device
• API Documentation — options, events, methods

Examples

• Live video in a browser — the full HTML page behind the Quick Start above.
• Live video in React Native — RTCView with registerGlobals().
• Take a snapshot — a still image over the command DataChannel, no video stream.
• Send and receive IPC messages — talk to a process on the device.
• Drive a device with a gamepad — read a controller and send each reading to the device.
• Gamepad in React — useGamepad and the <GamepadView> overlay.
• Download a recorded video — list recordings and pull one down.
• Adjust camera controls — brightness, contrast, and the rest of CameraControlId.
• Start and stop recording — drive the device's on-demand recorder.
• Play through the LiveKit SFU — many viewers, one uplink.
• Pull from the Cloudflare Realtime SFU — same, with nothing to host.

License

Licensed under the Apache License, Version 2.0. See LICENSE for the full terms, and NOTICE for the third-party components the published bundles include.