Beyond テレワーク | Web会議・テレビ会議(TV会議)ブイキューブ

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

  • WebRTC
  • Agora.io

概要

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

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

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

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

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


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



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

実装

今回変更を加えるのは

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

の 2 ファイルのみです。

先ずは App.vue を開き <!-- resolution check --> 以下のブロックが定義している 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', 

確認画面

試しに npm run dev してローカルで動作確認すると、チェック項目として自映像確認ができるようになっているかと思います。

Agora SDK イメージ
Agora SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

先頭へ戻る