Zoom Video SDK を試してみよう（初心者向け）

以前も何度か記事化されていますが、今回は最もシンプルな形で Zoom Video SDK を体験してみよう、ということで再投稿してみます。今日のゴールは、Video SDK を使って 1 to 1 のビデオチャットを実現する、というものになります。

最終的なイメージとしてはこちら。
![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/78052a78-20c7-b689-53f8-229cbb025203.png)

そして、Githubのリンクはこちらになります。

https://github.com/bitzed/vsdkBasic

## はじめに
Video SDKの説明ですが、これは Zoom の「繋がりやすく、切れにくい」安定した通信品質のバックボーンをそのまま活用しつつ、画面のUIを自由にカスタマイズできるツールとなります。

UIはお客様にて自由に構築いただくことができるため、たとえばライブショッピングだったりソーシャルチャットだったり、あるいはゲームの共同プレイ配信など、特定の用途に向けて画面構成を最適化させつつ、バックボーンは信頼性の高いZoomのネットワークを活用する、といったことが実現できます。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/9cd1fcea-3463-5736-48da-8cb53e4b43f6.png)


今後ご紹介していきますが、単純な映像音声コミュニケーションのSDKというだけでなく、Zoom ならではの連携機能も多数ありますので、ぜひお試しいただければと思います。

## 事前準備
まず最初に、Video SDKを利用するための専用アカウントを作ります。このアカウントは、通常Zoomを利用する際に使っているアカウントとは必ず分けてください。通常のZoomアカウントとVideo SDKのアカウントは共存できないためです。

https://explore.zoom.us/en/video-sdk/

こちらの画面にて、 Buy Now ボタンをクリックするとログイン画面が表示されます。（Zoomにログイン済みの場合は、ログアウトを促すダイアログが表示されます）
![Screenshot 2023-08-10 at 16.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/ce855518-c129-5346-18b5-94e542a3640c.png)

こちらの画面にてプランやオプションなどを選択いただき、アカウント作成を進めていきます。（Pay As You Goプランは、使った分だけの従量課金ですが、月間10,000分の利用までは無料なので、ご安心ください！）
![Screenshot 2023-08-10 at 16.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/80df4868-83b0-364b-ae7a-2032a25d2a86.png)
## SDK Key/Secretの発行
事前準備にてアカウントの発行が完了しましたら、早速SDKの利用に進みましょう。先ほど作ったアカウントにて Zoom Marketplace にログインします。
![Screenshot 2023-08-10 at 16.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/eda1bcba-43f0-c095-2f32-6fba2160edee.png)

すると、Developメニューに Build Video SDKというメニューが出現します。
![Screenshot 2023-08-10 at 16.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/a72c6cc3-a69f-ee94-f7b2-7ccc1460322d.png)

これをクリックし、「App Name」、「Name」、「Email address」を入力します。

:::note warn
Video SDKに関わる重要な周知事項が発生した際には、Zoomから登録された「Email address」へメールで連絡が届くことになります。必ず存在するアドレスを入力ください。
:::

![スクリーンショット 2022-04-30 11.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/fc3df77e-142f-37dd-5ed4-aae233c2fb7e.png)


画面をスクロールダウンすると「Download」項目が現れます。各OS、SDKのバージョンごとに「Download」ボタンからサンプルの取得ができます。通常はここからダウンロードして試していただくことになりますが、今回はスキップしていただいてかまいません。
![スクリーンショット 2022-04-30 10.02.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/260127d6-dcee-4bbf-5e97-f8fb38b98805.png)

さらにスクロールダウンすると、SDK credentialsという項目が表示されます。
![スクリーンショット 2022-04-30 10.04.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/de788785-90df-1d50-7f64-617610d8d23e.png)

| Key/Secret | 説明 |
|:--|:--|
|SDK Key/Secret | SDKの起動や通話接続を確立するために必要です。|
|API Key/Secret | インフラ側へのAPIリクエストの際の認証トークンを生成する際に必要です。|


ここで、SDK KeyとSDK Secretを手元に控えておいてください。

## 実際に試す

https://github.com/bitzed/vsdkBasic

必要なKeyとSecretを取得できたところで、実際に試してみましょう。

まずは実際にターミナル（Windowsの場合は [この辺り](https://prog-8.com/docs/git-env-win) を参照いただくと良いかもしれません）で以下コマンドを叩いてローカルにファイルを準備します。ダウンロード先はお好みで変更してください。。

```
cd ~/Desktop/
git clone https://github.com/bitzed/vsdkBasic
```

ダウンロードされたら、まずはディレクトリトップに `.env` ファイルを作成します。ファイルの中身はこのような形で記載します。

```
ZOOM_SDK_KEY="YOUR VIDEO SDK KEY"
ZOOM_SDK_SECRET="YOUR VIDEO SDK SECRET"

```
記載したら保存します。この時点でディレクトリ構成は以下のようになっているはずです。

```
.
├── .env
├── index.js
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── index.js
└── README
```
ここまできたら、最後に以下のコマンドを叩いて必要なパッケージをインストールします。

```
npm install
```
もしNPMコマンドが未インストールの場合は、[この辺り](https://qiita.com/non0311/items/664cf74d9ff4bad9cf46)か[この辺り](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)を参考にしてインストールしてください。

インストールに成功すると、`package-lock.json` というファイルと `node_modules` というディレクトリが生成され、このような構成になるはずです。

```
.
├── .env
├── node_modules
│   ├── ...(たくさんのフォルダとファイル)
├── index.js
├── package.json
├── package-lock.json
├── public
│   ├── index.html
│   └── js
│       └── index.js
└── README
```

準備が完了したら、

```
node index.js
```

これで起動します。その後は、

```
http://localhost:3010
```
にブラウザでアクセスすると画面が表示されます。注意いただきたい点としては、ローカルで起動する場合はCORSの問題が発生するため、テストのためにこれを回避する必要があります。いくつかの方法があるのですが、この拡張機能を利用するのが良いかなと思います。

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/

インストール後、赤枠内をクリックするとOnになります。（終了後にオフにしてください）
![Screenshot 2023-08-10 at 10.48.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/4d3f533f-c369-4e71-de4a-0c55a660d12c.png)
準備できたら、 `Join(Start) the Session` をクリックしてJoinします。もう1つ別のブラウザなどからJoinしていただき、お互いの映像音声が正しく届いたら成功です。
![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/8d89ef22-f001-1a17-2860-c0c93863a7b5.png)

次回は、録画機能をご紹介したいと思います。（ライブ配信スタイルは次々回に！💦）