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できなかったようなので。

以上