Zoom Client SDK の Web SDK を試す

この記事は、Zoom Client SDK の Web SDK を試してみた手順のメモです。

●Introduction - Client SDKs
　https://marketplace.zoom.us/docs/sdk/native-sdks/introduction
●Web - Client SDKs - Zoom Software Development Kit (Zoom SDK) - Zoom Developer - Technical Documentation and Reference
　https://marketplace.zoom.us/docs/sdk/native-sdks/web

## Zoom Client SDK の Web SDK の概要
公式ページの記載を引用して見てみます。

> The Web SDK enables the development of video applications powered by Zoom’s core framework inside an HTML5 web client through a highly optimized WebAssembly module.
> As an extension of the Zoom browser client, this SDK is intended for implementations where the end user has a low-bandwidth environment, is behind a network firewall, or has restrictions on their machine which would prevent them from installing the Zoom Desktop or Mobile Clients.
> 
> 引用元： [公式ドキュメント](https://marketplace.zoom.us/docs/sdk/native-sdks/web)より

説明はいろいろと書いていますが、この SDK を使うと、ブラウザ上で Zoomクライアントを立ち上げることができるもののようです。

## Web SDK をとりあえず試す
公式ドキュメントの「Quick install」を見ると、以下手順でサクッと試せるようです。

### パッケージのインストール

まずは、任意のディレクトリでパッケージのインストールを行います。
この手順を試す時、最初は Node.js のバージョンを 12 にしていて途中の手順でエラーが出ました。その後、バージョンを 14 にして試してエラーが出なくなったので、補足しておきます。

```bash
npm i @zoomus/websdk
```

### 2つのキーの取得について
公式ドキュメントによると Web SDK を使う際に API Key と Secret を取得する必要があるようです。

![事前準備についての記述.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/827628b3-3474-17af-d5fb-968dc182d6a3.png)

Zoom の[App Marketplace](https://marketplace.zoom.us/)にアクセスしてログインをし、画面右上の「Develop」のメニューから「Build App」を選択します。

![Zoomマーケットプレイス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fd3c61b7-10b5-77f0-68e8-3ea7ec245a24.png)

その後の手順については以下の記事などを参照して、JWT の「API Key」と「API Secret」の 2つを取得してください。以下は、Zoom API についての記事ですが、取得するキーは今回の Zoom SDK を用いる場合と同じでした。

●Zoom APIをPostmanで試す | ヤマムギ
　https://www.yamamanx.com/zoom-api-postman/

### サンプルアプリのソースの取得

そして、公式ドキュメントの [Sample Apps](https://marketplace.zoom.us/docs/sdk/native-sdks/web#sample-apps) の部分に書かれた以下の手順を進めていきます。

![サンプルアプリ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1e8d9ec0-984f-5bc0-c6eb-1b7cbc8de66c.png)

まずは最初の2つのコマンドを実行して、ソースを取得し、取得したソースのサブフォルダへと移動します。

```bash
git clone https://github.com/zoom/sample-app-web.git --branch master --depth 1
cd sample-app-web/Local
```

### サンプルアプリのソースの書きかえ（キーの設定）
ここで、取得したソースの中の一部を書きかえます。具体的には、先ほど準備した 2つのキーを設定します。

取得したソースの「Local」フォルダ内のさらに下に「js」フォルダがあり、その中に「index.js」というファイルがあります。ソースの取得元の情報でいうと、以下の URL の「[13行目](https://github.com/zoom/sample-app-web/blob/master/Local/js/index.js#L13)」と「[19行目](https://github.com/zoom/sample-app-web/blob/master/Local/js/index.js#L19)」です。

●sample-app-web/index.js at master · zoom/sample-app-web
　https://github.com/zoom/sample-app-web/blob/master/Local/js/index.js

具体的には以下の部分で、`const API_KEY = "YOUR_API_KEY";` の部分と `const API_SECRET = "YOUR_API_SECRET";` の部分の式の右側に、先ほど取得しておいたキーを設定します。

![キーの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7eb05018-53f7-4abb-feaf-fee17ca9c2ea.png)

それが完了したら、以下のコマンドを順次実行していきます。

```bash
npm install
npm run start
```

### ブラウザでミーティング設定画面を開く
上記のコマンドを入力すると、以下のような文字などが出力されます。

![コマンドの実行結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e9b8e4c8-6825-f1df-5a28-466e49268f18.png)

ローカルでポート番号「9999」でアクセスできる状態になったようです。
「0.0.0.0」や「localhost」にポート番号 9999 を指定して、ブラウザでアクセスしてみてください。

そうすると、以下の画面が表示されるので「Meeting Number」と「Meeting Password」のそれぞれに、参加したい Zoomミーティングの ID とパスワードを入力してください。
また、言語設定が「English」となっている部分は「Japanese 日本語」という選択肢があるので、プルダウンから選択して変更します。

![Zoom_WebSDKの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8a5b73fe-e3a5-a589-5a6a-15e70dbea06b.png)

その後、画面のメニュー右端にある「Join」ボタンを押しましょう。
そうすると、以下のように自分が用意したブラウザ上のアプリから Zoom ミーティングに参加できます。

この時、「Meeting Number」の数字の中に半角スペースが入るとうまくいかないようなので、ご注意ください。うまく接続できたら、別タブが開き、以下のように Zoomミーティングへ参加した際の画面が表示されます。

![ブラウザでZoom参加の画面へ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7ca9a5b4-fa57-a9a0-0d65-88b9a06ccb4c.png)

Zoomミーティングに入った後は、ブラウザ上の UI で画面共有の操作なども行うことができます。

## おわりに
今回の内容は単にブラウザ上でZoomミーティング へ参加しただけで、これだけだと、Zoom 標準のブラウザからのミーティング参加機能と同じですが、ソースコードに手を入れれば何らか拡張とかもできるかと思ってます。

詳細は確認できてないので、引き続き情報をチェックしてみようと思います。また、今回使った「Client SDK」以外の SDK（例えば、「Fully Customizable SDK」）も見てみようと思います。 

●Introduction - Client SDKs
　https://marketplace.zoom.us/docs/sdk/native-sdks/introduction
●Introduction - Fully Customizable SDKs
　https://marketplace.zoom.us/docs/sdk/custom/introduction