Amazon Chime SDKを試してみた

2020-08-31
中野渡 卓也
#
Amazon Chime
#
#

こんにちは、中野渡です。  

Amazon Chime SDKを使用したWebミーティングの基本的な実装を試したので説明していきます。
バックエンドはTypescriptでフロントエンドはNuxtを使用しました。
デモのソースを参考にしているので一部同じ部分があります。

バックエンド側の準備

aws-sdkをインストールしておきます。

npm install aws-sdk

バックエンドの処理

1.ミーティングの作成

コンストラクタでregionとendpointを設定します。
createMeetingでミーティングの作成ができます。ClientRequestTokenはユニークな値、MediaRegionは東京リージョンにします。  

メディアリージョンとコンストラクタのリージョンをどちらも東京リージョンにするとエラーが出て同じにすることはできませんでした。  

import { Chime } from 'aws-sdk';

const region = 'ap-northeast-1';

const chime = new Chime({
  region: 'us-east-1',
  endpoint: 'service.chime.aws.amazon.com'
});

const { Meeting } = await chime.createMeeting({
  ClientRequestToken: Date.now().toString(),
  MediaRegion: region
}).promise();

2.参加者の作成

createAttendeeで参加者の追加を行います。
一人目の参加者はcreateMeeting時に発行されるMeetingIdを使用します。二人目以降の場合はcreateMeetingは行わず、一人目と同じMeetingIdを設定します。

const { Attendee } = await chime.createAttendee({
  MeetingId: Meeting.MeetingId,
  ExternalUserId: Date.now().toString()
}).promise()

ミーティングの作成と参加者の作成が終わったらMeetingとAttendeeをフロント側に渡します。

フロント側の準備

amazon-chime-sdk-jsをインストールしておきます。

npm install amazon-chime-sdk-js

フロントエンドの処理

1.ミーティングセッションの作成

バックエンドからMeetingとAttendeeを受け取り、MeeTingSessionConfigurationに設定します。
そのMeetingSessionConfigurationを使用してDefaultMeetingSessionを作成します。
LogLevelはDEBUGだと大量のログが出るので必要に応じてINFOやERRORにします。  

import {
  ConsoleLogger,
  DefaultDeviceController,
  DefaultMeetingSession,
  LogLevel,
  MeetingSessionConfiguration,
} from 'amazon-chime-sdk-js'

const response = await this.$axios.$get(createMeetingUrl)
const logger = new ConsoleLogger('ChimeMeetingLogs', LogLevel.DEBUG);
const deviceController = new DefaultDeviceController(logger);

const configuration = new MeetingSessionConfiguration(response.meeting, response.attendee);
this.meetingSession = new DefaultMeetingSession(configuration, logger, deviceController);

2.デバイスの設定

マイク、カメラ、スピーカーの設定をします。環境によってはスピーカーの設定が無い場合があります。

const audioInputs = await this.meetingSession.audioVideo.listAudioInputDevices();
const audioOutputDevices = await this.meetingSession.audioVideo.listAudioOutputDevices();
const videoInputDevices = await this.meetingSession.audioVideo.listVideoInputDevices();

await this.meetingSession.audioVideo.chooseAudioInputDevice(audioInputs[0].deviceId);
if (audioOutputDevices.length > 0) {
  await this.meetingSession.audioVideo.chooseAudioOutputDevice(audioOutputDevices[0].deviceId);
}
await this.meetingSession.audioVideo.chooseVideoInputDevice(videoInputDevices[0].deviceId);

3.Observerの設定

observerで発火するイベントはいろいろありますが、videoTileDidUpdateは自分のビデオが開始した時や、参加者のビデオが開始した時などのタイミングで発火します。
空いているvideo要素にtileStateに設定されているtileIdをバインドします。
acquireTileIndexはデモと同じことをしています。

const observer = {
  videoTileDidUpdate: tileState => {
    if (!tileState.boundAttendeeId) {
      return;
    }
    const tileIndex = tileState.localTile
      ? 16
      : this.acquireTileIndex(tileState.tileId);
    const videoElement = document.getElementById('video-' + tileIndex);
    this.meetingSession.audioVideo.bindVideoElement(tileState.tileId, videoElement);
  }
}

this.meetingSession.audioVideo.addObserver(observer);
this.meetingSession.audioVideo.addContentShareObserver(observer);

4.ビデオの開始

startとstartLocalVideoTileすることでバインドしたvideo要素にカメラの映像が映ります。

this.meetingSession.audioVideo.start();
this.meetingSession.audioVideo.startLocalVideoTile();

バックエンドの処理続き

3.ミーティングの終了

Chime SDKの料金は高い(1分あたり0.0017 USD)ので開発中はこまめに終了することをオススメします。

await chime.deleteMeeting({
  MeetingId: Meeting.MeetingId,
}).promise();

さいごに

ここまでの処理が基本中の基本で、他には画面キャプチャを映したりチャットのようなメッセージのやりとりができます。
Amazon Chime SDKを突き詰めれば独自のWeb会議システムの開発ができると思います。  

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら