RICOH Live Streaming Conference 機能詳細説明

はじめに

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

基本構成

基本構成

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

レイアウト

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

Gallery Presentation FullScreen
GL9 PL1 FullScreen

Gallery

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

SubView数=4 SubView数=9 SubView数=16
GL4 GL9 GL16

仕様

  • 自分の共有画面およびカメラ映像のSubViewは常に最下位(左上が上位、右下が下位)に表示されますが、それ以外のSubViewの並び順については不定となります
  • 最大表示SubView数の上限はありませんが、SubView数が17以上の表示については現在サポート外となります(将来的に対応予定)

Presentation

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

SubView1つを拡大表示(通常領域は縦並び) SubView2つを拡大表示(通常領域は縦並び) SubView1つを拡大表示(通常領域は横並び) SubView2つを拡大表示(通常領域は横並び)
PL1Column PL2Column PL1Row PL2Row

仕様

  • defaultLayout"presentation" の場合は以下の挙動となります
    • 入室時に自分しかいない場合、自分のカメラ映像のSubViewが拡大表示され、次に他のSubViewが追加されたタイミングでそのSubViewが拡大表示されます
    • 入室時に複数の参加者がいる場合、最初に追加されたSubViewが拡大表示されます
  • 通常表示領域のSubViewをダブルクリックまたは後述のSubViewMenuの「拡大表示」を選択することで、SubViewを拡大表示領域に移動できます
  • 拡大表示領域のSubViewをダブルクリックすることで通常表示領域に戻すことができます
  • 拡大表示領域が複数の場合は、拡大表示領域内のSubViewを均等なサイズで並べて表示されます
  • 配置切替ボタンをクリックすることで、通常表示領域を横並びか縦並びかを切替えることができます

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の360映像を拡大します。
5 縮小ボタン [映像ソースが360映像の場合のみ]
SubViewの360映像を縮小します。
6 360映像 [映像ソースが360映像の場合のみ]
SubViewの映像ソースが360映像で、表示領域の操作が可能であることを示します。
7 メニューボタン 後述の SubViewMenu が表示されます。
8 録画通知 addRecordingMemberにより登録された拠点が、対象のSubViewを録画中であることを表示します。

仕様

  • SubViewのアスペクト比は16:9で固定
    • 映像ソースのアスペクト比が16:9よりも横長の時は上下に黒幕がつきます(レターボックス)
    • 映像ソースのアスペクト比が16:9よりも縦長の時は左右に黒幕がつきます(ピラーボックス)
  • メニューボタンは通話参加時に表示された状態で開始します
  • メニューボタンは一定時間(3.5秒)操作がない場合に非表示となります
    • SubView領域内の mousemove イベント(モバイルの場合はタップ)で再表示されます
  • create 時の設定で一部ボタンの非表示のカスタマイズが可能
  • 360映像はユーザー操作による表示領域の変更が可能
    • 拡大/縮小: マウスホイール(PC), ピンチイン/アウト(PC, モバイル)
    • 視点の移動: ドラッグ(PC), スワイプ(モバイル)

SubViewMenu

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

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

一覧表示 レイアウトをGalleryに変更します。
全画面表示 対象のSubViewを全画面表示したFullScreenレイアウトに変更します。
全画面解除 全画面表示を解除して元のレイアウトに変更します。
録画開始 [beta版]
対象のSubViewの録画を開始するための 録画設定ダイアログ を表示します。
MediaRecorder に非対応のブラウザでは表示されません
録画停止 [beta版]
録画を停止して、ブラウザのファイル保存ダイアログを表示します。
視点共有 onSharePoV()で指定されたコールバックに360映像の視点情報を渡します。
360映像のSubViewにのみ表示されます。

仕様

  • create 時の設定で一部ボタンの表示/非表示のカスタマイズが可能

録画設定ダイアログ

No. 名称 概要
1 MIME Type 映像データの保存形式を選択します。
2 Audio Bitrate 映像データのAudio Bitrateの値を選択します。
デフォルト値はブラウザの仕様に依存します。
3 Video Bitrate 映像データのVideo Bitrateの値を選択します。
デフォルト値は 2.5Mbps です。
4 キャンセルボタン 録画をキャンセルしてダイアログを閉じます。
5 開始ボタン 選択した設定で録画を開始します。

仕様

  • 本録画機能では MediaRecorder を利用しています
    • MediaRecorderに非対応のブラウザでは録画開始ボタンが表示されません
  • 対象のSubViewのStream(映像+音声)の録画が可能です
    • 複数のStreamをミックスした録画は非対応です
    • 受信したStreamをそのまま録画するため、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 BitrateおよびVideo Bitrateの設定値が各ブラウザの対応する範囲を超える場合、各ブラウザにおける最大/最小の値となります
  • 録画停止時に録画データのダウンロードダイアログが表示されます
    • 録画データのファイル名は${connection_id}-${yyyyMMdd_HHmmss}.${拡張子}となります
    • 録画中に自分や録画対象の拠点が切断した場合はその時点でダウンロードダイアログが表示されます

Toolbar

No. 名称 概要
1 カメラボタン 自分のカメラのON/OFFを切り替えます。
2 マイクボタン 自分のマイクのON/OFFを切り替えます。
3 画面共有ボタン 画面共有を開始/終了します。
4 参加者一覧ボタン [未実装]
参加者一覧を表示します。
5 デバイス設定ボタン デバイス設定ダイアログ を表示します。
6 切断ボタン 通話から切断します。

仕様

  • 通話参加時に表示された状態で開始します
  • 一定時間(3.5秒)操作がない場合に非表示となります
    • iframe領域内の mousemove イベント(モバイルの場合はタップ)で再表示されます
  • create 時の設定でツールバー自体や各ボタンの非表示のカスタマイズが可能
  • iframeのウィンドウサイズの幅が335px以下の場合、ツールバーを自動的にiframe領域内の右下寄せで縮小表示します
  • 画面共有は MediaDevices.getDisplayMedia を利用しています
    • 画面共有ボタン押下後の挙動は各ブラウザの仕様に依存します

デバイス設定ダイアログ

No. 名称 概要
1 カメラプレビュー 選択中のカメラのプレビューが表示されます。
2 カメラデバイス選択 利用するカメラデバイスを選択します。
3 マイクデバイス選択 利用するマイクデバイスを選択します。
4 スピーカーデバイス選択 利用するスピーカーデバイスを選択します。
5 キャンセルボタン デバイス設定をキャンセルしてダイアログを閉じます。
選択したデバイスに変更されず以前の設定のままとなります。
6 適用ボタン デバイス設定を適用してダイアログを閉じます。

仕様

  • 各設定のデバイス一覧にはOSやブラウザで認識されているデバイスが表示されます