Build Voice & Video Apps

Overview

View as MarkdownOpen in Claude

The Browser SDK gives you a Call object for every active conversation — inbound or outbound, audio-only or video, 1-on-1 or room. Once you have one, every aspect of the call (status, media streams, participants, layout, recording state, network quality) is reachable through observables and a small set of imperative methods.

This section is the practical guide to building with that object. Pages are roughly ordered from “first call” to “advanced call-center features,” but each is self-contained.

Reading order

If you’re starting from zero:

  1. Outbound Calls — the simplest thing that works: client.dial(), attach streams, listen for status, hang up.
  2. Call Controls — the muscle of any call UI: mute, deaf, hand raise, hangup, DTMF.
  3. Device Management — pick a microphone and camera; reactively rebind when the user plugs in a headset mid-call.
  4. Inbound Calls — register() and subscribe to session.incomingCalls$; answer or reject.

When you need more:

  • Screen Sharing — self.startScreenShare() and the matching screenShareStatus$.
  • Layouts — setLayout(), layoutLayers$, picking room layouts at runtime.
  • Messaging & Chat — in-call text messages via address.sendText and textMessages$.

Every page in this section assumes you’ve read the RxJS Primer — the SDK is observables all the way down. See the Call reference for the full property and method list; the guides here teach how to use it, not which fields exist.

Two patterns the SDK relies on

These show up in every example below — calling them out once here so they don’t surprise you:

1. Subscribe to the participant, not the call, for member state

call.audioMuted doesn’t exist. Mute / deaf / hand raise / video state all live on the SelfParticipant:

1call.self$.subscribe((self) => {
2  if (!self) return;
3  self.audioMuted$.subscribe((muted) => updateMuteButton(muted));
4});

You wait for self$ to emit (it’s null until the local member joins) and then bind to the participant’s own observables.

2. BehaviorSubjects emit synchronously on subscribe

Most observables on Call and Participant are BehaviorSubjects: late subscribers receive the current value immediately. You don’t need to remember “did I subscribe before the call connected” — you’ll get the cached state on first emission.

1// This works even if you subscribe well after the call is connected:
2call.status$.subscribe((status) => console.log(status));
3// → logs the current status immediately, then any future changes.

A real reference app

Everything in this section is faithful to the kitchen-sink demo in signalwire-typescript-web/playground/kitchen-sink-demo — a vanilla TypeScript app that exercises every public API. When in doubt about how a feature fits together with the rest of the SDK, check playground/kitchen-sink-demo/src/main.ts in the SDK repo for the exact wiring.

Reference