4K Live Streaming
Developer

RICOH Live Streaming Conference 機能詳細説明

はじめに

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

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

基本構成

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

Room

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

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

また、WebRTC の接続が不安定なときは以下のようなインジケーターが表示されます。

Room 入室時通話中

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
  • iframe の width が 346px 未満の場合は一部の表示が見切れる可能性があります
  • Mobile Safari かつ VideoControlBar が非表示（CreateParametersの player.isHiddenVideoControlBar で変更可能）の場合、最初にクリック画面が表示され、画面をタップすることで Player が表示されます

レイアウト仕様

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

GalleryPresentationFullScreen
GL9PL1FullScreen

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

SubView 数=4SubView 数=9
GL4GL9
  • SubView の表示順については以下の通りです
    • 映像あり（カメラ ON または 画面共有）の SubView が上位に表示されます
    • 映像有無が同条件の場合、自分の SubView は最下位（左上が上位、右下が下位）に表示され、それ以外の SubView の並び順については不定となります
  • １画面に表示できる SubView の数は最大で 16 （Android のみ 8 ）で、表示できなくなった SubView は画面のスクロールをすることで表示が可能です
    • 複数のタブで Room に参加している場合は、ブラウザの制約により正しく表示されない場合があります

Presentation

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

SubView1 つを拡大表示（通常領域は縦並び）SubView2 つを拡大表示（通常領域は縦並び）SubView1 つを拡大表示（通常領域は横並び）SubView2 つを拡大表示（通常領域は横並び）
PL1ColumnPL2ColumnPL1RowPL2Row
  • defaultLayout が "presentation" の場合は以下の挙動となります
    • 入室時に自分しかいない場合、自分のカメラ映像の SubView が拡大表示され、次に他の SubView が追加されたタイミングでその SubView が拡大表示されます
    • 入室時に複数の参加者がいる場合、最初に追加された映像が表示されている SubView が拡大表示されます
  • 通常表示領域の SubView をダブルクリックまたは後述の SubViewMenu の「拡大表示」を選択することで、SubView を拡大表示領域に移動できます
  • 拡大表示領域の SubView をダブルクリックすることで通常表示領域に戻すことができます
  • 拡大表示領域が複数の場合は、拡大表示領域内の SubView を均等なサイズで並べて表示されます
  • 通常表示領域の SubView の表示順については以下の通りです
    • 映像あり（カメラ ON または 画面共有）の SubView が上位に表示されます
    • 映像有無が同条件の場合、自分の SubView は最下位（左上が上位、右下が下位）に表示され、それ以外の SubView の並び順については不定となります
  • 配置切替ボタンをクリックすることで、通常表示領域を横並びか縦並びかを切替えることができます
  • iframe の width が 900px 以下の場合、通常表示領域が非表示になります
  • SubView が通常表示領域に配置された場合、SubView 内の 拡大/縮小ボタン および 書き込みボタン が非表示となります
  • 拡大表示領域に表示できる SubView の数は最大で 16 （Android のみ 8 ）で、表示できなくなった SubView は画面のスクロールをすることで表示が可能です
    • 複数のタブで Room に参加している場合は、ブラウザの制約により正しく表示されない場合があります

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 の映像を拡大します。
5縮小ボタン[ソースが 360 映像/静止画 または 拡大機能を有効にした場合のみ]
SubView の映像を縮小します。
6360 映像[ソースが 360 映像/静止画 の場合のみ]
SubView のソースが 360 映像/静止画 で、表示領域の操作が可能であることを示します。
7閉じるボタン[ソースが 静止画 の場合のみ]
SubView を非表示にします。
8メニューボタン後述の SubViewMenu が表示されます。
9書き込みボタン[書き込みボタンの表示を有効にした場合のみ]
映像に対してマーカーの書き込みの開始/停止を切り替えます。
Presentation レイアウトの通常表示領域の SubView には表示されません。
10録画通知addRecordingMember により登録された参加者が、対象の SubView を録画中であることを表示します。
  • SubView のアスペクト比は 16:9 で固定
    • ソースのアスペクト比が 16:9 よりも横長の時は上下に黒幕がつきます（レターボックス）
    • ソースのアスペクト比が 16:9 よりも縦長の時は左右に黒幕がつきます（ピラーボックス）
  • メニューボタンは入室時に表示された状態で開始します
  • メニューボタンは一定時間（3.5 秒）操作がない場合、または SubView の領域外にマウスカーソルが出た場合に非表示となります
    • SubView 領域内の mousemove イベント（モバイルの場合はタップ）で再表示されます
  • create 時の設定で一部ボタンの非表示のカスタマイズが可能
  • 360 映像はユーザー操作による表示領域の変更が可能
    • 拡大/縮小: マウスホイール（PC）, ピンチイン/アウト（PC, モバイル）
    • 視点の移動: ドラッグ（PC）, スワイプ（モバイル）
  • 通常映像は拡大機能を有効にした場合のみユーザー操作による拡大/縮小が可能
    • 操作方法は 360 映像の拡大/縮小と同様
  • 拡大ボタンによる最大拡大倍率は以下の通りです
    • 360 映像: 8 倍（CreateParameterの thetaZoomMaxRange で変更可能）
    • 通常映像: 16 倍（固定）
  • highlight の実行時に対象の SubView が一定時間（2 秒間）強調表示されます
    • FullScreenレイアウトでは 1 つの SubView しか表示されていないため、強調表示されません
    • 強調表示中はレイアウトを切り替えても持続しますが、FullScreenレイアウトは対象外です
  • 映像を受信停止した場合、SubView の表示上は受信停止前の最後のフレームで固まった状態または黒画面となります
  • SubView が以下のようにレイアウト的に非表示となった際に自動的に映像の受信が停止され、表示されたタイミングで再度受信再開されます（この機能は create 時に指定する subView.enableAutoVideoReceiving のオプションで無効化できます）
    • FullScreen レイアウト時に非表示となった SubView
    • Gallery レイアウト, Presentation レイアウト時にスクロールが発生して画面上で非表示となっている SubView
  • マイク ON 時の状態表示では、発話判定がある度に一定時間（デフォルトで 500ms）アイコンが光ります
  • 書き込み機能については以下の仕様となります
    • 書き込まれたマーカーは一定時間（5 秒）で自動的に消えます
    • 書き込まれたマーカーの情報は strokeUpdated のイベントを addEventListener で登録することで取得可能です
    • 書き込み中の拡大機能については以下の仕様となります
      • 360 映像
        • 書き込み中も拡大倍率はリセットされません
        • 書き込み中もボタンによる拡大/縮小ができますが、マウスホイール（PC）, ピンチイン/アウト（PC, モバイル）による拡大/縮小はできません
          • Safari 14 以前では 360 映像のボタンによる拡大/縮小は非対応のため、拡大/縮小ボタンが非表示となります
      • 通常映像
        • 書き込み中は拡大倍率がリセットされます
        • 書き込み中は拡大/縮小ボタンが非表示となり、マウスホイール（PC）, ピンチイン/アウト（PC, モバイル）による拡大/縮小もできません
    • 書き込み中はダブルクリック（ダブルタップ）によるレイアウト変更ができません
    • 書き込み中に対象の SubView がカメラミュートや退室になると書き込みが終了し、マーカーが削除されます
    • マルチタッチ等による同時書き込みには非対応です

SubViewMenu

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

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

Toolbar

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

デバイス設定ダイアログ

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

VideoControlBar

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

この情報は役に立ちましたか？

4K Live Streaming

Getting Started

For Developer

Terms & Policy

©︎RICOH All Rights Reserved.