# Live

WebSocket-based co-viewing, room state, keyframe synchronization, and optional realtime voice for spatial applications.

Canonical: https://developer.realsee.ai/docs/live
Source: https://developer.realsee.ai/docs/live.md
Language: en

`@realsee/live@0.7.6` is the Realsee browser SDK for Live co-viewing. It wraps the Realsee WebSocket session channel so multiple users can share room state, synchronize UI keyframes, exchange custom broadcasts, and coordinate optional voice RTC.

The core package exports `createLive`, `createLiveReact`, `Live`, RTC helpers, and the Live type definitions:

```ts
import { createLive, LiveState } from '@realsee/live'

interface MyKeyframes {
  FiveState: unknown
  selectedTag: { id: string } | null
}

const live = createLive<MyKeyframes>({
  url: 'wss://ws-access.realsee.com/.../room',
  getTicket: async () => {
    const response = await fetch('/api/live/ticket')
    return response.json().then((payload) => payload.ticket)
  },
})

live.on('stateChange', (state) => {
  if (state === LiveState.OPEN) {
    live.sendKeyframe('selectedTag', null)
  }
})

await live.connect()
```

## Version note

This docs tree is adapted from the domestic Live docs source and verified against the published overseas package:

| Package | Verified version | Notes |
| --- | --- | --- |
| `@realsee/live@0.7.6` | `0.7.6` | npm tarball README and `dist/*.d.ts` files |
| `react@18` | `^18` | peer dependency; `createLiveReact` is React 18 typed |
| `trtc-js-sdk` | `>=4.15.3` | peer dependency for built-in browser RTC |
| `amazon-chime-sdk-js` | `>=3.0.0` | peer dependency for Chime RTC mode |
| `@realsee/jsbridge-x` | `>=0.2.6` | peer dependency for App or WebView bridge RTC |
| `yjs` | `13.6.20` | runtime dependency used for keyframe state synchronization |

The domestic docs mention older WebSocket event names and a `CLOSING` state. The overseas `0.7.6` type declarations expose `stateChange`, `keyframes`, `LiveState.NOTINITIALIZED`, `LiveState.CONNECTING`, `LiveState.OPEN`, and `LiveState.CLOSED`; this English version follows the package types.

## Runtime model

Live has four moving parts:

1. Your own backend creates a Live room, WebSocket entrance URL, ticket, and optional voice sign through the documented OpenAPI endpoints using the Team-owned Developer app. These operations share `/open` scope; room roles and participant permissions remain runtime requirements.
2. The browser creates a `Live` instance with `createLive<MyKeyframes>` or `createLiveReact<MyKeyframes>`.
3. The Live SDK connects to the WebSocket session with `live.connect()`.
4. Your app sends keyframes, room updates, broadcasts, and optional RTC actions after the session reaches `LiveState.OPEN`.

Live does not render a tour by itself. Pair it with [Five SDK](https://developer.realsee.ai/docs/five-sdk) when you need synchronized spatial viewing.

## Next steps

- [Live Quickstart](https://developer.realsee.ai/docs/live/quickstart) - install the package, connect a room, and wire React hooks.
- [Synchronization](https://developer.realsee.ai/docs/live/synchronization) - sync Five SDK state, user state, room state, and custom broadcasts.
- [RTC and environment](https://developer.realsee.ai/docs/live/rtc-and-environment) - add voice and understand platform requirements.