> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# Overview

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. **[Call from the browser](/docs/platform/voice/make-and-receive-calls#place-a-call-from-a-browser)**
   — the simplest thing that works: `client.dial()`, attach streams,
   listen for status, hang up. This lives in the platform calling
   guide; open the **Browser SDK** tab in its first call.
2. **[Call Controls](/docs/browser-sdk/v4/guides/call-controls)** — the muscle of any
   call UI: mute, deaf, hand raise, hangup, DTMF.
3. **[Device Management](/docs/browser-sdk/v4/guides/device-management)** — pick a
   microphone and camera; reactively rebind when the user plugs in a
   headset mid-call.
4. **[Inbound Calls](/docs/browser-sdk/v4/guides/inbound-calls)** — `register()` and
   subscribe to `session.incomingCalls$`; answer or reject.

When you need more:

* **[Screen Sharing](/docs/browser-sdk/v4/guides/screen-sharing)** —
  `self.startScreenShare()` and the matching `screenShareStatus$`.
* **[Layouts](/docs/browser-sdk/v4/guides/layouts)** — `setLayout()`,
  `layoutLayers$`, picking room layouts at runtime.
* **[Messaging & Chat](/docs/browser-sdk/v4/guides/messaging-chat)** — in-call text
  messages via `address.sendText` and `textMessages$`.

Every page in this section assumes you've read the
[RxJS Primer](/docs/browser-sdk/v4/guides/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`]:

```js
call.self$.subscribe((self) => {
  if (!self) return;
  self.audioMuted$.subscribe((muted) => updateMuteButton(muted));
});
```

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.

```js
// This works even if you subscribe well after the call is connected:
call.status$.subscribe((status) => console.log(status));
// → 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

* [`SignalWire`] — top-level client
* [`Call`] (interface) / [`WebRTCCall`] (concrete) — the active call
* [`Participant`] / [`SelfParticipant`] — members
* [`Address`] — directory entries
* [`SelfCapabilities`] — per-call permission flags
* [`SessionState`] — `client.session` surface (incl. inbound calls)

[`SignalWire`]: /docs/browser-sdk/v4/reference/signalwire

[`Call`]: /docs/browser-sdk/v4/reference/interfaces/call

[`WebRTCCall`]: /docs/browser-sdk/v4/reference/webrtc-call

[`Participant`]: /docs/browser-sdk/v4/reference/participant

[`SelfParticipant`]: /docs/browser-sdk/v4/reference/self-participant

[`Address`]: /docs/browser-sdk/v4/reference/address

[`SelfCapabilities`]: /docs/browser-sdk/v4/reference/self-capabilities

[`SessionState`]: /docs/browser-sdk/v4/reference/interfaces/session-state