1. 概要
Webブラウザ上で動作するビデオ会議機能などを開発するために
Webex Browser SDKを提供しています。
https://developer.webex.com/docs/sdks/browser
SDKは無償でご利用いただけます。
ビデオ会議だけではなく、1対1のビデオコールも実装できます。
2. SDKの主な機能
- 音声またはビデオ会議の開始や参加。
- SIPアドレスやミーティングリンクを利用した会議の開始や参加。
- 共有された画面・資料の閲覧。
- 資料の共有(デスクトップ版の一部のブラウザが対応)。
- ミーティング中の制御(参加者の承認やミュート、画質の制御など)。
- シスコ製の会議デバイスとペアリングしての一部のデバイス制御。
3. サポートしているブラウザ
- デスクトップ版のChrome、Safari、Edge、Firefoxの各最新版。
- モバイル版のChrome for Android, Safari for iOSの各最新版。
ビデオ会議中の資料共有など、一部のブラウザではサポートされていない機能もあります。
ビデオ会議に参加して自分の映像・音声の送信や、参加者の映像・音声の受信は、
上記のすべてのブラウザで動作します。
4. 簡単な動作確認手順
4.1. 必要なもの
- ビデオコールや会議を試したいので、合計で2台以上のカメラとマイク付きの
Windowsか、Macか、iPhone/iPadか、Android端末を準備します
(SDKを試す端末は前述の動作環境のブラウザが動作するものである必要があります)。
2人以上で試すなら、それぞれが、いづれか1台ずつでよいです。
- ビデオコールや会議参加のために必要なアカウントを(1)で利用する端末ごとに準備。
Webex Teamsの無償アカウントでもビデオコールや会議が可能なので、こちらの無償アカウントでよいです。
お持ちでなければ、以下から無償で取得できます。
https://teams.webex.com/
SDKを試す端末用には、別途、上記の無償アカウントを取得しておきます。
例えば、無償のメールアドレスを取得して、そのアドレス用にWebex Teamsのアカウントを作成します。
プライバシ上の理由などから、SDKやAPIを実験で使う際は、普段お使いのアカウントとは分けた方が無難です。
4.2. 動作確認手順
- SDK実験用のアクセストークン取得のために、開発者サイトにログインします。
https://developer.webex.com/
の右上の[Log in]ボタンからログインします。
- 実験用のアクセストークンを取得します。
https://developer.webex.com/docs/api/getting-started
このページの真ん中付近の[Your Personal Access Token]からコピーできます。
このアクセストークンは、あくまでも実験用で一時的なもの(12時間有効)です。
実際の製品で利用する場合は、OAuth 2.0のフローを使ってアクセストークンを取得する必要があります。
- デモアプリを使って、動作確認を開始します。
https://js.samples.s4d.io/browser-multi-party-call/
こちらのデモアプリに、前日の動作環境にマッチするブラウザでアクセスします。
(デモアプリの特性上、必要最低限に近いコードしか入っていないので、画面デザインは何の特徴もありませんが、
その辺は、作り方次第で調整可能です)
上記の(2)でコピーしたアクセストークンを、Credentialsのフィールドにペーストして[Connect]ボタンを押します。
下側の"disconnected"の部分が"connected"に変わるのを待ちます。
- 実際にビデオコールや会議に参加してみます。
上記(3)まで実行したのとは別の端末で、Webex Teamsのアプリやサイトにログインして利用可能な状態にしておきます。
上記(3)のデモアプリの[Dialer]内のフィールドに、宛先のSIPアドレスを入力して[dial]ボタンを押します。
SIPアドレスは、デモアプリとは別端末でログインしたユーザのメールアドレス形式のWebex Teamsのアカウント名などです。
この時点でカメラやマイクを使ってよいかのブラウザ側の承認画面が表示された場合は、承認するとブラウザが(そのうえで動くSDKやアプリが)カメラ画像やマイクの音声にアクセスできるようになります。
宛先のSIPアドレス側では着信動作などになるので、応答することでビデオコールや会議が動作しているのが確認できるはずです。
SIPアドレスに個人のWebex Teamsのアカウント名を指定した場合は、1対1のビデオコールになります。
Webex Teamsの会議用のSIPアドレスや、Webex Meetingsの会議参加のSIPアドレスを指定した場合は、
ビデオ会議、Web会議に参加するような動作になります。
なお、Webex Teamsの場合は、スペースを作成すると、無償版でもそのスペースに会議用のSIPアドレスが割り当てられるので、
そのアドレスに[dial]することで多人数のビデオ会議も動作確認できます(Webex Teamsの無償版の場合25人まで)。
5. デモアプリのソースコードや、そのカスタマイズ
ソースコードは以下で公開されています。
必要最低限度のことしかやっていないので、HTMLやJavaScriptが分かれば、すぐ理解できると思います。
https://github.com/webex/webex-js-sdk/tree/master/packages/node_modules/samples/browser-multi-party-call/
ちょっと、カスタマイズして動かしてみたい場合は、このデモアプリをカスタマイズしてみるのが分かりやすくてお勧めです。
カスタマイズして試してみる場合は、index.html内の
<script src="/webex.min.js"></script>
の部分は、
<script crossorigin src="https://unpkg.com/webex@^1/umd/webex.min.js"></script>
にするとよいです。
6. 実際にアプリやソリューション、サービスとして提供する場合
上記の動作確認では、実験用のアクセストークンを使用しましたが、
実際のアプリやソリューション、サービスとして、SDKの機能を利用して組み込む場合は、
OAuth 2.0のフローを利用して、アクセストークンを取得する必要があります。
詳細は以下は参照ください(無償版でも利用可能です)。
https://developer.webex.com/docs/integrations
