再生プレイヤー開発者ガイド

はじめに

RICOH Live Streaming Conference（以下、本コンポーネント）の Player 機能を利用して、録画した動画ファイルを再生する Web アプリケーションを開発するための方法について記載します。

本コンポーネントを利用することで、録画した 360 映像の動画を再生しながら自由に操作して好きな場所を見ることができます。

利用例

サンプルアプリケーション

環境構築

再生プレイヤーのサンプルアプリケーションの実行方法について説明します。

事前に Node.js と Yarn をインストールしておきます
GitHub で公開されている ls-conf-sdk-samples のリポジトリをクローンします
web-app-samples/recording-player-app/frontend/ に移動します
config/local.json.sample をコピーして config/local.json を作成します

以下のコマンドを実行するとローカルで Web サーバーが起動します

$ cd web-app-samples/recording-player-app/frontend  # frontend へ移動
$ yarn install                                      # パッケージのインストール
$ yarn start                                        # ローカル実行 (webpack を利用)
   :
｢wdm｣: Compiled successfully.

ブラウザで http://localhost:3000 にアクセスし、以下の画面が表示されると成功です

動作確認

環境構築の手順通りに frontend のサーバーを起動します
ブラウザで http://localhost:3000 にアクセスし、以下の画面が表示されるのを確認します
- サンプルアプリではタブで以下の 2 パターンでの動画の指定のサンプルを用意しています
  - 「URL」では、同期再生に必要な情報を指定した JSON ファイルの URL を指定して再生します
  - 「FILE」では、PC 内に保存されている動画ファイルを指定して再生します

「URL」のタブでサンプルとしてデフォルトの JSON ファイルの URL が指定された状態のまま「再生」ボタンをクリックします

デフォルトの JSON ファイルにはプレイヤーでの同期再生に必要な情報が記載されています

{
   "sources": [
     {
       "url": "https://document.livestreaming.mw.smart-integration.ricoh.com/movie/top-THETA-novoice.mp4",
       "connectionId": "THETA",
       "label": "360° 映像",
       "isTheta": true,
       "metaUrl": "https://document.livestreaming.mw.smart-integration.ricoh.com/movie/top-THETA-novoice.json"
     },
     {
       "url": "https://document.livestreaming.mw.smart-integration.ricoh.com/movie/top-M400-novoice.mp4",
       "connectionId": "M400",
       "label": "ウェアラブルグラスの映像",
       "isTheta": false,
       "metaUrl": "https://document.livestreaming.mw.smart-integration.ricoh.com/movie/top-M400-novoice.json"
     }
  ]
}

こちらの JSON ファイルでは、同一の会議で 2 拠点のカメラ映像をクラウド録画したケースとして 2 つの動画ファイルが同期再生されるようにメタデータも合わせて指定されており、こちらの createPlayer() の API 仕様より、sources として動画ファイルのソース情報が定義された JSON ファイルの URL を指定をしています

ブラウザの別タブで再生画面が開きます
- VideoControlBar の再生ボタンをクリックすると、2 つの動画が再生されます
- 確認が完了したらブラウザのタブを閉じてください
次に再度ブラウザで http://localhost:3000 にアクセスし、「FILE」のタブをクリックして、「ファイルを選択」ボタンから再生したい動画ファイルを指定して「再生」ボタンをクリックします
- お手元に動画ファイルがない場合は、こちらの 360 動画のサンプルをダウンロードして、「ファイルを選択」からダウンロードしたファイルを指定してください
  - ダウンロード時に動画ファイルが再生された場合は、右下のメニューを開いて「ダウンロード」を押してください
- 指定した動画が 360 動画の場合は「360° 映像を使用する」にチェックを入れてください
ブラウザの別タブで再生画面が開きます
- VideoControlBar の再生ボタンをクリックすると、指定した動画が再生されます