# RTC と実行環境 — Live

Live 連携に音声 RTC、署名処理、プラットフォーム要件を追加します。

Canonical: https://developer.realsee.ai/ja/docs/live/rtc-and-environment
Source: https://developer.realsee.ai/ja/docs/live/rtc-and-environment.md
Language: ja

# RTC と実行環境

Live は WebSocket を使います。任意の音声は RTC に委ねられ、公開パッケージには `BrowserRTC`、`BrowserRTC4Chime`、`VRWebViewRTC` と、共通の `RTCProtocol` 型が含まれます。

<span id="built-in-rtc-choices" class="docs-anchor-alias" aria-hidden="true"></span>

## 組み込み RTC を選ぶ

パッケージに RTC の生成を任せる場合は `useBuiltInRTC` を使います：

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

const live = createLive({
  useBuiltInRTC: true,
  builtInRTCType: BuiltInRTCType.TRTC,
  getTicket: async () => {
    const response = await fetch('/api/live/ticket')
    return response.json().then((payload) => payload.ticket)
  },
  getVoiceSign: async (params) => {
    const response = await fetch('/api/live/voice-sign', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(params),
    })
    return response.json()
  },
})
```

SDK は音声パラメーターで `getVoiceSign` を呼びます。バックエンドで RTC が求めるプロバイダー署名に変換してください。アプリの SK やプロバイダー署名用認証情報をブラウザーに置きません。

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

## 独自の RTC

アプリ・WebView・ミニプログラムでは `RTCProtocol` を満たす独自オブジェクトを渡します。

```ts
import { createLive, VRWebViewRTC } from '@realsee/live'
import { JSBridgeApp } from '@realsee/jsbridge-x/lib/app'

const jsBridge = new JSBridgeApp()
const rtc = new VRWebViewRTC({
  jsBridge,
  getVoiceSign: async (params) => {
    const response = await fetch('/api/live/voice-sign', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(params),
    })
    return response.json()
  },
})

const live = createLive({
  rtc,
  jsBridge,
  getTicket: async () => {
    const response = await fetch('/api/live/ticket')
    return response.json().then((payload) => payload.ticket)
  },
})
```

<span id="rtc-actions-and-events" class="docs-anchor-alias" aria-hidden="true"></span>

## RTC の操作とイベント

React では `useRTCAction` と `useRTCEventCallback`、生のインスタンスでは `live.$RTC` を使います。

```tsx
function VoicePanel() {
  const { join, quit, toggleMicro, detectMicro } = LiveReact.useRTCAction()

  LiveReact.useRTCEventCallback('userVolumes', (userVolumes) => {
    console.log(userVolumes)
  })

  return (
    <button
      onClick={async () => {
        const available = await detectMicro()
        if (available) await toggleMicro(true)
      }}
    >
      Enable microphone
    </button>
  )
}
```

主要イベントは `error`、`initWillStart`、`inited`、`joinWillStart`、`joined`、`userVolumes`、`weakNetwork` です。

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

## 対応プラットフォーム

以下は国内向け Live 文書の要件です。公開前に製品の対象と RTC プロバイダーで確認してください：

| プラットフォーム | 要件 |
| --- | --- |
| Web | 国内ガイドの基準はデスクトップ Chrome 56 以降。WebRTC は新しい Chromium を推奨。 |
| Android App | Android 5.0 以降。コンテナー開発は Android Studio 3.5 以降。 |
| iOS App | iOS 9.0 以降。コンテナー開発は Xcode 11 以降。 |
| WeChat ミニプログラム | iOS 7.0.9・Android 7.0.8 以降、基礎ライブラリ 2.10.0 以降。ネイティブ Live は実機検証。 |

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

## 失敗への対応

接続と音声は別々に扱います：

- `live.connect()` が Error を返したらページを保ち再試行を提供します。
- `LiveState.CLOSED` では送信を止め、切断状態を表示します。
- RTC の `error`・`weakNetwork` でも共同閲覧を保持し、音声機能を縮退します。
- 終了時は `live.dispose()` で音声デバイス、購読、キーフレーム監視を解放します。