# Live

空間アプリ向けに WebSocket の共同閲覧、ルーム状態、キーフレーム同期、任意のリアルタイム音声を提供します。

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

# Live

`@realsee/live@0.7.6` は Realsee のブラウザー用共同閲覧 SDK です。WebSocket チャネルを包み、ルーム状態、UI キーフレーム、独自ブロードキャスト、任意の音声 RTC を共有します。

コアパッケージは `createLive`、`createLiveReact`、`Live`、RTC ヘルパー、型定義を公開します：

```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()
```

<span id="version-note" class="docs-anchor-alias" aria-hidden="true"></span>

## バージョンの補足

この文書は中国国内向けソースを基に、以下の海外公開パッケージで確認しています：

| パッケージ | 確認した版 | 補足 |
| --- | --- | --- |
| `@realsee/live@0.7.6` | `0.7.6` | npm アーカイブの README と `dist/*.d.ts` |
| `react@18` | `^18` | peer dependency。createLiveReact は React 18 の型を使用 |
| `trtc-js-sdk` | `>=4.15.3` | 組み込みブラウザー RTC の peer dependency |
| `amazon-chime-sdk-js` | `>=3.0.0` | Chime RTC の peer dependency |
| `@realsee/jsbridge-x` | `>=0.2.6` | App・WebView RTC の peer dependency |
| `yjs` | `13.6.20` | キーフレーム同期の実行時依存関係 |

国内文書には古いイベント名と `CLOSING` 状態があります。海外 0.7.6 の公開型は `stateChange`、`keyframes`、`NOTINITIALIZED`、`CONNECTING`、`OPEN`、`CLOSED` を持ち、この文書はパッケージの型に従います。

<span id="runtime-model" class="docs-anchor-alias" aria-hidden="true"></span>

## 実行時の構成

Live は 4 つの要素で構成します：

1. バックエンドが Team 所有アプリと文書化された OpenAPI でルーム、WebSocket URL、ticket、任意の音声 sign を作成します。共通の `/open` 権限を使いますが、役割と参加者権限も必要です。
2. ブラウザーで `createLive<MyKeyframes>` または `createLiveReact<MyKeyframes>` により生成します。
3. `live.connect()` で WebSocket に接続します。
4. `LiveState.OPEN` 後にキーフレーム、ルーム更新、ブロードキャスト、任意の RTC を操作します。

Live 単体でツアーは描画しません。空間を同期表示する場合は [Five SDK](https://developer.realsee.ai/ja/docs/five-sdk) と組み合わせます。

<span id="next-steps" class="docs-anchor-alias" aria-hidden="true"></span>

## 次のステップ

- [Live クイックスタート](https://developer.realsee.ai/ja/docs/live/quickstart)：インストール、接続、React フック。
- [同期](https://developer.realsee.ai/ja/docs/live/synchronization)：Five 状態、ユーザー状態、ルーム状態、独自ブロードキャスト。
- [RTC と環境](https://developer.realsee.ai/ja/docs/live/rtc-and-environment)：音声とプラットフォーム要件。