RICOH Live Streaming Conference アプリケーション開発者ガイド

はじめに

RICOH Live Streaming Conference は RICOH Live Streaming Service を使った様々な機能を iframe コンポーネントとして Web アプリケーションへ簡単に組み込むための Web アプリケーション用コンポーネントです。

利用イメージ

コンポーネント構成

RICOH Live Streaming Conference で利用する各コンポーネントの位置付けは以下の通りです。

LSConf

後述の LSConfSDK から生成する iframe コンポーネント。 生成した iframe コンポーネントをアプリケーション内に組み込むことで、RICOH Live Streaming Service を利用した映像や音声によるコミュニケーションを行う通話画面の UI 部品として利用できる。 LSConf の生成時に LSConfSDK から様々なカスタマイズ設定を行うことができる。

LSConfSDK

本 SDK をライブラリとしてアプリケーションに組み込むことで、LSConf の生成、LSConf に対してのリクエスト、LSConf からのイベント通知の受け取り、などが可能となる。 LSConf の生成後に Join の API を実行することで生成された LSConf 上で RICOH Live Streaming Service への接続を行う。

LSClientSDK との連携

LSConf と LSClientSDK を組み合わせて利用する際の注意事項を記載します。

Access Token

LSConf と LSClientSDK をそれぞれ利用したアプリケーションから同一の Room に接続させたい場合、以下のパラメータを全てのクライアントで合わせる必要があります。

• Client.connect() 時に指定する client_id の値
• Access Token の署名に使用する client_secret の値
• Access Token 内の room_spec の値

Connection Metadata

LSClientSDK から参加した Connection を LSConf 側で正しく表示したい場合、LSClientSDK 側で Connection Metadata を正しく設定する必要があります。

LSClientSDK の Metadata の仕様と利用方法については RICOH Live Streaming Client SDK アプリケーション開発者ガイド を参照ください。

LSConf では以下の Connection Metadata の指定がされた場合に対応する処理を行います。

Track Metadata

LSClientSDK から送信された Track を LSConf 側で正しく表示したい場合、LSClientSDK 側で Track Metadata を正しく設定する必要があります。

LSClientSDK の Metadata の仕様と利用方法については RICOH Live Streaming Client SDK アプリケーション開発者ガイド を参照ください。

LSConf では以下の Track Metadata の指定がされた場合に対応する処理を行います。

API 仕様

RICOH Live Streaming Conference SDK API 仕様 を参照ください。

エラー

RICOH Live Streaming Conference エラー仕様 を参照ください。

シーケンス

RICOH Live Streaming Conference を使用したサンプルアプリの利用シーケンスを記載します。

postMessage

LSConf と ls-conf-sdk（を同梱した Web アプリケーション）間のやりとりはリクエスト（ls-conf-sdk のメソッド実行）のたびに Window.postMessage() を使ってリクエストの送信とレスポンスの受信を行っています。 ls-conf-sdk からのリクエスト時に postMessage のエラーが出た場合は再度リクエストし直して、それでも変わらない場合はページをリロードしてやり直してください。

Content Security Policy (CSP)

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 も合わせて指定する必要があります

障害発生時のお問い合わせについて

接続できない、異常切断される、映像または音声が出力されない等の障害が生じた場合、以下のいずれかの方法で取得したログ(テキスト)ファイルを添付してサポート窓口にお問い合わせください。

getLSConfLog() での取得例

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`;
}

log イベントでの取得例

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();