Amazon Chime SDK を用いて 音声通話機能をアプリに組み込む

Izumo Developers' Guild #1 登壇資料

Transcript

1. Amazon Chime SDK を用いて 音声通話機能をアプリに組み込む 株式会社ヌーラボ　伊藤 浩平 Izumo Developers' Guild #1 (2024.9.28)
2. 自己紹介 • 名前 伊藤 浩平 • 所属 株式会社ヌーラボ　サービス開発部 • 業務でやっていること - プロジェクト管理ツール Backlog の Git ホスティング機能の開発 - ビジネスチャットツール Typetalk の保守/運用 • その他 - 島根県出雲市出身 - 子二人
3. Amazon Chime SDK について • Amazon Chime SDK について - Amazon Chime の機能を部分的にアプリへ組み込むためのライブラリ - Amazon Chime と同じ通信基盤を利用できるため、信頼性が担保できる • できること - PSTN Audio - SIP Trunking - メッセージング - Web RTCとライブ文字起こし - PSTN Audio 付き WebRTC
4. Amazon Chime SDK について • ChimeSDKの公式デモアプリを使っている様子 　 S3、Amazon Transcribe(文字起こし)、Amazon Translate（翻訳）といった他の サービスを組み合わせることで機能が拡張できる
5. Amazon Chime SDKをアプリへ組み込む ⚫技術検証でチャットツールに音声通話機能を追加したので紹介 - 本機能は社内のβ環境でのみ利用可 とりあえずデモ見せマス 画像生成プロンプト ”デモがあると嬉しいおじさん ”
6. システム構成（後ほど説明します）
7. 処理の流れ （後ほど説明します）
8. 1. 音声通話を実施する 2. 会議の状態変更をアプリへリアルタイムに伝える 1-①. 最寄りの Media Region を取得する 1-②. Chimeへ会議データを作成（登録） 1-③. Chimeへ会議に紐づく出席者を作成（登録） 1-④. WebRTC Session を開始/切断する 1-⑤. 会議から出席者を削除する 以下に沿って各処理を説明します。
9. 1. 音声通話を実施する 2. 会議の状態変更をアプリへリアルタイムに伝える 1-①. 最寄りの Media Region を取得する 1-②. Chimeへ会議データを作成（登録） 1-③. Chimeへ会議に紐づく出席者を作成（登録） 1-④. WebRTC Session を開始/切断する 1-⑤. 会議から出席者を削除する 以下に沿って各処理を説明します。
10. 1-① 最寄りの Media Region を取得する - フロントエンドから以下の公開APIを叩き、利用 者にとって最寄りのAWSリージョンを取得する ＜Media Regionとは＞ Amazon Chime SDKがメディアデータを処理および転送するための 物理的なAWSリージョン - 利用者に地理的に近いメディアリージョンを指定することで、音 声やビデオ会議を行う際に、データの転送レイテンシを最小化 し、通信の品質を向上させる - 指定可能なリージョンは限定される https://nearest-media-region.l.chime.aws/ 1. 音声通話を実施する
11. 1-② Chimeへ会議データを作成（登録） - CreateMeeting API を呼ぶ - リクエスト - ClientRequestToken: - 一意のリクエスト識別子 - 各リクエストは異なる値を持つ必要あり - MediaRegion - 手順1-①で取得した値 - レスポンス - MeetingId - Chime で発行される 一意の会議ID 参考） Amazon Chime SDK API Reference - CreateMeeting 1. 音声通話を実施する
12. 1-③ Chimeへ会議に紐づく出席者を作成（登録） - CreateAttendee API を呼ぶ - リクエスト - MeetingId - 手順①-2で取得した値 - レスポンス - AttendeeId - Chime で発行される 参加者の一意の識別 子 - JoinToken - 参加者が会議に参加するためのトークン。ク ライアントアプリケーションで会議へのアクセ スを認証するために使用されます。 参考）Amazon Chime SDK API Reference - CreateAttendee 1. 音声通話を実施する
13. 1-④ WebRTC Session を開始する - ChimeSDKのライブラリの作法に従えば簡単に セッションを開始できる （具体的な実装は割愛します。気になる方は参考のドキュメ ントを見てみてください。） - ざっとした流れ - これまでに取得したデータをもとに MeetingSessionConfigurationを作成 - 入出力デバイス（マイク /スピーカー）と接続 - Meeetingセッションの開始 1. 音声通話を実施する 参考）amazon-chime-sdk-js APIOverview
14. 1-⑤ 会議から出席者を削除する - DeleteAttendee API を呼ぶ - Request Syntax - DELETE /meetings/MeetingId/attendees/AttendeeId HTTP/1.1 - URI Request Parameters - MeetingId : - 手順②で取得したID - AttendeeId: - 手順③で取得したID 1. 音声通話を実施する 参考）Amazon Chime SDK API Reference - DeleteAttendee
15. 1-⑤ 会議から出席者を削除する - DeleteAttendee API を呼ぶ - Request Syntax - DELETE /meetings/MeetingId/attendees/AttendeeId HTTP/1.1 - URI Request Parameters - MeetingId : - 手順②で取得したID - AttendeeId: - 手順③で取得したID 会議が24時間非アクティブであればChime側で自動的に削 除される （DeleteMeeting APIを呼べば会議の削除もできますが、今回は すぐに削除する必要もないため呼んでません） 1. 音声通話を実施する
16. Media Region Send media data ① Backend から ChimeSDKのAPIを叩き、　 会議・出席者の登録を行う ② ①で帰ったデータをもとに、 　 Frontend からWebRTC Session 　 を開始する 1. 音声通話を実施する
17. 1. 音声通話を実施する 2. 会議の状態変更をアプリへリアルタイムに伝える 1-①. 最寄りの Media Region を取得する 1-②. Chimeへ会議データを作成（登録） 1-③. Chimeへ会議に紐づく出席者を作成（登録） 1-④. WebRTC Session を開始/切断する 1-⑤. 会議から出席者を削除する 以下に沿って各処理を説明します。
18. 2. 会議の状態変更をアプリへリアルタイムに伝える Event Bridge に Chime イベントを捕捉するルールを 追加し、それをトリガーにRedisを更新 Redis の pub/sub+WebSocket で Frontend へ変更を伝播させシー ムレスに画面を更新する 今回はRedis使ってま すが、DynamoDB + DynamoDB Streams でやってもよさそうです
19. 会議への参加（AttendeeJoin）/ 退出（AttendeeLeft） のイベントを契機にデータの更新処理を実行 2. 会議の状態変更をアプリへリアルタイムに伝える
20. まとめ ”Amason ChimeSDK はいいぞ🎵” - アプリへリアルタイムコミュニケーション機能を 簡単に実装できる - Amazon Chime と同じ通信基盤を利用でき、信頼性が高い - AWS他サービスとの連携により機能の拡張性が高い