Video SDK UI Toolkit
Zoom の Developer Blog で Video SDK 版の UI Toolkit の紹介がされていました。
まだ触ったことがなかったので、試してみました。
どんなもの
Zoom Video UI Toolkitを使用すると、わずか数行のコードでiOS、Android、またはWebアプリにカスタムビデオ体験を埋め込むことができます。これにより、ビデオチャット体験の実装に必要な開発工数を削減し、ビデオ、オーディオ、チャット、設定、スクリーンシェアなどの機能を有効または無効にすることで、体験をカスタマイズすることができます。
とのことで、以前にまして実装コストが下がったようです。しかも、
- ライブポッドキャストで音声を楽しみたい場合 → audio feature
- 遠隔医療やセラピーセッションのためにビデオとオーディオが必要な場合 → audio and video
- 文書レビューのために画面共有と音声が必要な場合 → screen share and audio
var config = {
videoSDKJWT: 'TOKEN',
sessionName: 'SessionA',
userName: 'UserA',
sessionPasscode: 'abc123',
features: ['video', 'audio', 'share', 'chat', 'users', 'settings']
}
え、これ features で指定するだけで必要な機能を指定できるってこと？本当にこれだけならとても便利かもしれません。
やってみた
本当にこんなに簡単に始められるのか、ちょっと試してみることにしました。
必要なもの① : アカウント
まずはアカウントが必要です。ここは当たり前ですが以前から変わらず、こちらの記事の事前準備セクションを参照してください。繰り返しになりますが月間10,000分の利用までは無料です。
必要なもの② : Token生成
ここも以前とほぼ変わりませんが、Githubによると新しい Auth Endpoint Sample が公開されていて、内容が簡素化されていたのでこちらを使います。
以前と違い、必須属性がわかりやすく簡素化されていて、かつ立ち上げがとても簡単に見えます。sessionNameとroleが必須、それ以外はOptional。 npm install して、 .env を先のアカウントのページから取得した SDK Key と Secret に置き換えたら、npm run start で立ち上がります。（必要に応じて src/index.js の PORT を書き換えてもOK）
POST で正しく signature を返してくれるかどうか、curl などで確かめておくと良いかもしれません。
curl -X POST localhost:4000 -H "Content-Type: application/json" -d '{"sessionName":"test", "role":"1"}'
正しく {"signature":"xxx"} が帰ってくれば大丈夫だと思います。
必要なもの③ : UI Toolkit
ようやく本丸です。ブログからリンクしているこちらの記事を見ると
めちゃ簡単そうに書いてます。本当かな。。
git clone https://github.com/zoom/videosdk-ui-toolkit-javascript-sample.git
したら...ん、index.js の authEndpoint を②のURLに書き換えるだけ？しかも、 signature 取得の部分などを除くと、実際に Session に Join するために必要なコードって
var config = {
videoSDKJWT: '',
sessionName: 'test',
userName: 'JavaScript',
sessionPasscode: '123',
features: ['video', 'audio', 'settings', 'users', 'chat', 'share']
};
uitoolkit.joinSession(sessionContainer, config)
これだけみたいです。
実際、やってみました。
おお、動く
こんなにシンプルに動くとはびっくりです。この UI Toolkit というのは、ローコード、ローカスタムで動くものが欲しい時や、いわゆる PoC として使ってみたい、というときにはとても便利かもしれません。
もし、より UI の作り込みにこだわりたい、あるいは自社サービスの一部に組み込んで使いたい、といった場合には Video SDK を活用してオリジナルのサービスを開発することもできると思います。まずは試してみよう、という方はぜひこちらの UI Toolkit から試してみてはいかがでしょうか。
おまけ
もしサーバに置いて試したい方は、
このコードのL19から始まる
fetch(authEndpoint, {
method: 'POST',
body: JSON.stringify({
sessionName: config.sessionName,
role: role,
})
この部分に、headers: {'Content-Type': 'application/json'}, 足してあげて、
fetch(authEndpoint, {
method: 'POST',
headers: {'Content-Type': 'application/json',},
body: JSON.stringify({
sessionName: config.sessionName,
role: role,
})
としてあげると良いかもしれません。正しくPOSTできなかったようなので。
以上