RICOH Live Streaming Conference 機能詳細説明

はじめに

本文書ではRICOH Live Streaming Conferenceの機能と利用方法について説明します。

基本構成

LSConfには ls-conf-sdk の create() で生成する Room と、 createPlayer() で生成する Player があります。

Room

Roomでは RICOH Live Streaming Service に接続して通話を行うことができます。

基本構成

No. コンポーネント名 概要
1 LSConf LSConfのiframeコンポーネントです。
このiframeの領域内で各コンポーネントの表示や操作を行います。
2 SubView 通話に参加している各参加者のカメラ映像や共有画面などを表示します。
詳細は後述の SubView の項目を参照ください。
3 Toolbar 通話中の各機能を利用できます。
詳細は後述の Toolbar の項目を参照ください。

Player

Playerでは動画ファイルのURLを指定して動画を再生することができます。

基本構成

No. コンポーネント名 概要
1 LSConf LSConfのiframeコンポーネントです。
このiframeの領域内で各コンポーネントの表示や操作を行います。
2 SubView 指定した動画ファイルを表示します。
詳細は後述の SubView の項目を参照ください。
  • 再生できる動画のファイル形式(webm, mp4等)はブラウザの仕様に依存します
    • 一部のブラウザでは webm ファイルの再生をサポートしていない場合があります
  • 動画ファイルは以下のLSConfのURLに対してのCORS(Cross-Origin Resource Sharing)設定でアクセスを許可する必要があります
    • https://conf.livestreaming.mw.smart-integration.ricoh.com

レイアウト仕様

LSConfでは3種類のSubViewの表示レイアウトがあります。

Gallery Presentation FullScreen
GL9 PL1 FullScreen

Gallery

Galleryレイアウトでは全てのSubViewを均等なサイズで並べて表示します。

SubView数=4 SubView数=9 SubView数=16
GL4 GL9 GL16
  • 自分の共有画面およびカメラ映像のSubViewは常に最下位(左上が上位、右下が下位)に表示されますが、それ以外のSubViewの並び順については不定となります
  • 表示できるSubViewの数は最大で 24 までサポートされており、それより多い場合の表示はサポート外です
  • 配置されるSubViewの最小幅は 260px であり、そのサイズを確保できなくなった場合は画面のスクロールが発生します

Presentation

Presentationレイアウトでは特定のSubViewを拡大表示します。

SubView1つを拡大表示(通常領域は縦並び) SubView2つを拡大表示(通常領域は縦並び) SubView1つを拡大表示(通常領域は横並び) SubView2つを拡大表示(通常領域は横並び)
PL1Column PL2Column PL1Row PL2Row
  • defaultLayout"presentation" の場合は以下の挙動となります
    • 入室時に自分しかいない場合、自分のカメラ映像のSubViewが拡大表示され、次に他のSubViewが追加されたタイミングでそのSubViewが拡大表示されます
    • 入室時に複数の参加者がいる場合、最初に追加されたSubViewが拡大表示されます
  • 通常表示領域のSubViewをダブルクリックまたは後述のSubViewMenuの「拡大表示」を選択することで、SubViewを拡大表示領域に移動できます
  • 拡大表示領域のSubViewをダブルクリックすることで通常表示領域に戻すことができます
  • 拡大表示領域が複数の場合は、拡大表示領域内のSubViewを均等なサイズで並べて表示されます
  • 配置切替ボタンをクリックすることで、通常表示領域を横並びか縦並びかを切替えることができます
  • iframeのwidthが900px以下の場合、通常表示領域が非表示になります
  • 360映像のSubViewが通常表示領域に配置された場合、SubView内の拡大/縮小ボタンが非表示となります
  • それぞれの領域に配置されるSubViewの最小幅は以下であり、そのサイズを確保できなくなった場合は画面のスクロールが発生します
    • 拡大表示領域: 260px
    • 通常表示領域: 160px

FullScreen

FullScreenレイアウトでは特定のSubViewを全画面表示します。

FullScreen

  • defaultLayout"fullscreen" の場合は以下の挙動となります
    • 入室時に自分しかいない場合、最初は自分のカメラ映像のSubViewが全画面表示され、次に他のSubViewが追加されたタイミングでそのSubViewが全画面表示されます
    • 入室時に複数の参加者がいる場合、最初に追加されたSubViewが全画面表示されます

レイアウト切り替え

遷移元/遷移先      Gallery Presentation FullScreen
Gallery × - SubViewをダブルクリック
- SubViewMenuから「拡大表示」を選択
- SubViewMenuから「全画面表示」を選択
Presentation - SubViewMenuから「一覧表示」を選択

[拡大表示領域のSubView数が1の場合]
- 拡大表示領域のSubViewをダブルクリック
- 拡大表示領域のSubViewが切断

× - SubViewMenuから「全画面表示」を選択
FullScreen [前のレイアウトがGalleryの場合]
- SubViewMenuから「全画面解除」を選択
- 全画面表示中のSubViewが切断
[前のレイアウトがPresentationの場合]
- SubViewMenuから「全画面解除」を選択
- 全画面表示中のSubViewが切断
×

SubView仕様

No. 名称 概要
1 表示名 SubViewの username が表示されます。
2 状態表示 SubViewの状態情報が表示されます。
映像ソースが画面共有
マイクミュートが有効
3 カメラミュート SubViewのカメラがミュートの場合に表示されます。
4 拡大ボタン [映像ソースが360映像 または 拡大機能を有効にした場合のみ]
SubViewの映像を拡大します。
※ Safariでは360映像のボタンによる拡大は非対応のため、非表示となります。
5 縮小ボタン [映像ソースが360映像 または 拡大機能を有効にした場合のみ]
SubViewの映像を縮小します。
※ Safariでは360映像のボタンによる縮小は非対応のため、非表示となります。
6 360映像 [映像ソースが360映像の場合のみ]
SubViewの映像ソースが360映像で、表示領域の操作が可能であることを示します。
7 メニューボタン 後述の SubViewMenu が表示されます。
8 録画通知 addRecordingMemberにより登録された参加者が、対象のSubViewを録画中であることを表示します。
  • SubViewのアスペクト比は16:9で固定
    • 映像ソースのアスペクト比が16:9よりも横長の時は上下に黒幕がつきます(レターボックス)
    • 映像ソースのアスペクト比が16:9よりも縦長の時は左右に黒幕がつきます(ピラーボックス)
  • メニューボタンは入室時に表示された状態で開始します
  • メニューボタンは一定時間(3.5秒)操作がない場合、またはSubViewの領域外にマウスカーソルが出た場合に非表示となります
    • SubView領域内の mousemove イベント(モバイルの場合はタップ)で再表示されます
  • create 時の設定で一部ボタンの非表示のカスタマイズが可能
  • 360映像はユーザー操作による表示領域の変更が可能
    • 拡大/縮小: マウスホイール(PC), ピンチイン/アウト(PC, モバイル)
    • 視点の移動: ドラッグ(PC), スワイプ(モバイル)
  • highlight の実行時に対象のSubViewが一定時間(2秒間)強調表示されます
    • FullScreenレイアウトでは1つのSubViewしか表示されていないため、強調表示されません
    • 強調表示中はレイアウトを切り替えても持続しますが、FullScreenレイアウトは対象外です
  • 映像を受信停止した場合、SubViewの表示上は受信停止前の最後のフレームで固まった状態または黒画面となります
  • SubViewが以下のようにレイアウト的に非表示となった際に自動的に映像の受信が停止され、表示されたタイミングで再度受信再開されます(この機能はcreate時に指定する subView.enableAutoVideoReceiving のオプションで無効化できます)
    • FullScreenレイアウト時に非表示となったSubView
    • Galleryレイアウト, Presentationレイアウト時にスクロールが発生して画面上で非表示となっているSubView

SubViewMenu

名称 概要
拡大表示 [現在のレイアウトがPresentation以外の場合]
対象のSubViewを拡大表示したPresentationレイアウトに変更します。

[現在のレイアウトがPresentationの場合]
対象のSubViewを拡大表示領域に移動します。

一覧表示 レイアウトをGalleryに変更します。
全画面表示 対象のSubViewを全画面表示したFullScreenレイアウトに変更します。
全画面解除 全画面表示を解除して元のレイアウトに変更します。
録画開始 対象のSubViewの録画を開始するための 録画設定ダイアログ を表示します。
一部の録画非対応のブラウザ(※1)では表示されません
録画停止 録画を停止して、録画ファイルをダウンロードします。
一部の録画非対応のブラウザ(※1)では表示されません
視点共有 onSharePoV()で指定されたコールバックに360映像の視点情報を渡します。
360映像のSubViewにのみ表示されます。
  • create 時の設定で一部ボタンの表示/非表示のカスタマイズが可能
  • (※1) 以下の環境では録画開始/録画停止ボタンが表示されません
    • MediaRecorderに非対応のブラウザ
    • Chrome(Windows, Mac), Edge(Windows) 以外のブラウザ

録画設定ダイアログ

No. 名称 概要
1 MIME Type 録画データの保存形式を選択します。
2 Audio Mixing 録画データに参加者全員の音声を含めるか、対象のみの音声とするかを選択します。
3 Audio Bitrate 録画データのAudio Bitrateの値を選択します。
デフォルト値はブラウザの仕様に依存します。
4 Video Bitrate 録画データのVideo Bitrateの値を選択します。
デフォルト値は 2.5Mbps です。
5 キャンセルボタン 録画をキャンセルしてダイアログを閉じます。
6 開始ボタン 選択した設定で録画を開始します。
  • 録画機能では MediaRecorder を利用しています
    • MediaRecorderに非対応のブラウザでは録画開始ボタンが表示されません
  • 対象のSubViewのMediaStream(映像+音声)の録画が可能です
    • 複数拠点の映像をミックスした録画は非対応です(単一映像+全拠点音声のみ対応)
    • 受信したMediaStreamをそのまま録画するため、360映像は Equirectangular などの形式となります
  • MIME Typeの選択肢は以下の中から各ブラウザが対応している形式のみが表示されます
    video/webm
    video/webm;codecs="vp8,vorbis"
    video/webm;codecs="vp9,vorbis"
    video/webm;codecs="vp8,opus"
    video/webm;codecs="vp9,opus"
    video/mp4
  • Audio MixingMix All の場合、参加者全員の音声が録画ファイルに含まれます
  • Audio BitrateおよびVideo Bitrateの設定値が各ブラウザの対応する範囲を超える場合、各ブラウザにおける最大/最小の値となります
  • 長時間の録画は 3時間 が目安です。これを越えるとメモリなどの制約により、録画に失敗して正しい録画ファイルが得られない可能性が高くなります
    • 録画中はCPUやメモリが必要となるため、並行して実行するアプリやプロセスはできる限り終了した状態で行ってください
  • 録画停止時に録画データのダウンロードダイアログが表示されます
    • 録画中に自分や録画対象のSubViewが切断した場合はその時点でダウンロードダイアログが表示されます
    • 録画データのファイル名は ${connection_id}-${yyyyMMdd_HHmmss}.${拡張子} となります
    • 録画対象がカメラをミュートした場合、録画ファイルでは最後の映像フレームで止まった状態となります
  • 自拠点録画時に以下の制約があります
    • 録画中にカメラをミュートすると、録画ファイル上はミュート時までの映像となり、再度アンミュートにしても録画データ上はカメラ映像が復帰しません
  • 録画対象が以下のいずれかの条件を満たす場合は録画開始に失敗し、録画開始時エラーが発生します
    • 録画対象が他拠点、かつ録画対象がカメラミュートの場合
    • 録画対象のMediaStreamが存在しない場合(録画開始ダイアログ表示中に録画対象が退室した等)
    • 録画対象のMediaStreamがinactiveな場合
    • 録画対象の映像を受信停止している場合

Toolbar仕様

No. 名称 概要
1 カメラボタン 自分のカメラのON/OFFを切り替えます。
2 マイクボタン 自分のマイクのON/OFFを切り替えます。
3 画面共有ボタン 画面共有を開始/終了します。
4 参加者一覧ボタン [未実装]
参加者一覧を表示します。
5 デバイス設定ボタン デバイス設定ダイアログ を表示します。
6 切断ボタン 通話から切断します。
  • 入室時に表示された状態で開始します
  • 一定時間(3.5秒)操作がない場合に非表示となります
    • iframe領域内の mousemove イベント(モバイルの場合はタップ)で再表示されます
  • create 時の設定でツールバー自体や各ボタンの非表示、任意のボタンの追加などのカスタマイズが可能
  • iframeのウィンドウサイズの幅が335px以下の場合、ツールバーを自動的にiframe領域内の右下寄せで縮小表示します
  • 画面共有は MediaDevices.getDisplayMedia を利用しています
    • MediaDevices.getDisplayMedia に非対応のブラウザでは画面共有ボタンが非表示となります
    • 画面共有ボタン押下後の挙動は各ブラウザの仕様に依存します

デバイス設定ダイアログ仕様

No. 名称 概要
1 カメラプレビュー 選択中のカメラのプレビューが表示されます。
2 カメラデバイス選択 利用するカメラデバイスを選択します。
3 マイクデバイス選択 利用するマイクデバイスを選択します。
4 スピーカーデバイス選択 利用するスピーカーデバイスを選択します。
5 キャンセルボタン デバイス設定をキャンセルしてダイアログを閉じます。
選択したデバイスに変更されず以前の設定のままとなります。
6 適用ボタン デバイス設定を適用してダイアログを閉じます。
  • 各設定のデバイス一覧にはOSやブラウザで認識されているデバイスが表示されます
    • スピーカー情報を取得できないブラウザではスピーカーを変更できないため、OSの設定から既定のスピーカーを変更してください
  • 通話中に利用している外部デバイス(カメラ, マイク)が切断されるとダミーデバイス(デバイスを利用しない)に変更されます
    • モバイル端末の場合はマイク切断時にOS側でマイクが自動的に切り替わるため、ダミーデバイスにはなりません

ドキュメント

メッセージング機能

セキュリティホワイトペーパー