# クイックスタート — Live

Live インスタンスを作り、サーバー発行 ticket で接続して、終了時に破棄します。

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

# Live クイックスタート

バックエンドが WebSocket URL と ticket を返せることが前提です。アプリ認証情報はサーバーに保持し、ブラウザーには現在のルームに必要な URL、ticket、任意の音声 sign だけを渡します。

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

## 1. インストール

```bash
npm install @realsee/live@0.7.6 react@18 trtc-js-sdk amazon-chime-sdk-js @realsee/jsbridge-x
```

ブラウザーの共同閲覧は `@realsee/live@0.7.6` と `react@18` から始められます。組み込み RTC を使う場合は対応する TRTC・Chime・jsbridge の依存関係を追加します。

<span id="create-the-instance" class="docs-anchor-alias" aria-hidden="true"></span>

## 2. インスタンスを作成する

`createLive<MyKeyframes>` の型引数で、同期する各チャネルのシリアライズ可能な状態を定義します。

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

interface MyKeyframes {
  FiveState: unknown
  activePoi: { id: string; title: string } | null
}

const live = createLive<MyKeyframes>({
  getTicket: async () => {
    const response = await fetch('/api/live/ticket')
    const payload = await response.json()
    return payload.ticket
  },
  __debug__: import.meta.env.DEV,
})

live.on('stateChange', (state, prevState) => {
  console.log({ state, prevState })
})

await live.connect({
  url: 'wss://ws-access.realsee.com/.../room',
  force: true,
})

if (live.state === LiveState.OPEN) {
  live.sendKeyframe('activePoi', null)
}
```

`live.connect(options?)` は `url`、`force`、`getTicket`、`rtcMicStatus` を受け取ります。生成時にも `url` と `getTicket` を渡せ、両方があれば自動接続できます。

<span id="react-integration" class="docs-anchor-alias" aria-hidden="true"></span>

## 3. React への統合

React の操作 UI には `createLiveReact<MyKeyframes>` を使います。1 つの Live に対する Provider と操作・キーフレーム・状態フックを作成します。

```tsx
import { createLiveReact } from '@realsee/live'

interface MyKeyframes {
  FiveState: unknown
  activePoi: { id: string; title: string } | null
}

export const LiveReact = createLiveReact<MyKeyframes>({
  getTicket: async () => {
    const response = await fetch('/api/live/ticket')
    return response.json().then((payload) => payload.ticket)
  },
})

export function LiveRoot({ children }: { children: React.ReactNode }) {
  return <LiveReact.LiveProvider>{children}</LiveReact.LiveProvider>
}

export function ConnectButton({ wsUrl }: { wsUrl: string }) {
  const { connect } = LiveReact.useLiveAction()

  return (
    <button onClick={() => connect({ url: wsUrl, force: true })}>
      Join live room
    </button>
  )
}
```

<span id="clean-up" class="docs-anchor-alias" aria-hidden="true"></span>

## 4. 終了処理

ユーザー退出には `live.exit()`、オーナーによる全員のルーム終了には `live.close()` を使います。ページや React ツリーの破棄時は `live.dispose()` を呼び、再使用しません。

```ts
window.addEventListener('beforeunload', () => {
  void live.dispose()
})
```

<span id="backend-boundary" class="docs-anchor-alias" aria-hidden="true"></span>

## バックエンドの境界

ticket と音声 sign は自分のアプリの同一オリジンで提供します：

- `GET /api/live/ticket` は getTicket 用の ticket を返します。
- `POST /api/live/voice-sign` は getVoiceSign 用の音声 sign を返します。
- OpenAPI の AK と SK はサーバーに保持します。

認証モデルは [OpenAPI](https://developer.realsee.ai/ja/docs/open-api)、作成と完了状態・AK の保持は [Team アプリ管理](https://developer.realsee.ai/ja/docs/team-app-management) を参照してください。