Live は WebSocket を使います。任意の音声は RTC に委ねられ、公開パッケージには BrowserRTC、BrowserRTC4Chime、VRWebViewRTC と、共通の RTCProtocol 型が含まれます。
組み込み RTC を選ぶ
パッケージに RTC の生成を任せる場合は useBuiltInRTC を使います：
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 やプロバイダー署名用認証情報をブラウザーに置きません。
独自の RTC
アプリ・WebView・ミニプログラムでは RTCProtocol を満たす独自オブジェクトを渡します。
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)
},
})RTC の操作とイベント
React では useRTCAction と useRTCEventCallback、生のインスタンスでは live.$RTC を使います。
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 です。
対応プラットフォーム
以下は国内向け 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 は実機検証。 |
失敗への対応
接続と音声は別々に扱います：
live.connect()が Error を返したらページを保ち再試行を提供します。LiveState.CLOSEDでは送信を止め、切断状態を表示します。- RTC の
error・weakNetworkでも共同閲覧を保持し、音声機能を縮退します。 - 終了時は
live.dispose()で音声デバイス、購読、キーフレーム監視を解放します。