On this page

Headless Meeting SDK for a Custom UI

Draw the call yourself. The headless client does the networking and gives you participants, tracks and events.

The embed SDK shows Meet's own call screen. The headless client has no screen at all. It joins a room, sends your camera and microphone, receives everyone else and tells you what changed. You render the video tiles, buttons and layout in your framework. It is plain ES modules, runs in browsers first, and needs no React, Vue or other framework.

Install#

bash

npm i @respiresoft/meet-client

Publishing. The package is not on npm yet. Until it is, use the embed SDK for a call you can ship today.

A small example#

import { MeetClient } from '@respiresoft/meet-client';

// token: a meeting token your server made for this person (see the server quick start)
const call = new MeetClient({ baseUrl: 'https://meet.respiresoft.com', token });
const tiles = document.getElementById('tiles');

call.on('track-started', ({ participant, source, kind, stream }) => {
  const el = document.createElement(kind === 'video' ? 'video' : 'audio');
  el.id = `${participant.id}-${source}`;
  el.srcObject = stream;
  el.autoplay = true;
  el.playsInline = true;
  tiles.append(el);
  if (kind === 'video') call.setVideoQuality(participant.id, 'medium'); // the tile size picks the video layer
});
call.on('track-stopped', ({ participant, source }) => document.getElementById(`${participant.id}-${source}`)?.remove());
call.on('chat', (m) => console.log(m.name, m.text));
call.on('state', ({ state, reason }) => console.log('call is', state, reason ?? ''));

await call.join({ audio: true, video: true });
await call.setMic(false);
await call.sendChat('Hello');
await call.leave();

token can also be a function that returns a fresh token: the client calls it whenever it has to rejoin.

What it can do#

Microphone, camera, device choice and screen share with its sound.
Chat, reactions, raised hands, live captions and the language you hear the call in.
Host actions when the token's role allows them: mute, camera off, remove, pin, end the call, start and stop recording.
Large calls: report each tile's size with setVideoQuality, and the engine sends the matching video layer and, in a big room, only the cameras that matter (last-N).
Restarts and network drops: the client rejoins the same room by itself. People get new ids after a rejoin, so key your tiles by the ids in the events.

Every method, property and event is on the Headless client SDK page.