RICOH Live Streaming Conference 機能詳細説明

はじめに

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

基本構成

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

Room

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

基本構成

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

Player

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

基本構成

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

レイアウト仕様

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

GalleryPresentationFullScreen
GL9PL1FullScreen

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

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

Presentation

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

SubView1 つを拡大表示(通常領域は縦並び)SubView2 つを拡大表示(通常領域は縦並び)SubView1 つを拡大表示(通常領域は横並び)SubView2 つを拡大表示(通常領域は横並び)
PL1ColumnPL2ColumnPL1RowPL2Row
  • 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 が全画面表示されます

レイアウト切り替え

遷移元/遷移先     GalleryPresentationFullScreen
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 の状態情報が表示されます。映像ソースが画面共有マイクOFFマイクON(発話なし)マイクON(発話中)
3カメラミュートSubView のカメラがミュートの場合に表示されます。
4拡大ボタン[映像ソースが 360 映像 または 拡大機能を有効にした場合のみ]
SubView の映像を拡大します。
※ Safari では 360 映像のボタンによる拡大は非対応のため、非表示となります。
5縮小ボタン[映像ソースが 360 映像 または 拡大機能を有効にした場合のみ]
SubView の映像を縮小します。
※ Safari では 360 映像のボタンによる縮小は非対応のため、非表示となります。
6360 映像[映像ソースが 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
  • マイクON時の状態表示では、発話判定がある度に一定時間(デフォルトで500ms)アイコンが光ります

SubViewMenu

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

[現在のレイアウトが Presentation の場合]
対象の SubView を拡大表示領域に移動します。
一覧表示レイアウトを Gallery に変更します。
全画面表示対象の SubView を全画面表示した FullScreen レイアウトに変更します。
全画面解除全画面表示を解除して元のレイアウトに変更します。
録画開始対象の SubView の録画を開始するための 録画設定ダイアログ を表示します。
一部の録画非対応のブラウザ(※1)では表示されません。
Player時には表示されません。
録画停止録画を停止して、録画ファイルをダウンロードします。
一部の録画非対応のブラウザ(※1)では表示されません。
Player時には表示されません。
視点共有ボタン押下時に sharePoV のイベントで360 映像の視点情報を渡します。
360 映像の SubView にのみ表示されます。デフォルトは非表示です。
カスタムメニューCreateParameters.subView.menu.customItems で指定された SubViewMenuItem
targetSubView に対して label を表示します。未指定の場合は非表示です。addApplicationEventListenerSubViewMenuItem.type と callback を指定している場合、
メニュー押下時にイベントが発火します。
  • create 時の設定で一部ボタンの表示/非表示のカスタマイズが可能
  • (※1) 以下の環境では録画開始/録画停止ボタンが表示されません
    • MediaRecorderに非対応のブラウザ
    • Chrome(Windows, Mac), Edge(Windows) 以外のブラウザ

録画設定ダイアログ

No.名称概要
1MIME Type録画データの保存形式を選択します。
2Audio Mixing録画データに参加者全員の音声を含めるか、
対象のみの音声とするかを選択します。
3Audio Bitrate録画データの Audio Bitrate の値を選択します。
デフォルト値はブラウザの仕様に依存します。
4Video 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カスタムボタンCreateParameters.toolbar.customItem で指定された ToolbarItem.iconName の
アイコンを表示します。未指定の場合は非表示です。
addApplicationEventListenerToolbarItem.type と callback を指定している
場合、ボタン押下時にイベントが発火します。
7切断ボタン通話から切断します。
  • 入室時に表示された状態で開始します
  • 一定時間(3.5 秒)操作がない場合に非表示となります
    • iframe 領域内の mousemove イベント(モバイルの場合はタップ)で再表示されます
  • create 時の設定でツールバー自体や各ボタンの非表示、任意のボタンの追加などのカスタマイズが可能
  • iframe のウィンドウサイズの幅が335px以下の場合、ツールバーを自動的に iframe 領域内の右下寄せで縮小表示します
  • 画面共有は MediaDevices.getDisplayMedia を利用しています
    • MediaDevices.getDisplayMedia に非対応のブラウザでは画面共有ボタンが非表示となります
    • 画面共有ボタン押下後の挙動は各ブラウザの仕様に依存します

デバイス設定ダイアログ

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

VideoControlBar

No.名称概要
1再生/一時停止ボタン現在の再生状態を示します。ボタン押下で再生状態の変更が可能です。
動画のロード中の状態ではインジケーターが表示されます。
2音量ボタン動画のスピーカーのミュート状態を示します。ボタン押下でミュート状態の変更が可能です。デフォルトはミュートです。
3音量バー動画の再生音量を示します。スライダーの操作で再生音量(0-100, デフォルトは50)の変更が可能です。
4再生時間/再生日時現在の再生位置の時間を示し、後述の再生モードによって表示が異なります。
時刻の場合はブラウザのタイムゾーン設定が適用されます。
[同期再生] 録画日時における再生位置の時刻
[一括再生] {現在の再生時間}/{全ての動画の中で一番長い動画の総再生時間}
5シークバー現在の再生位置を示します。スライダーの操作で再生位置の変更が可能です。
  • 指定された全ての動画が同一Roomでの録画データである(以下の条件を全て満たす)場合に「同期再生」モードとなり、それ以外の場合は「一括再生」モードとなります
    • 全ての動画のURLと同じ配置場所/ファイル名で録画のメタデータのJSONファイルが配置されている
      • ex: https://hoge.com/fuga/THETA68-20220413081041-20220413081305.webm
      • ex: https://hoge.com/fuga/THETA68-20220413081041-20220413081305.json
      // メタデータ(JSONファイル)のサンプル
      {
        "room_id": "sample",
        "connection_id": "FS2ESFE37S0HF2CX6BVEB7K4CG",
        "started_at": "2022-04-13T08:10:41.302686Z",
        "ended_at": "2022-04-13T08:13:05.844915Z",
        "audio": {
          "codec": "OPUS"
        },
        "video": {
          "codec": "H264",
          "bitrate_kbps": 10000,
          "width": 3840,
          "height": 1920
        }
      }
    • 全ての動画のメタデータ内の room_id の値が一致している
    • 全ての動画のメタデータの中で 一番早い started_at から 一番遅い ended_atまで が24時間以内に収まっていること
  • 「同期再生」モードでは、全ての動画ファイルが同期して再生されることで実際のRoomでの映像や会話を再現します
    • 再生位置の時刻にデータが存在しない場合は SubView が非表示になります
    • 動画が非連続で参加者が一人もいない時間帯がある場合は SubView が表示されません
  • 「一括再生」モードでは、全ての動画ファイルが頭から同時に再生されます
    • 再生が終了した時点でその動画の SubView は非表示になります
  • 全ての再生モードで共通
    • 全ての動画のロードとバッファリングが完了してから再生が開始されます
    • 全ての動画に対しての一括操作のみで、動画の個別の一時停止や再生, ミュートなどはできません