はじめに

ひょんなことから Amazon Chime を使う機会を得たので、備忘録を残しておこうと筆を取りました。

本編

・・

そもそもChimeって何？

Amazon Chime はざっくり言えばMTGをするためのサービスです。
これ単品でも使えるのですが、Amazon Chime SDK を使うことで、MTG機能（ビデオ通話や画面共有など）を自前のアプリに組み込むことができます。

Reactに組み込むには？

ざっくりと構成を図にしてみると以下のようになります。

ユーザーは参加者情報（参加者名やMTGのID）を入力し、それを元にバックエンド側でChimeとの接続情報（websoketのエンドポイントなど）を発行します。
それを使ってMTGに参加することで、他の参加者と会話や画面共有が可能になるといった寸法です。

この際、Chimeとのやり取りを簡略化してくれるのが Chime SDK になります。
また、React用にコンポーネントやhooks・providerなどが公式から amazon-chime-sdk-component-library-react として提供されており、こちらを利用することで更に容易な構築が可能です。

実際に動かしてみる

公式が用意してくれているサンプルを動かしてみます。

最初に、amazon-chime-sdk をcloneしてきます。

cloneしたら apps/meeting を開きます。これがReact用のサンプルになります。

cd apps/meeting

後はローカルで起動するだけです。

※事前に AWS CLIの設定が必要です

npm install && npm start

https://0.0.0.0:9000/ にアクセスします。

一人二役ですが無事にMTGできていますね。
それにしてもサンプル作り込まれすぎでは…？なぜかテキストチャットまで付いてるし（？？？）

処理の概要

サンプルの実装はとても複雑化しているため、重要な箇所だけをピックアップしてみました（ほぼ疑似コードです）

import { ThemeProvider } from 'styled-components';
import {
  MeetingProvider,
  lightTheme,
  GlobalStyles,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <ThemeProvider theme={lightTheme}>
    <GlobalStyles />
    {/*
    * MTGに必要な情報はほとんどが MeetingManager なるものが管理してくれるようになっています
    * このProviderは MeetingManager インスタンスを提供するためのものです
    */}
    <MeetingProvider>
      <Meeting />
    </MeetingProvider>
  </ThemeProvider>
);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <App />
    </Suspense>
  </StrictMode>,
);

import { useMeetingManager, Grid } from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    const body = {
      // title と書かれていますが、これが meetingID です
      title: 'test',
      // 参加者名
      attendeeName: 'test',
      region: 'ap-northeast-1',
    };

    // バックエンドで接続情報を発行するだけで、まだMTGには参加できていません（ネーミングがややこしい）
    const res = await fetch('/join', {
      method: 'POST',
       headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });

    const data = await res.json();

    if (data.error) {
      throw new Error(`Server error: ${data.error}`);
    }
  
    const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);

    // join していますが、まだまだMTGに参加できていません（ネーミングがややこしい）
    await meetingManager.join(meetingSessionConfiguration);

    // start することで、ようやくMTGに参加することができます（ネーミng...
    await meetingManager.start();
  };

  return (
    <div>
      <button onClick={joinMeeting}>Join</button>
      <Grid>
        {// これがビデオを表示するコンポーネントです}
        <VideoTileGrid
          noRemoteVideoView={<div>まだ他の参加者がいません</div>}
        />
      </Grid>
    </div>
  );
};

おわりに

もうあの人（公式サンプル）一人で良くないですか？

冗談はさておき、Chime SDKは純粋なMTGアプリの自前開発に利用するのではなく、やはり何かしらのアプリのコミュニケーション機能として組み込む（例えばslackにおけるハドルのように）のが順当な使い方であるという教訓を得ました。