利用環境チェックをモバイル向けにカスタマイズしてみる

WebRTC
Agora.io

概要

下記記事で利用環境チェックのサンプルを使ったカスタマイズを紹介しています。
ビデオ通話のトラブルに対する実装のコツ

PC で確認するとほぼ全ての項目に対してチェックが通ると思いますが、モバイルブラウザで試すと、解像度チェックの部分で各項目の結果が軒並み NG になる場合があります。

その場合、デバイスの向きを変えて再チェックすると、ほぼ全部「supported」と判定されたりします。

元々の判定ロジックとして:

自映像を含むストリームを作成
ストリームの再生を開始し VideoElement を取得
VideoElement の縦横サイズが、指定した解像度の寸法と一致しているかチェック

といった実装になっていますが、この VideoElement の縦横サイズがデバイスの向きに左右される事があるようです。

※ 2020/06/11 更新:
サンプルの解像度チェックのロジックが更新され、デバイスの向きに関係なく判定されるようになりました。

この記事では、画質よりも最低限「映像音声が出ているか確認したい」というニーズが高い場合を想定し、サンプルを元に解像度チェックを自映像の確認チェックに置き換えるカスタマイズを紹介します。

実装

Agora.io が公開している WebRTC Precall Test に手を加えていきます:
https://github.com/AgoraIO/Tools/tree/master/TroubleShooting/Agora-WebRTC-Troubleshooting

今回変更を加えるのは

src/App.vue
src/utils/i18n/en.js

の 2 ファイルのみです。

先ずは App.vue を開き  以下のブロックが定義している UI 部分を次のように置き換えます:

App.vue

<!-- camera check -->
<v-stepper-content step="3">
  <v-container grid-list-md>
    <v-layout row wrap>
      <v-flex md6 xs12>
        <v-card color="info" class="white--text" style="height: 100%">
          <v-card-title>
            <div class="headline">{{text.camera_check}}</div>
          </v-card-title>
          <v-card-text>
            {{text.camera_check_desc}}
          </v-card-text>
          <v-card-actions>
            <v-btn @click="resolveCameraCheck">{{text.yes}}</v-btn>
            <v-btn flat @click="rejectCameraCheck">{{text.no}}</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>

      <v-flex md6 xs12>
        <v-card style="height: 100%">
          <v-card-text style="padding: 16px 7px 16px 7px">
            <div id="local_view" class="video-placeholder">
            </div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</v-stepper-content>

testSuites リストの中身を更新します:

App.vue

    ....
    testSuites: [
      ...
      {
        id: "3",
        label: "camera",
        notError: true,
        extra: ""
      },
      ...
    ],
    ...

handleCameraCheck() の処理を変更し、新たにresolveCameraCheck()、rejectCameraCheck() を追加します:

App.vue

    async handleCameraCheck() {
      this.currentTestSuite = "3";

      this.sendStream && this.sendStream.stop();
      this.sendStream && this.sendStream.close();
      this.sendStream = AgoraRtc.createStream({
        streamID: this.sendId,
        video: true,
        audio: true,
        screen: false
      });
      this.sendStream.setVideoProfile("720p_2");
      this.sendStream.init(
        () => {
          this.sendStream.play("local_view");
        }
      );

    },

    resolveCameraCheck() {
      let testSuite = this.testSuites[this.currentTestSuite];
      testSuite.extra = this.t('camera_works_well');

      this.handleConnectivityCheck();
    },

    rejectCameraCheck() {
      let testSuite = this.testSuites[this.currentTestSuite];
      testSuite.notError = false;
      testSuite.extra = this.t("camera_wrong");

      this.handleConnectivityCheck();
    },

スタイルシートを追加します。

App.vue


...

.video-placeholder {
  width: 360px;
  height: 240px;
  background-color: black;
  border: rgb(0, 0, 0) 2px solid;
}
</style>

言語ファイルを更新します。
※ サンプルは英語・中国語の言語セットがありますが、今回は前者のみの更新とします

en.js

  'camera': 'Camera', 
  'camera_check': 'Camera Check', 
  'camera_check_desc': 'Make sure if you can see yourself captured from your camera.', 
  'camera_works_well': 'Camera works well', 
  'camera_wrong': 'Something is wrong with the camera',