こんにちは、中野渡です。
Amazon Chime SDKを使用したWebミーティングの基本的な実装を試したので説明していきます。
バックエンドはTypescriptでフロントエンドはNuxtを使用しました。
デモのソースを参考にしているので一部同じ部分があります。
バックエンド側の準備
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会議システムの開発ができると思います。
株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。
詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。
