RICOH Live Streaming Conference は RICOH Live Streaming Service を使った様々な機能を iframe コンポーネントとして Web アプリケーションへ簡単に組み込むための Web アプリケーション用コンポーネントです。
RICOH Live Streaming Conference で利用する各コンポーネントの位置付けは以下の通りです。
後述の LSConfSDK から生成する iframe コンポーネント。 生成した iframe コンポーネントをアプリケーション内に組み込むことで、RICOH Live Streaming Service を利用した映像や音声によるコミュニケーションを行う通話画面の UI 部品として利用できる。 LSConf の生成時に LSConfSDK から様々なカスタマイズ設定を行うことができる。
本 SDK をライブラリとしてアプリケーションに組み込むことで、LSConf の生成、LSConf に対してのリクエスト、LSConf からのイベント通知の受け取り、などが可能となる。 LSConf の生成後に Join の API を実行することで生成された LSConf 上で RICOH Live Streaming Service への接続を行う。
LSConf と LSClientSDK を組み合わせて利用する際の注意事項を記載します。
LSConf と LSClientSDK をそれぞれ利用したアプリケーションから同一の Room に接続させたい場合、以下のパラメータを全てのクライアントで合わせる必要があります。
Client.connect()
時に指定する client_id
の値client_secret
の値room_spec
の値LSClientSDK から参加した Connection を LSConf 側で正しく表示したい場合、LSClientSDK 側で Connection Metadata を正しく設定する 必要があります。
LSClientSDK の Metadata の仕様と利用方法については RICOH Live Streaming Client SDK アプリケーション開発者ガイド を参照ください。
LSConf では以下の Connection Metadata の指定がされた場合に対応する処理を行います。
キー | デフォルト | 説明 |
---|---|---|
username | null | SubView上の表示名 や API レスポンスに含まれる username を指定する。 null の場合は以下となる。 - SubView 上の表示名は言語ファイルの subView.noName の値- 録画通知の表示上は言語ファイルの recordingNotification.noName の値- updatePointer 時のラベルは空文字列( '' )- API レスポンスの username は null |
parentConnectionId | null | 画面共有などの同一端末から別 Connection での参加として LSConf 内で親子関係が紐付けされる。 SubView のレイアウト上の表示順が 親 > 子 でセットとなる。 |
LSClientSDK から送信された Track を LSConf 側で正しく表示したい場合、LSClientSDK 側で Track Metadata を正しく設定する必要があります。
LSClientSDK の Metadata の仕様と利用方法については RICOH Live Streaming Client SDK アプリケーション開発者ガイド を参照ください。
LSConf では以下の Track Metadata の指定がされた場合に対応する処理を行います。
キー | デフォルト | 説明 |
---|---|---|
mediaType | 'VIDEO_AUDIO' | メディア種別 に合わせた SubView の表示を行う。 |
isTheta | false | 映像ソースが THETA かどうかを識別し、true の場合は 360 映像として表示する。 |
pitch | undefined | THETA 本体の RotationVector の pitch の値。自動天頂補正が有効な場合にのみ補正を行う。 |
roll | undefined | THETA 本体の RotationVector の roll の値。自動天頂補正が有効な場合にのみ補正を行う。 |
RICOH Live Streaming Conference SDK API 仕様 を参照ください。
RICOH Live Streaming Conference エラー仕様 を参照ください。
RICOH Live Streaming Conference を使用したサンプルアプリ の利用シーケンスを記載します。
LSConf と ls-conf-sdk(を同梱した Web アプリケーション)間のやりとりはリクエスト(ls-conf-sdk のメソッド実行)のたびに Window.postMessage() を使ってリクエストの送信とレスポンスの受信を行っています。 ls-conf-sdk からのリクエスト時に postMessage のエラーが出た場合は再度リクエストし直して、それでも変わらない場合はページをリロードしてやり直してください。
LSConf を利用したアプリケーションに CSP を適用する場合は、Web サーバレスポンスの Content-Security-Policy HTTP ヘッダーに下記のポリシーディレクティブをマージしてください。
connect-src wss://signaling.livestreaming.mw.smart-integration.ricoh.com
media-src mediastream:
frame-src https://conf.livestreaming.mw.smart-integration.ricoh.com
※ Dev 環境を利用する場合、Dev 環境の URL も合わせて指定する必要があります
接続できない、異常切断される、映像または音声が出力されない等の障害が生じた場合、以下のいずれかの方法で取得したログ(テキスト)ファイルを添付してサポート窓口にお問い合わせください。
const iframe = await LSConferenceIframe.create(
iframeContainerRef.current,
CREATE_PARAMETERS,
);
let log = 'LSConf Log\n\n';
// <中略>
try {
// ログの取得
log += await iframe.getLSConfLog();
} catch {
log += `Failed to getLSConfLog.\n`;
}
const iframe = await LSConferenceIframe.create(
iframeContainerRef.current,
CREATE_PARAMETERS,
);
let log = 'LSConf Log\n\n';
// <中略>
iframe.addEventListener('log', (e: CustomEvent) => {
const { message, category, subcategory, date } = e.detail;
log += `[${date}]${subcategory ? '[' + subcategory + ']' : ''} ${message}\n`;
});
const downLoadLink = document.createElement('a');
downLoadLink.href = URL.createObjectURL(
new Blob([log], { type: 'text.plain' }),
);
downLoadLink.dataset.downloadurl = [
'text/plain',
'ls-conf-sample.log',
downLoadLink.href,
].join(':');
downLoadLink.click();
この情報は役に立ちましたか?