【Amazon Chime SDK】Chime SDKのサンプルを触ってみる

# はじめに

ひょんなことから [Amazon Chime](https://aws.amazon.com/jp/chime/) を使う機会を得たので、備忘録を残しておこうと筆を取りました。

# 本編

:chipmunk:・:chipmunk:・:chipmunk: 

## そもそもChimeって何？

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

## Reactに組み込むには？

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

![スクリーンショット 2024-12-01 14.40.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252036/65c37754-38ec-703b-41d4-1f3df9d831c7.png)

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

この際、Chimeとのやり取りを簡略化してくれるのが Chime SDK になります。
また、React用にコンポーネントやhooks・providerなどが公式から [amazon-chime-sdk-component-library-react](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/introduction--page) として提供されており、こちらを利用することで更に容易な構築が可能です。

## 実際に動かしてみる

公式が用意してくれている [サンプル](https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/README.MD#to-run-the-demo-app-locally) を動かしてみます。


最初に、[amazon-chime-sdk](https://github.com/aws-samples/amazon-chime-sdk?tab=readme-ov-file) をcloneしてきます。

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

```
cd apps/meeting
```

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

※事前に [AWS CLIの設定](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) が必要です

```
npm install && npm start
```

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

![スクリーンショット 2024-12-01 15.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252036/c87168a2-0912-1657-adb9-57c239cac1ed.png)

![スクリーンショット 2024-12-01 15.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252036/82787739-b91b-bda4-b55b-0f37776324da.png)

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

## 処理の概要

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

```tsx
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>,
);
```

```tsx
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>
  );
};
```

# おわりに

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

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