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

前回は、サンプルとして Zoom Video SDK の最もシンプルな活用事例として 1 to 1 のビデオチャットをご紹介しました。今回は録画機能を紹介したいと思います。

![Screenshot 2023-08-16 at 16.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/cdfee701-5f62-2e7f-03e2-0bf2719c467c.png)

録画機能のご利用には、Zoom Video SDK Recording のアドオンのご購入、または Zoom SDK Universal Credit のご購入が必要です。Zoom SDK Universal Credit の場合、[Video SDK Universal Credit Plan](https://developers.zoom.us/docs/video-sdk/video-sdk-plans/) で紹介されている各種機能

- Video SDK Sessionの従量課金時間
- オーディオカンファレンスの利用時間
- 翻訳・文字起こしの利用時間
- Cloud Room Connectorの利用時間
- Cloud Recordingの利用時間・ストレージ利用量

のどれに使うこともできる、共通のプリペイドクレジットとして利用することができます。詳細はお問い合わせください。

https://developers.zoom.us/docs/video-sdk/video-sdk-plans/

## Cloud Recording の開始方法
Cloud Recording は、REST APIからもSDKからも呼び出すことができます。使い方も簡単です。

https://developers.zoom.us/docs/video-sdk/web/recording/

### Video SDK for Web からの呼び出し

```javascript
let cloudRecording = client.getRecordingClient()
cloudRecording.startCloudRecording()
```
最初にZoomVideoインスタンスの `getRecordingClient` を呼び出し、その中のメソッド `startCloudRecording` をコールするだけです。

### REST API からの呼び出し
こちらもややこしいことはなく、
```
https://api.zoom.us/v2/videosdk/sessions/{sessionId}/events
```

このエンドポイント（Authorizationヘッダで必要なJWTトークンやsessionIdは事前に取得しておきます）に対して、
```
{
	"method": "recording.start"
}
```
をコールするだけです。

## 実装例

実際試してみましょう。

前回のファイルディレクトリを確認すると、以下のようになっていると思います。

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

### HTMLへのボタン追加

この、 `public/index.html`の、Join/Leaveボタンの下あたりに以下のようにボタンを追加します。

```html
<button type="button" class="btn btn-danger" id="start-recording">Start Recording</button>
<button type="button" class="btn btn-outline-danger" id="stop-recording">Stop Recording</button>
<button type="button" class="btn btn-outline-secondary" id="ask-recordable">Check if Recordable</button>
<button type="button" class="btn btn-outline-secondary" id="status-recording">Recording Status</button>
```

![Screenshot 2023-08-16 at 16.12.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/cbf5dc62-044f-a3bc-4dcc-6ab7e96d23c0.png)

### Javascript イベントリスナの追加
さらに、追加したボタンのクリックイベントをJavascriptから扱えるよう、`public/js/index.js` に以下を追加します。

```javascript
document.getElementById('start-recording').addEventListener('click',startRecording)
document.getElementById('stop-recording').addEventListener('click',stopRecording)
document.getElementById('ask-recordable').addEventListener('click',askRecordable)
document.getElementById('status-recording').addEventListener('click',statusRecording)
```

### Javascript 関数追加
同じファイルに、Clickイベントが発生した際に実行する、SDKのメソッドをコールする部分を追加します。

```javascript
// Start Recording
function startRecording() {
  let cloudRecording = client.getRecordingClient()
  cloudRecording.startCloudRecording()
  console.log(`Cloud Recording Started.`)
}
// Stop Recording
function stopRecording() {
  let cloudRecording = client.getRecordingClient()
  cloudRecording.stopCloudRecording()
  console.log(`Cloud Recording Stopped.`)
}
//  Recording Availability
function askRecordable() {
  let cloudRecording = client.getRecordingClient()
  let recordable = cloudRecording.canStartRecording()
  console.log(`This session is recordable: ${recordable}`)
}
//  Recording Status
function statusRecording() {
  let cloudRecording = client.getRecordingClient()
  let recordingStatus = cloudRecording.getCloudRecordingStatus()
  console.log(`Recording Status ${recordingStatus}`)
}
```
実装追加内容としては以上です。


## 実際に試す
前回同様、
```
node index.js
```

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

```
http://localhost:3010
```
にブラウザでアクセスすると画面が表示されます。[CORS](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/) の件、お忘れなく。

https://qiita.com/michitakasugi/items/7f3dc8954f5c92ea878f#%E5%AE%9F%E9%9A%9B%E3%81%AB%E8%A9%A6%E3%81%99

:::note info
Joinボタンのすぐ上のRole選択で、Hostを選択してからJoinします。
:::

Joinが完了したら、コンソールログを確認しましょう。

https://qiita.com/haruka1008/items/502e2fd6b3582363f23b

この辺り参考にしてください。ここで、`Check if Recordable` をクリックすると、録画が可能かどうかが `true` or `false` で帰ってきます。（Trueなら録画可能）

Trueなら、`Start Recording` で録画を開始しましょう。

![Screenshot 2023-08-16 at 16.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/29bf91b6-8126-20fd-d039-2e9372f55409.png)

終了したら、ZoomのWebコンソール画面で、録画したデータを確認できます。

![Screenshot 2023-08-16 at 16.30.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/a99a1a85-e147-d1b5-c335-b85145611713.png)

また録画形式については、同じくコンソール画面の Account Settings にある、Recordingの設定にて変更が可能です。こちらも参照ください。

https://developers.zoom.us/docs/video-sdk/web/recording/#recording-options

以上です。ぜひお試しください。