クリスマスと年末年始の遠隔パーティを快適にするアプリをZoomで作る

# はじめに
QiitaのAdvent CalendarにZoomも協賛しているということで、[Qiita Engineer Festa 2022](https://qiita.com/official-campaigns/engineer-festa/2022)でお世話になった身ですので、微力ながらも協力したいと思い、今回も参加させていただきます。２本投稿予定のうち２本目です。

※ １本目は[「クリパと年末年始はリアルタイムボイスチェンジャーを使ってずむだもんと遊ぼう。」](https://qiita.com/wok/items/e2c83e7f154ffabed733)を投稿しました。

昨今の、Zoomを代表とするビデオ会議ツールの普及に伴って、クリスマスや年末年始のパーティをリモートで開催する方々も多いのではないかと思います。
弊社も在宅勤務者が多いので、クリパに限らず節目のイベント事は、イベント会場(オフィス)と在宅勤務者をZoomで繋いでパーティを行います。
オフィスに出社している人はイベント会場でパーティを楽しみ、在宅で勤務している人はZoomで会場に繋いでパーティを楽しむといった形態ですね。下の図のような感じ。楽しそうですね。

![image](https://user-images.githubusercontent.com/48346627/208976115-3702a575-c3e4-4826-90bc-d63d02a81ee5.png)



本稿では、より快適で楽しいパーティを行えるように、こういった時に起こりがちな問題の解決になりそうなアイデアを実装してみたいと思います。


# 課題

私も、通勤電車が得意ではないので、かなりの割合で在宅勤務をしています。クリパのようなイベントもタイミングが合えばオフィス(イベント会場)で参加しますが、多くの場合はリモートで参加します。この時、結構起こりがちだなと思うのは、イベント会場とリモート参加者の間での熱量のギャップです。会場の状況はZoomの映像で送信されてきてイベント会場はとても盛り上がっているように見えるのだけれど、リモートからだとイマイチよくわからない。なんか盛り上がれない。そんな状況がよくあるのではないでしょうか。弊社のイベントでは終了後に改善のために感想などのアンケートをとるのですが、その回答の中にも実際にそのような声が上がってきていました。

![image](https://user-images.githubusercontent.com/48346627/208989278-2c495410-95e5-4928-93ea-de11324f8828.png)

今回は、このような問題に対処するアイデアを考えたいと思います。

# アイデア
弊社イベントでは、基本的に定点カメラでイベント会場を写したものをズームの映像としてリモート参加者と共有しています。ときどきカメラの向きを変えたり、移動させたりしてくれる場合もありますが、常にではありませんし、特に盛り上がっているときにそのようなところに気が回すというのも難しいと思います。このため、イベント会場の全景を写している感じとなってしまい、イベント会場参加者の表情など細かな状況を読み取るのが難しい状況になっています。これが、会場の参加者とリモートの参加者のギャップを生む一つの要因ではないかと考えました。

そこで、イベント会場の参加者などを自動でズームアップして配信できれば、もう少し会場の状況を臨場感をもって感じられ、一体感が出てギャップが改善するのではないかと思いました。今回は、Zoom Meeting SDKを用いて、この機能をZoom Meetingで使えるようにしてみました。

![image](https://user-images.githubusercontent.com/48346627/208990151-96566cac-b92b-4dc2-8d09-5618d8d187d1.png)

下の動画のような感じのものになります。パーティの映像を使えなかったので[NHKのクリエイティブライブラリ](https://www.nhk.or.jp/archives/creative/)からお借りした、[イタリア　ミラノの横断歩道の映像](https://www2.nhk.or.jp/archives/creative/material/view.cgi?m=D0002011299_00000)になります。歩行者をズームしてトラッキングしているのがわかるかと思います。（トラッキングの精度に改善の余地はありますが、コンセプトはわかっていただけるかと思います。）

https://user-images.githubusercontent.com/48346627/208986637-10e8b411-390c-4f21-9abe-0efbb5ceccd5.mp4

実際、見比べるとこんな感じです。ランダムで２名を選択してズームしています。赤枠が選択された人物です。

https://user-images.githubusercontent.com/48346627/208986884-0c58b1e7-3bbe-4c20-8be3-5c315489c9f3.mp4


# 処理の大まかな構成と流れ
予めアプリケーション側でカメラ映像の入力を取得しておきます。この画像にMulti Object Trackingと呼ばれる物体検出とトラッキングを組み合わせた処理を行います。この処理の結果は物体の映っている領域を矩形で示すものになっているので、この結果を元に対象の物体の領域を複数個切り出し、一枚の画像に編集します。Zoom Meeting SDKからカメラ画像の要求が来た時に、この画像をカメラ画像として渡します。これにより、検出された物体（ここでは人物）のズームアップされた画像がZoom 会議に送信されることになります。

![image](https://user-images.githubusercontent.com/48346627/208991109-321cf2e2-e55e-45ea-a835-550cfd6c83b3.png)


# 使い方
本機能は、AIの技術を多用しているため大変処理が重いです。GPUを搭載しているPCでの動作を推奨しています。CPUだとまともに動かすのはきびしいかもしれません。GPU搭載のPCをお持ちでない場合は、トラッキング機能を省いた簡易版も用意してあるのでそちらをご利用ください。これは、人物を発見したらその場所を、一定時間ズームして写し続けるモノになります。実際のイベント会場では、あまり動き回る人がいないので、実はこれで十分なケースも多いと思います。


## 前提
使用するためにはZoom Meeting SDKのSDK KeyとSDK Secretが必要になります。
[こちらの記事](https://qiita.com/yosuke-sawamura/items/de69e73e47335cd61d68)を参考に取得してください。SDK Keyと SDK Secretの管理には十分にご注意ください。

## SDK keyとsecretの設定
SDK keytとsecretを環境変数に設定します。
Bashの場合は、上記で取得したSDK keytとsecretを使って次のコマンドを実行してください。
```
export ZOOM_SDK_KEY=<SDK Key>
export ZOOM_SDK_SECRET=<SDK Secret>
```

## 起動方法
リポジトリをクローンして、必要モジュールをインストールしてください。
その後起動するとブラウザが自動起動してアプリケーションを開始します。
自動で起動しない場合は、ブラウザでhttps://localhost:3000/ にアクセスしてください。

```
$ git clone https://github.com/w-okada/zoom-meeting-plus-multi-focus.git -b z001_qiita_advent_calendar_2022_zoom  
$ cd zoom-meeting-plus-multi-focus/
$ npm install
$ npm run start
```

まずカメラの設定します。カメラを選択するとMonitorのところにカメラ画像が表示されます。

![image](https://user-images.githubusercontent.com/48346627/208994779-7d138b46-929d-4bf9-9ab4-be9d90489f78.png)




次に、動作モードを指定して、処理を開始します。動作モードのdetectionは物体の検出(ここでは人の検出)を行いますが、トラッキングを行いません。person_trackingはMulti Object Trackingの動作を行います。GPUをお持ちではない方はdetectionの方をお勧めします。

![image](https://user-images.githubusercontent.com/48346627/208995169-73908245-b707-4352-9beb-d6b9014bdbbd.png)


次に、会議に参加するために必要な情報を設定し、会議室に入室します。

![image](https://user-images.githubusercontent.com/48346627/208995295-1308c3f9-4307-45ac-9efb-10b31d429348.png)


会議室に入ったら、設定ダイアログで、video設定のカメラを`fixed point camera`に変更します。これで、人物をズームした映像がZoom会議に送信されるようになります。
![image](https://user-images.githubusercontent.com/48346627/208995408-ef08f7b6-99d7-428e-8780-17bbcc1ff197.png)

# リポジトリ

デモのリポジトリはこちらです。

https://github.com/w-okada/zoom-meeting-plus-multi-focus

# さいごに
今回は、Zoom Meeting SDKで自動的に人物をズームする機能をZoomミーティングに組み込んでみました。イベント会場でリモート参加者のためにカメラをもって回る人員を用意できない場合に役に立つ機能だと思います。クオリティ的にはまだ改善の余地がありますので、今後ブラッシュアップして、リモートからのパーティ参加をより快適なものにしていきたいと思います。

# 宣伝

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