本文へ移動
Realsee
English
ドキュメント
  1. ドキュメント
  2. Live
  3. クイックスタート

クイックスタート

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

Markdown を表示
このページの内容

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

インストール

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 の依存関係を追加します。

インスタンスを作成する

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

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 を渡せ、両方があれば自動接続できます。

React への統合

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

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>
  )
}

終了処理

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

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

バックエンドの境界

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

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

認証モデルは OpenAPI、作成と完了状態・AK の保持は Team アプリ管理 を参照してください。