Fensi による Amazon Chime SDK を使った 1 on 1 トーク機能の実装方法

本投稿は株式会社 CAM とアマゾンウェブサービスジャパンのソリューションアーキテクト廣瀬による共同執筆です。

CAM および Fensi について

株式会社 CAM は、占い事業やアーティストファンビジネスを中心としたエンターテインメント事業およびプロダクトの開発・運営を行っています。 2019 年には、簡単に自身の公式サイトやファンクラブを開設することができるサービス Fensi を開始しています。Fensi では、記事・写真・動画などのコンテンツの投稿、ページの仕様やデザインのカスタマイズ、オリジナルグッズの販売機能やファンクラブとしてのオンラインサロン、やレッスンなどのクローズドコンテンツの販売が可能です。

2021 年 1 月には、この Fensi で 1 on 1 トーク機能をリリースしました。 1 on 1 トーク機能の根幹となるビデオ通話機能には Amazon Chime SDK を採用しています。本投稿では、Amazon Chime SDK を採用した背景とアーキテクチャ、幾つかのテクニックを紹介します。

1 on 1 トークとは

Fensi の 1 on 1 トークは、サイト開設者であるオーナーが、ファンに対して Fensi アプリ上で一対一のコミュニケーションを提供できるファンサービスのための機能です。オーナーは、「開始日時、 1 枠あたりのトーク時間、販売件数、販売価格」を決めて、従量販売コンテンツとして投稿することで 1 on 1 トークイベントを開催できます。ファンは投稿されたコンテンツを購入することで 1 on 1 トークに参加できます。

なぜ Amazon Chime SDK を採用したのか

一般的に、ビデオ通話機能を実装するためには、WebRTC のようなリアルタイム通信に特化したプロトコルを用いた映像・音声送受信の実装が必要です。また、 Fensi はモバイルファーストで開発しているため、 iOS と Android の両クライアントでの実装が求められていました。
Amazon Chime SDK はオンラインミーティング機能を実装するためのマネージドサービスです。Amazon Chime SDK では JavaScript, iOS, Android それぞれのプラットフォームに対応したフロントエンド向け SDK が用意されています。Amazon Chime SDK を使用することで自身のアプリケーションにビデオ通話機能を簡単に追加することができます。 Fensi において Amazon Chime SDK を採用した理由は以下です。

WebRTC などのビデオ通話に関するコアな部分の実装をせずに済むため、開発生産性の向上が期待できる
ビデオ通話、画面共有、ミュート、ノイズリダクション、チャットメッセージといった 1 on 1 トークに必要な機能が充実している
様々なユースケースと実装例が aws-samples 上に公開されている
料金体系が分かりやすく、かつ安価である (例: 30 分 x 3 ユーザー x 10 meetings x 30 日 = 45.9 USD / 月)
- ※ 2021 年 7 月執筆時点の料金体系での試算となります。詳細はこちらをご覧ください。

アーキテクチャ

Fensi では、Packaged Business Capabilities を基本概念においた積み上げ式の開発スタイルを目指しています。どのプロダクトにも類似する「月額料金を支払う」「会員登録をする」「会員に通知をする」などの機能を Fensi Platform として共通基盤として提供することで、各プロダクトはビジネスロジックの開発に集中することができます。今回の 1 on 1 トーク機能においても、 Amazon Chime SDK を基にした共通基盤として実装しました。その名は Sola です。

Sola では以下のフローで 1 on 1 トーク機能を提供します。

Fensi の AWS Batch が開始時刻の近い予約枠を監視して、 Sola に対して Chime Meeting 作成をリクエスト
録画を行うためのストリーム情報を取得するために、Sola から動画配信基盤 API にリクエスト
録画用のヘッドレスブラウザを起動するために Sola 上で AWS Fargate を起動
ヘッドレスブラウザから動画基盤に対して映像信号の送出を開始
ファンおよびオーナーが Fensi API に対して Chime Meeting 参加をリクエスト
Chime SDK でMeeting Session を作成

次の図は全体のアーキテクチャとフローを示したものです。

Fensi 1 on 1 トークの要件

Fensi の 1 on 1 トーク機能は、 1 回のイベントに対して複数のファン参加枠を作成できます。 Amazon Chime SDK の Meeting はファン参加枠毎に作成しています。オーナーは枠の予定開始時刻に合わせて Meeting に参加し、予定終了時刻になると自動的に退室となります。また、参加枠の間にはインターバルが設けられており、次の枠の予定開始時刻になると、次の Meeting に自動的に参加するように実装しています。

Fensi の 1 on 1 トーク機能を実装する際に何よりも重視していた点は、「安心安全に・簡単に・ストレスなく」利用できるユーザー体験の提供です。そのために取り入れた工夫の 3 点: 1) サーバサイド実装による入室制限とタイムラグ短縮, 2) 待機画面, 3) 監視録画について説明します。

サーバサイド実装による入室制限とタイムラグ短縮

Amazon Chime SDK for iOS および Android は、クライアントサイドで Chime Meeting の作成から参加まで完結させることができます。一方で、Fensi の 1 on 1 トークはクローズドなビデオ通話であるため、オーナーとファン以外のユーザーの参加を制限する必要があります。そのため、 Chime Meeting の作成や Attendee の追加作業はサーバサイドで行っています。クライアントは Fensi API に対して参加をリクエストし、それに応じて Fensi API は Chime Meeting の情報を返します。クライアントサイドは受け取った Chime Meeting の情報を利用して Meeting Session を作成し、 Amazon Chime SDK を介して音声、映像の送受信やカメラの切り替えなどを行います。つまり、Fensi では、いわゆる 2 Tier Architecture は採用せず、ビデオ通話のワークフローを管理するロジックをサーバサイドで実装しています。

また、ワークフロー管理をサーバサイドで処理させることで 1 on 1 トーク開始時のタイムラグの短縮も見込めます。1 on 1 トーク開始よりも前に Chime Meeting および関連するワークフローを処理しておくことで、オーナーとファンが実際に入室してトークを開始できるまでのタイムラグを削減できます。Chime Meeting の事前作成は、 AWS Batch を使用して予定開始時刻の迫った枠を監視し、条件に一致する枠が見つかった際に Sola に対して Chime Meeting の作成をリクエストするように実装しています。

待機画面

待機画面はファン参加枠の予定開始時刻 10 分前から入室できる機能です。待機中の自分の順番確認、カメラ写りの確認、開始時のカメラ方向の設定など、1 on 1 トークを開始するためのウェイティングルームのような位置づけの画面です。待機中の順番が直前か、 2 番目以降かでレイアウトを変えています。

待機画面では、自分の映像をどのように写すかを決めるために端末のカメラを起動して自分自身の映像を表示しています。待機画面の段階ではファンは Chime Meeting には参加していません。各画面でのカメラの状態 (オン / オフ、インカメラ / アウトカメラ) を保持しておき、実際の 1 on 1 トーク開始時にはカメラの状態を Chime SDK 上でも維持するようにできるように実装しています。
各プラットフォームごとの実装の詳細は CAM の Tech Blog で詳しく説明しています。iOS 編, Android 編をご覧ください。

監視録画機能

Fensi の 1 on 1 トーク機能では、次の観点から監視録画を導入しています。

お問い合わせ対応 : クライアントサイドの通信環境が悪くビデオ通話できなかった、予定開始時刻を過ぎてもオーナーが来なかったといったトラブルが生じた場合の原因調査や切り分けのため
利用される全てのお客様の保護: 一対一のクローズドなオンライン通話をすることに不安を感じるオーナー様への安心、および会話中のトラブルの抑止力のため

この監視録画機能は、ヘッドレスブラウザを Attendee として Chime Meeting に参加させ、キャプチャリングした映像音声ストリームを FFmpeg から Fensi Platform の動画基盤に送出することで実現しています。動画基盤側でライブトランスコーディングし、 HLS 形式で Amazon S3 に動画を保存しています。ヘッドレスブラウザの立ち上げには、起動までの時間が短く、かつ常時起動せずワンショットで利用できる AWS Fargate を採用しました。aws-samples に公開されている以下の実装を参考にしています。

録画される画面は、実際のネイティブアプリの iOS, Android の UI にあわせてヘッドレスブラウザの画角を 9 : 16 の 1080 x 1920 で起動しています。この録画画面にはオーナーとユーザーの画面があれば十分なため、 Browser Meeting Demo の画面を基にして最適化しました。また、オーナーの画面を背景にするために、Attendee に識別タイプタグを付与し、どちらの Attendee がオーナーかを判定できるようにしています。

なお、 2021/07/07 には Amazon Chime SDK のキャプチャ機能がリリースされました。映像、音声、画面共有内容を Amazon S3 上に保存できるようになりました。この新機能では、アクティブなスピーカーのストリームの他、個々のビデオストリームをそれぞれキャプチャすることもできます。新機能の詳細は What’s new およびブログをご参照ください。

まとめ

この投稿では Fensi の 1 on 1 機能を Amazon Chime SDK および AWS の各サービスを利用したアーキテクチャについて説明しました。Amazon Chime SDK を採用したことで本来ビデオ通話の実装に必要な WebRTC などのコア部分の開発をオフロードでき生産性を向上することができました。また、 Packaged business capabilities を意識して、 1 on 1 機能では Sola という内製の基盤サービスやマイクロサービスアーキテクチャを採用することで、積み上げ型で再利用可能なサービス開発をできるようにしました。

一方で、 1 on 1 トーク機能を実現するにあたり幾つかのチャレンジが必要でした。本投稿では「安心安全に・簡単に・ストレスなく」利用できるユーザー体験を提供するために Fensi が取り入れた 1) サーバサイド実装による入室制限とタイムラグ短縮、 2) 待機画面、 3) 監視録画、という 3 つのテクニックについて説明しました。
本投稿が世の中の Digital Transformation を進める多くの開発者にとって有益な情報となることを願います。

Reference

著者について

株式会社 CAM
執筆協力者: 髙木淳吾、庭木勝也、薄井裕樹、岡田徳貴、石川諒、石川雅之

占い事業やアーティストファンビジネスを中心としたエンターテインメント事業およびプロダクトの開発・運営を行っています。 2019 年には、簡単に自身の公式サイトやファンクラブを開設することができるサービス Fensi を開始しています。

アマゾンウェブサービスジャパン
ソリューションアーキテクト廣瀬太郎 (Taro HIROSE)

Web 系のお客様を担当するソリューションアーキテクトです。動画、特に OTT 配信に関するワークロードを得意にしています。最近は運動不足の解消がてら始めたランニングにハマっています。愛用アプリは Strava 、愛用シューズはNike Air Zoom Pegasus 38 、愛用インソールはカスタムバランスです。

Amazon Web Services ブログ