環境構築 / 動作確認

所要時間：30 分

ClientID / Secret を取得したら、本サービスで提供する SDK の RICOH Live Streaming Conference を体験するサンプルアプリケーションを動かしましょう。

環境構築

1. 事前に Node.js と Yarn をインストールしておきます
2. PC に、GitHub で公開されている ls-conf-sdk のリポジトリをクローンします

ここから、サンプルアプリケーションの ls-conf-sdk/sample/ の動かし方について説明します。

バックエンドの環境構築

ls-conf-sdk/sample/backend/ でバックエンドの環境構築をします。

1. backend/config/local.json.sample の local.json.sample を local.json にリネームします

   ls-conf-sdk
    └─ sample
        └─ backend
            └─ config
                └─ local.json     // リネーム

2. 作成した local.json の "clientId": "" に発行された ClientID を記載します
   • ls-conf-sdk/sample/backend/config/local.json

   {
     "apiBase": "https://api.livestreaming.mw.smart-integration.ricoh.com/v1",
     "clientId": "発行された ClientID を記載",  // 変更箇所
     "port": 4000,
       ⋮
   }

3. 環境変数で ClientSecret を LS_CLIENT_SECRET=発行されたClientSecret となるように設定します
4. 以下のコマンドを実行するとサーバーが起動します

   $ cd ls-conf-sdk/sample/backend     # backend へ移動
   $ yarn                              # パッケージのインストール
   $ yarn start                        # ローカル実行 (express を利用)
      :
   Api Server listening on port 4000!

5. Api Server listening on port 4000! というメッセージが出ると成功です

フロントエンドの環境構築

ls-conf-sdk/sample/frontend/ でフロントエンドの環境構築をします。

1. frontend/config/local.json.sample の local.json.sample を local.json にリネームします

   ls-conf-sdk
    └─ sample
        └─ frontend
            └─ config
                └─ local.json     // リネーム

2. 作成した local.json の "clientId": "" に発行された ClientID を記載します
   • ls-conf-sdk/sample/frontend/config/local.json

   {
     "apiBase": "http://localhost:3000/api",
     "clientId": "発行された ClientID を記載",  // 変更箇所
     "thetaZoomMaxRange”: 8,
       ⋮
    }

3. 以下のコマンドを実行するとサーバーが起動します

   $ cd ls-conf-sdk/sample/frontend    # frontend へ移動
   $ yarn                              # パッケージのインストール
   $ yarn start                        # ローカル実行 (webpack を利用)
      :
   ｢wdm｣: Compiled successfully.

4. ブラウザで http://localhost:3000 にアクセスし、画像のような画面が表示されると成功です

動作確認

1. 環境構築の手順通りバックエンドとフロントエンドのサーバーを起動します
2. ブラウザで http://localhost:3000 にアクセスし、任意のルーム名とユーザー名を入力して「参加」をクリックします
3. ブラウザの新規タブに記載したユーザー名の拠点が表示されます
4. ツールバーのカメラアイコンをクリックして カメラ ON、マイクアイコンをクリックしてマイク OFF にします
5. http://localhost:3000 のタブに戻り、ルーム名は同じ名前で、ユーザー名は異なる名前で再度入室します
6. ブラウザの新規タブに 2 つの拠点が表示されます
7. ツールバーのカメラアイコンをクリックして カメラ ON、マイクアイコンをクリックしてマイク OFF にします
8. 画面に 2 つ映像が表示されると成功です
   • ブラウザのタブごとでユーザ名に紐づく配信拠点が作成され、タブの拠点間で映像が送受信されていることが分かります
   • URL を見ると、ルーム名で映像を流す場所を指定していることが分かります
   • マイクがオンの場合、近い拠点で映像が送受信されるため、ハウリングが発生します

※うまく動作しない場合、FAQをご確認ください。それでも問題が解決しない場合お問い合わせください。

※基本説明動画でも RICOH Live Streaming Conference の特徴とそのサンプルの動かし方を動画でご紹介していますので、ご参照ください。

※RICOH Live Streaming Conference の機能の詳細は、RICOH Live Streaming Conference 機能詳細説明をご確認ください。

※RICOH Live Streaming Conference の開発の詳細は、RICOH Live Streaming Conference アプリケーション開発者ガイドをご確認ください。