この記事はQiita Engineer Festa 2022のZoom API/SDKを使ってみよう！のテーマに関する記事です
前提
- Zoomの技術を使ってwebでオンライン会議を実装する方法として「Zoom Meeting SDK」と「Zoom Video SDK」の2種類が提供されています
- 「Zoom Meeting SDK」は埋め込むだけでweb上でzoomの利用が可能になるSDKですが、一方でZoomが用意してくれたUIしか使うことができないため、機能やUIを好きなようにカスタマイズすることはできません
- 一方で「Zoom Video SDK」はオンライン会議システムの内部処理だけ関数にまとめたライブラリのようなものとなっており、それ以外のUIや機能を好きなようにカスタマイズできます。言い方を変えると、UIなどは自分で用意する必要があります。
- また、「Zoom Meeting SDK」はZoomのネイティブアプリと互換性があるのに対し、「Zoom Video SDK」はzoomとは関係なく独立したシステムとして使うことができるため、例えば自社サービスの一部としてユーザーにZoomを意識させずに組み込むことも可能となります
- 今回は「Zoom Video SDK」の方を試してみました
「Zoom Video SDK」を利用するためには有償の開発者アカウントを用意し、SDK KeyとSDK Secretを取得する必要があります
https://marketplace.zoom.us/docs/sdk/video/developer-accounts
今回やってみたこと
サンプルアプリを起動してみる
- はじめての Zoom Video SDK - Jumpstart 編で説明されているようにJumpstartというサンプルアプリをダウンロードできるようになっています。中のコードはReactです。
- また、似たコードがvideosdk-web-sampleとしてGitHubに公開されているため、こちらを利用することもできます。こちらもReactとVanilla JavaScriptが用意されています。
- とりあえず動作確認するだけであればこれだけでできます。ありがたし。
起動するとこんな感じのページ
複数タブで開けば次のように複数表示できます
zoomのマイアカウントのページを開いて左サイドメニューのダッシュボードから実施記録を確認することもできます
サンプルアプリをリファクタしてみる
- TypeScriptで記述されているのですが型やif文の判定が合っていなさそうな部分があったり、ESlintやprettierが整備されていなくて読み書きし辛い状態だったり気になる部分があったので、先にリファクタリングしてみました
- 何百というエラーや警告を直してるだけでほとんど時間を使ってしまった・・・
- 改修後のコードはGitHubで確認できます、ロジックは変わってないので是非こちらをベースに使ってもらえると嬉しいです
Next.jsの環境を用意して移植してみる
- Next.jsにはAPI Routesという機能があり、
pages/api配下のファイルに記載したものはNode.jsのendpointとして機能する- これを利用することでbackendサーバーを新しく用意することなくNext.jsだけで簡単なbackendサーバー動作させることができる
- 今回はAPI RoutesでZoom Video SDK APIを叩いてクライアント側にresponseを返すことで、API KeyとAPI Secretをクライアント側に露出することなくなく安全にデータを取得できるようにして結果を確認できるようにする
- https://nextjs.org/docs/api-routes/introduction
- GitHubはこちら
開発時に気づいた注意事項
-
zmClient.init("en-US", `${window.location.origin}/lib`, "zoom.us")のように初期化している部分があるが、特に第二引数に注意。sdkからwasmなどの一部のコードが分離しているので読み込めるようにwebpackを調整するか、"Global"などを指定して外部から読み込む必要がある。
- https://marketplacefront.zoom.us/sdk/custom/web/modules/videoclient.html#init
In the ZOOM Video SDK, web workers and web assembly are used to process media stream. This part of the code is separated from the SDK, so it is necessary to specify the dependent assets path. When the SDK is released, the web worker and the web assembly will be also included(the lib folder), you can either deploy these assets to your private servers or use the cloud assets provided by ZOOM. The property has following value:
やりたかったこと
- Zoom Video SDKでは「Cloud recording」という録画も使うことができて、本当はこれの録画データを使ってみたかったのですが、追加で有償プランの申請が必要のようで今回はできませんでした
参考リンク
- @zoom/videosdkのリファレンス
- Zoom Video SDK APIのリファレンス
おわりに
- 自社サービスなどにオンライン会議サービスのようなシステムをゼロから実装するのは非常に大変なので、業界を代表する企業がSDKを提供してくれるのは助かりますね
- 今回はイベントに間に合わせようと頑張ったのですが全然間に合わなかったので、引き続き自分でいろいろカスタマイズして試してみようと思います！