Zoom Meeting SDKでタイムキーパーちゃんを作る

# はじめに
ZoomがSDKを提供しはじめたということで盛り上がりを見せている昨今ですが、Qiitaでも盛り上げイベントが開催されています。SDKでいろいろ遊ばせてもらえる上に、アイテムもゲットできるかも、ということで参加するしかないですね。

ということで、これを機にいろいろ実験してみたのですが、面白そうなことがたくさんできそうだったので、いくつか連投する予定です。ご興味を持たれましたら、後続の投稿もご覧ください。

第１回の記事はこちら⇒[Zoom Meeting SDKでタイムキーパーちゃんを作る](https://qiita.com/wok/items/205c086f19a7ff73718d)　**←本記事**
第２回の記事はこちら⇒[Zoom Meeting SDKでアバターにいろいろしゃべらせる](https://qiita.com/wok/items/0450c8620f11a371bd8b)
第３回の記事はこちら⇒[Zoom Meeting SDKをつかって会議にアバターで参加する](https://qiita.com/wok/items/1bccd567e844ac4e8979)
第４回の記事はこちら⇒[Zoom Meeting SDKでなんちゃってボイスチェンジャー](https://qiita.com/wok/items/08c9505d5c3c95d8956d)
番外編の記事はこちら⇒[Zoom Meetingにアバターで参加するぞ。番外編](https://qiita.com/wok/items/4f51e1a72d735b75f73f)
第５回の記事はこちら⇒[Zoom Meeting SDKとVosk browserでZoom会議のリアルタイム文字起こし](https://qiita.com/wok/items/e83c49c530354a7b8b42)


今回は、まずは手始めにZoomでタイムキーパーを作ってみたいと思います。
こんな感じに動きます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Zgag--JC2sM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

とりあえず、Dockerイメージにしているので、ダウンロードして使ってみてください。

```
$ docker run -p 8888:8888 dannadori/zoom-meeting-plus:v01
```
http://localhost:8888/ にアクセスすれば使えるようになります。
なお、httpで起動しているのでローカルで使用する必要があります。

操作は次の通りです。

![image](https://user-images.githubusercontent.com/48346627/178246591-399035d6-256f-43a9-bc11-5fc9ddfab7f7.png)

![image](https://user-images.githubusercontent.com/48346627/178246655-b58d40ef-50fd-4176-a0fb-8216f59ec5bf.png)

![image](https://user-images.githubusercontent.com/48346627/179323137-6caf3f17-0fed-4a59-845a-c2db79d582b4.png)

![image](https://user-images.githubusercontent.com/48346627/178246684-c4af113f-b678-4a22-8033-a0ee02827312.png)

![image](https://user-images.githubusercontent.com/48346627/178246724-fb9804b5-ef6d-4c10-ac9c-aff1f7f01d11.png)

# Zoom提供のSDK
ZoomはMeeting SDKとVideo SDKを提供しています。
Video SDKはかなり自由にUI/UXをカスタマイズできるようです。しかし、通常のZoomのミーティングへ参加することはできないようです。なので、Zoomのバックエンドを使って完全独立したコミュニケーションアプリを作る時に使うという理解をしています。
一方で、Meeting SDKは、Zoomが提供している公式アプリのUIコンポーネントを使ってお手軽にアプリが作れるという代物です。通常のZoomミーティングにも参加できます。なので、通常のZoomを使ったビデオ会議でちょっとしたお助け機能を追加するという時に使える、という理解をしています。

今回は、そもそもの私のデザインセンスだとZoomの提供しているUI/UXを超えることができるとは思えないですし、通常のZoomミーティングに参加できるアプリの方が使ってくれるユーザも多そうだ、という考えから、Meeting SDKを使うことにしました。後ほど時間があればVideo SDKの方も触ってみようと思います。

# 構成
タイムキーパー機能は、BotとしてZoom会議に参加します。少々トリッキーですが、Zoomが映像と音声のストリームを取得するとき(getUserMedia)に、ボットの映像と音声を流し込むMediaStreamをZoomのSDKに渡してあげます。この時、後から音声を流し込めるように、WebAudioAPIでAudioNodeを作成してそのストリーム(track)をzoomに渡してあげるのがよさそうです。そして指定された時刻になったら、そのノードに終了時刻の音声を流します。今回は終了の1分前、3分前、5分前にも通知できるようしました。

![image](https://user-images.githubusercontent.com/48346627/178252234-dd329590-f3ef-4a64-a21e-212349816c7c.png)



# デモ
記事の冒頭で示した通りです。

# リポジトリ
ここで紹介したデモは次のリポジトリで公開しています。
https://github.com/w-okada/zoom-meeting-plus

どんどんアップデートしていくので最新版は安定しない可能性があります。
次のタグでcloneして使ってください。
```
$ git clone https://github.com/w-okada/zoom-meeting-plus -b v01
```

# 宣伝
弊社 FLECT は、Salesforce を中心に AWS, GCP, Azure を用いたマルチクラウドシステムの提案、開発を行っております。 また、ビデオ会議システムについては、Zoom SDK, Amazon Chime SDK, Twillio など各種ビデオ会議用 SDK を用いたシステムの開発しており、サービス化の実績も多数あります。 ご興味をお持ちいただけたら是非ご相談ください。