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

<!-- 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: [
      ...
      {
        id: "3",
        label: "camera",
        notError: true,
        extra: ""
      },
      ...
    ],
    ...

    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();
    },

...

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

  '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',