Amazon Chime SDK MeetingでLINE通話のようなアプリ間通話を実現してみた

はじめに

普段何気なく使っているLINE通話やZoomのようなビデオ通話アプリ。自分でも作ってみたいと思ったことはありませんか？

今回は、AWSが提供するAmazon Chime SDKを使って、localhost間でLINE通話のようなリアルタイム音声・ビデオ通話アプリを実装してみました。

完成イメージ

![デモ画面イメージ]

🎤 リアルタイム音声通話
📹 ビデオ通話
🖥️ 画面共有
👥 複数人での同時通話
🎛️ デバイス選択（マイク/カメラの切り替え）

技術スタック

フロントエンド

Next.js 14 (React 18)
TypeScript
Tailwind CSS
amazon-chime-sdk-js 👈 今回の主役

バックエンド

AWS Lambda (Node.js 20)
Amazon API Gateway
AWS Chime SDK Meetings
AWS CDK (Infrastructure as Code)

Amazon Chime SDK とは？

Amazon Chime SDKは、AWSが提供するリアルタイム通信のためのSDKです。

主な特徴：

✅ WebRTC技術をベースにした高品質な音声・ビデオ通話
✅ スケーラブルで安定したインフラ（AWSが管理）
✅ 画面共有、バーチャル背景などの機能も提供
✅ 使った分だけの従量課金（参加者1人あたり/分で課金）

類似サービスとしては、Twilio VideoやAgora.ioなどがありますが、AWSエコスystem内で完結できるのが大きな利点です。

アーキテクチャ

┌─────────────┐         ┌──────────────┐         ┌─────────────────┐
│  Browser A  │         │  API Gateway │         │  Chime Meeting  │
│  (Next.js)  │◄───────►│   + Lambda   │◄───────►│   (AWS Cloud)   │
└─────────────┘         └──────────────┘         └─────────────────┘
       ▲                                                    ▲
       │                                                    │
       └────────────────────────────────────────────────────┘
       ▲            WebRTC (音声・ビデオストリーム) 
       │
┌─────────────┐
│  Browser B  │
│  (Next.js)  │
└─────────────┘

通信フロー

Meeting作成: ユーザーAがAPI経由でMeetingを作成（1つのMeetingに対して1回のみ）
Attendee登録（ユーザーA）: ユーザーAが自分用のAttendeeを作成してJoinTokenを取得
Attendee登録（ユーザーB）: ユーザーBも同じMeetingに対して自分用のAttendeeを作成してJoinTokenを取得
WebRTC接続: 各ユーザーのChime SDK JSが、それぞれのJoinTokenを使ってAWS Chimeのメディアサーバーに接続
リアルタイム通信: AWS Chimeのメディアサーバーを経由して、各ブラウザ間で音声・ビデオストリームがやり取りされる

重要: Meetingは1つだけ作成し、参加者ごとに個別のAttendeeを作成する必要があります。

実装の核心部分

1. Meeting作成（Lambda）

const command = new CreateMeetingCommand({
  MediaRegion: 'us-east-1',
  ExternalMeetingId: `meeting-${Date.now()}`,
});

const response = await chimeClient.send(command);
// response.Meeting にMeetingIdなどが含まれる

CreateMeetingCommandを呼ぶだけで、AWSが自動的にメディアサーバーをセットアップしてくれます。

2. Attendee参加（Lambda）

重要: このエンドポイントは参加者ごとに1回ずつ呼ばれます。2人で通話する場合、このLambda関数は2回実行され、それぞれ異なるAttendeeIdとJoinTokenが発行されます。

const command = new CreateAttendeeCommand({
  MeetingId: meetingId,
  ExternalUserId: `user-${Date.now()}`,
});

const response = await chimeClient.send(command);
// response.Attendee に JoinToken が含まれる

ポイント: 1つのMeetingに対して、参加者の数だけAttendeeを作成する必要があります（例: 3人通話 = Meeting 1回 + Attendee 3回）

3. フロントエンドでの接続（amazon-chime-sdk-js）

ここが一番重要！ Chime SDK JSを使ってMeetingに接続します。

import { DefaultMeetingSession, MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

// 1. バックエンドから自分専用のAttendee情報を取得
//    ★ 各参加者が個別にAttendeeを作成
const response = await fetch(`${API_URL}/meetings/${meetingId}/attendees`, { ... });
const { meeting, attendee } = await response.json();

// 2. Meeting Sessionを作成
const configuration = new MeetingSessionConfiguration(meeting, attendee);
const meetingSession = new DefaultMeetingSession(configuration, logger, deviceController);

// 3. Meeting開始
const audioVideo = meetingSession.audioVideo;
audioVideo.start();

ポイント: MeetingSessionConfigurationにmeetingとattendeeを渡すだけで、SDKが自動的にWebRTC接続を確立してくれます。各参加者は同じMeetingIdに対して異なるAttendeeIdとJoinTokenを持ちます。

4. ビデオタイルの表示

ビデオストリームを表示するには、Video Tile Observerを登録します。

const observer = {
  videoTileDidUpdate: (tileState: VideoTileState) => {
    // ビデオストリームを<video>要素にバインド
    audioVideo.bindVideoElement(tileState.tileId!, videoElement);
  },
  videoTileWasRemoved: (tileId: number) => {
    // タイル削除時の処理
  },
};

audioVideo.addObserver(observer);

ポイント:

videoTileDidUpdateで新しいビデオストリームを<video>要素にバインド
tileState.localTileで自分のビデオかリモートのビデオかを判定
TileIdごとに異なる<video>要素を用意する必要がある（複数参加者対応）

5. 音声・ビデオのON/OFF制御

// 音声
audioVideo.realtimeMuteLocalAudio();    // ミュート
audioVideo.realtimeUnmuteLocalAudio();  // ミュート解除

// ビデオ
audioVideo.startLocalVideoTile();  // ON
audioVideo.stopLocalVideoTile();   // OFF

6. 画面共有の実装

// 画面共有
await audioVideo.startContentShareFromScreenCapture();  // 開始
await audioVideo.stopContentShare();                     // 停止

startContentShareFromScreenCapture()を呼ぶだけで、ブラウザの画面共有APIが自動的に起動します。

動作確認

ローカル環境での確認方法

2つのブラウザタブを開く
- タブA: http://localhost:3000
- タブB: http://localhost:3000
タブAでMeeting作成＆参加
- 「Meetingを作成して参加」ボタンをクリック
- Meeting IDをコピー
- この時点でタブA用のAttendee（AttendeeId: xxx-001）が作成される
タブBでMeeting参加
- Meeting IDを入力して「参加」ボタンをクリック
- この時点でタブB用の別のAttendee（AttendeeId: xxx-002）が作成される
通話開始！
- タブAとタブBで、お互いのビデオが表示される
- 音声・ビデオのON/OFFを試す
- 画面共有を試す

補足: 同じMeetingIdに対して、タブAとタブBでそれぞれ異なるAttendeeが作成されることで、2人の通話が成立します。

所感

Amazon Chime SDK Meetingを使ってみて、思った以上に簡単にビデオ通話アプリが作れることに驚きました。

良かった点

✅ WebRTCの複雑な設定を意識しなくて良い
✅ インフラの管理が不要（AWSが全部やってくれる）
✅ APIがシンプルで直感的
✅ ドキュメントが充実している

改善の余地がある点

❌ 料金が従量課金（予算管理が必要）
❌ カスタマイズ性はTwilio等に劣る
❌ 日本語の情報がまだ少ない

まとめ

Amazon Chime SDKを使えば、わずか数時間でLINE通話のようなリアルタイム通話アプリが作れます。

こんな人におすすめと感じました:

オンライン診察システムを作りたい医療系スタートアップ
社内会議システムを独自開発したい企業
ビデオ通話機能をサービスに組み込みたいエンジニア

今回のコードは全てGitHubで公開しています（リンク）。ぜひ試してみてください！

参考リンク

Amazon Chime SDK 公式ドキュメント