Amazon Chime SDK JSをローカルHTMLで雑に動かす #AmazonChime

技術検証で Amazon Chime SDK を使い出したが、
APIも多く学び始めすぐ、0から動かすのに手間取った記憶がある。

そこで、Amazon Chime SDK に入門し公式サンプルプロジェクトを動かした後、
0から動かしてみるのに楽な最小構成を考えてみた。

大枠こんな感じ

MeetingSession 起動に必須パラメーターは AWS CLI で作る
ローカルサーバーとHTMLファイルだけで通話クライアントを起動する

何が美味しい？

ローカルサーバーで動くので各種クライアントAPIを試すのに便利

事前準備

AmazonChimeFullAccess許可済み AWS IAM + AWS CLI
この公式サンプルを参考に Amazon Chime SDK JS のminファイルを出力する
適当なローカルサーバーを用意する（http-server等）

使うHTML一枚

<html lang="ja">

<head>
    <script src="./scripts/amazon-chime-sdk.min.js"></script>
    <style>
        .main {
            display: flex;
            align-items: flex-start;
        }
        #video-tile {
            width:80%;
            display: flex;
            flex-wrap: wrap;
        }
        #video-tile video {
            width: 46%;
            height: auto;
            margin: 2%;
        }
    </style>
</head>

<body>
    <div class="main">
        <form action="/" method="get" id="meeting-params">
            <div>
                <label for="">Meeting JSON</label>
                <br>
                <textarea name="meeting" id="" cols="200" rows="16">
{
    "Meeting": {
        "MeetingId": "EXAMPLE",
        "MediaPlacement": {
            "AudioHostUrl": "",
            "AudioFallbackUrl": "",
            "ScreenDataUrl": "",
            "ScreenSharingUrl": "",
            "ScreenViewingUrl": "",
            "SignalingUrl": "",
            "TurnControlUrl": ""
        },
        "MediaRegion": ""
    }
}</textarea>
            </div>
            <div>
                <label for="">Attendee JSON</label>
                <br>
                <textarea name="attendee" id="" cols="200" rows="8">
{
    "Attendee": {
        "ExternalUserId": "EXAMPLE",
        "AttendeeId": "",
        "JoinToken": ""
    }
}</textarea>
            </div>
            <div>
                <button>Start Chime</button>
            </div>
        </form>

        <div id="video-tile">
            <video id="video-tile-self"></video>
        </div>
        <audio id="audio-view"></audio>
    </div>

</body>

<script>
    const params = (new URL(document.location)).searchParams;
    const params_meeting = params.get('meeting');
    const params_attendee = params.get('attendee');

    (async () => {
        if (!params_meeting) {
            return;
        }else{
            const p = document.getElementById('meeting-params');
            p.hidden = true;
        }

        const meeting = JSON.parse(params_meeting);
        const attendee = JSON.parse(params_attendee);

        const logger = new ChimeSDK.ConsoleLogger('ChimeMeetingLogs', ChimeSDK.LogLevel.ERROR);
        const deviceController = new ChimeSDK.DefaultDeviceController(logger);
        const configuration = new ChimeSDK.MeetingSessionConfiguration(meeting, attendee);
        const meetingSession = new ChimeSDK.DefaultMeetingSession(configuration, logger, deviceController);

        try {
            const audioInputs = await meetingSession.audioVideo.listAudioInputDevices();
            const audioOutputs = await meetingSession.audioVideo.listAudioOutputDevices();
            const videoInputs = await meetingSession.audioVideo.listVideoInputDevices();
            await meetingSession.audioVideo.chooseAudioInputDevice(audioInputs[0].deviceId);
            await meetingSession.audioVideo.chooseAudioOutputDevice(audioOutputs[0].deviceId);
            await meetingSession.audioVideo.chooseVideoInputDevice(videoInputs[0].deviceId);
        } catch (err) {
            // handle error - unable to acquire audio device perhaps due to permissions blocking
        }
        const audioOutputElement = document.getElementById('audio-view');
        meetingSession.audioVideo.bindAudioElement(audioOutputElement);

        const videoElementSelf = document.getElementById('video-tile-self');
        const videoElementTile = document.getElementById('video-tile');

        const observer = {
            videoTileDidUpdate: tileState => {
                if (!tileState.boundAttendeeId) {
                    return;
                }
                if (tileState.localTile){
                    meetingSession.audioVideo.bindVideoElement(tileState.tileId, videoElementSelf);
                }else{
                    if(!document.getElementById(tileState.tileId)){
                        const node = document.createElement("video");
                        node.id = tileState.tileId;
                        videoElementTile.appendChild(node);
                    }
                    const videoElementNew = document.getElementById(tileState.tileId);
                    meetingSession.audioVideo.bindVideoElement(tileState.tileId, videoElementNew);
                }
            },
            videoTileWasRemoved: tileId => {
                const videoElementRemoved = document.getElementById(tileId);
                videoElementRemoved.remove();
            }
        };

        meetingSession.audioVideo.addObserver(observer);
        meetingSession.audioVideo.startLocalVideoTile();
        meetingSession.audioVideo.start();
    })();
</script>

</html>

利用手順

ビルドした Amazon Chime SDK JS min ファイルを上記 HTML に読ませる
AWS CLI 経由で Chime ミーティングを作成する
- $ aws chime create-meeting
- $ aws chime create-attendee --meeting-id ($ aws chime create-meetingの返り値の MeetingId) --external-user-id (適当な参加者名）
ローカルサーバーを起動し、2で得たJSONを貼り付けてセッションスタート

このローカル起動クライアントでも、複数人参加ができる

接続先のセッションは「Amazon Chime メディア・サービス」がよしなに用意してくれるので、ローカルにあるクライアント同士でも1on1ができる

複数人参加の手順

meeting JSON パラメーターを共有し入力
attendee JSON パラーメーターは参加者の数だけ個別に作り入力