Video SDK UI Toolkit を試してみた

# Video SDK UI Toolkit
Zoom の Developer Blog で Video SDK 版の UI Toolkit の紹介がされていました。

https://developers.zoom.us/blog/videosdk-ui-toolkits/

まだ触ったことがなかったので、試してみました。

## どんなもの

> Zoom Video UI Toolkitを使用すると、わずか数行のコードでiOS、Android、またはWebアプリにカスタムビデオ体験を埋め込むことができます。これにより、ビデオチャット体験の実装に必要な開発工数を削減し、ビデオ、オーディオ、チャット、設定、スクリーンシェアなどの機能を有効または無効にすることで、体験をカスタマイズすることができます。

とのことで、以前にまして実装コストが下がったようです。しかも、

> - ライブポッドキャストで音声を楽しみたい場合 → audio feature
> - 遠隔医療やセラピーセッションのためにビデオとオーディオが必要な場合 → audio and video
> - 文書レビューのために画面共有と音声が必要な場合 → screen share and audio


```javascript
var config = {
   videoSDKJWT: 'TOKEN',
   sessionName: 'SessionA',
   userName: 'UserA',
   sessionPasscode: 'abc123',
   features: ['video', 'audio', 'share', 'chat', 'users', 'settings']
}
```

え、これ features で指定するだけで必要な機能を指定できるってこと？本当にこれだけならとても便利かもしれません。

## やってみた
本当にこんなに簡単に始められるのか、ちょっと試してみることにしました。

### 必要なもの① : アカウント
まずはアカウントが必要です。ここは当たり前ですが以前から変わらず、こちらの記事の事前準備セクションを参照してください。繰り返しになりますが月間10,000分の利用までは無料です。

https://qiita.com/michitakasugi/items/7f3dc8954f5c92ea878f#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99

### 必要なもの② : Token生成
ここも以前とほぼ変わりませんが、Githubによると新しい Auth Endpoint Sample が公開されていて、内容が簡素化されていたのでこちらを使います。

https://github.com/zoom/videosdk-auth-endpoint-sample

以前と違い、必須属性がわかりやすく簡素化されていて、かつ立ち上げがとても簡単に見えます。sessionNameとroleが必須、それ以外はOptional。 `npm install` して、 `.env` を先のアカウントのページから取得した SDK Key と Secret に置き換えたら、`npm run start` で立ち上がります。（必要に応じて `src/index.js` の PORT を書き換えてもOK）

 POST で正しく signature を返してくれるかどうか、curl などで確かめておくと良いかもしれません。

 ```bash
  curl -X POST localhost:4000 -H "Content-Type: application/json" -d '{"sessionName":"test", "role":"1"}'
  ```

正しく `{"signature":"xxx"}` が帰ってくれば大丈夫だと思います。

### 必要なもの③ : UI Toolkit
ようやく本丸です。ブログからリンクしているこちらの記事を見ると

https://github.com/zoom/videosdk-ui-toolkit-javascript-sample?tab=readme-ov-file

めちゃ簡単そうに書いてます。本当かな。。

```bash
git clone https://github.com/zoom/videosdk-ui-toolkit-javascript-sample.git
```

したら...ん、`index.js` の `authEndpoint` を②のURLに書き換えるだけ？しかも、 signature 取得の部分などを除くと、実際に Session に Join するために必要なコードって
```javascript
var config = {
    videoSDKJWT: '',
    sessionName: 'test',
    userName: 'JavaScript',
    sessionPasscode: '123',
    features: ['video', 'audio', 'settings', 'users', 'chat', 'share']
};
uitoolkit.joinSession(sessionContainer, config)
```
これだけみたいです。

実際、やってみました。

## おお、動く
![Screenshot 2024-05-02 at 16.35.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/baf8c3b1-fee5-1932-97a3-848bea437050.png)

こんなにシンプルに動くとはびっくりです。この UI Toolkit というのは、ローコード、ローカスタムで動くものが欲しい時や、いわゆる PoC として使ってみたい、というときにはとても便利かもしれません。

もし、より UI の作り込みにこだわりたい、あるいは自社サービスの一部に組み込んで使いたい、といった場合には [Video SDK](https://developers.zoom.us/docs/video-sdk/) を活用してオリジナルのサービスを開発することもできると思います。まずは試してみよう、という方はぜひこちらの UI Toolkit から試してみてはいかがでしょうか。

## おまけ
もしサーバに置いて試したい方は、

https://github.com/zoom/videosdk-ui-toolkit-javascript-sample/blob/main/scripts.js

このコードのL19から始まる

```javascript
    fetch(authEndpoint, {
        method: 'POST',
        body: JSON.stringify({
            sessionName:  config.sessionName,
            role: role,
        })
```
この部分に、`headers: {'Content-Type': 'application/json'},` 足してあげて、

```javascript
    fetch(authEndpoint, {
        method: 'POST',
        headers: {'Content-Type': 'application/json',},
        body: JSON.stringify({
            sessionName:  config.sessionName,
            role: role,
        })
```
としてあげると良いかもしれません。正しくPOSTできなかったようなので。

以上