すぐに繋がる Web 会議【有償版が必要】

# :star: はじめに
この記事は、[Webex Advent Calendar 2021](https://qiita.com/advent-calendar/2021/webex) の 7 日目:four_leaf_clover:として投稿しています。

Web 会議は、以前から B2B(Business to Business) では広く使われてきましたが、パンデミックの影響もあり、最近では企業間のみならず、さまざまな場面で使われるようになりました。
例えば、オンライン相談、オンライン診療、オンライン面会などが挙げられます。

Web 会議を B2C(Business to Customer) で利用するケースも増えてきている一方で、普段 Web 会議を利用しない方が初めてアクセスする場合は、会議を開始する前に躓いてしまうポイントがいくつかあります。

新しくリリースされた Webex Instant Connect の API を使って、どのように改善できるか試してみました。

# :star: Web 会議のユーザエクスペリエンス
初めて Web 会議にアクセスする場合、ほとんどのサービスにおいて、アプリケーションのダウンロードやユーザ情報の入力などが求められます。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/79b7ae6f-1743-5e50-b15e-1bfda65fe6a1.png)


例えば、Webex の場合、主催者から届いたスケジュールの本文に「ミーティングを開始」というボタンがあり、簡単に Web 会議を開始できますが、初めてアクセスする場合は、追加のステップが必要となり、先に進めない利用者向けのサポート業務が増えてしまうことが考えられます。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/42690991-bb5a-30e4-1819-109c7a2ad834.png)
また、事前にマニュアルを作成して配布しても、クラウドサービスは頻繁にアップデートがあるので更新が追い付かないケースも考えられます。

# :star: Webex Instant Connect
そんなことを考えていたら、ワンクリックで Web 会議に参加できる API がリリースされました。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/57add480-4b60-6f32-8820-53b52860d8de.png)
ブラウザベースなのでアプリのインストールが不要で、PC だけでなく、モバイルやタブレットでも動作します。
さらに、参加者(ゲスト)側は、何も入力することなく、専用のリンクにアクセスするだけで、すぐに参加できます。

既存の API や SDK を駆使することで同じことが実現できますが、Webex Instant Connect は、それらをパッケージ化し、さらに簡略化したものです。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/f6881f7c-e113-66ad-017c-17325aeca4d2.png)
※ボタンの色や位置の変更、機能追加などのカスタマイズはできません。
　自由にカスタマイズしたい場合は、既存の API や SDK の利用をお勧めします。
　詳細は、Webex Advent Calendar 2021 の [1日目](https://qiita.com/kazkaz_o3/items/f0c1b7d1ffe755551f85) をご参照ください。

API や SDK を活用した事例：
・事例1：[パーソル パ・リーグTVグループ観戦](https://www.cisco.com/c/ja_jp/solutions/industries/sports-entertainment.html?socialshare=tv-meetings)
・事例2：[LINE WORKS 連携](https://news-blogs.cisco.com/apjc/ja/2021/07/13/line-works%E3%80%81webex%E3%81%A8%E6%A9%9F%E8%83%BD%E9%9D%A2%E3%81%A7%E9%80%A3%E6%90%BA%E9%96%8B%E5%A7%8B/)


Webex Instant Connect は、2つのコンポーネントで構成されています。
・Link Generator：Web 会議のリンクを生成 (Guest Issuer を活用)
・Meeting UI：Web 会議のユーザインターフェイスを提供 (Browser SDKを活用)
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/f70122a1-b9e0-00e2-a15c-c28625101e4c.png)
※予約ポータルはサービスに含まれないため、既存の Web サイト、または別途構築する必要があります。

# :star: 動作イメージ
実際の動作を動画でご覧ください。

・シナリオ：オンライン面会
・患者家族(ゲスト)：メールでリンクが共有され、面会時間になったらリンクをクリックし、待機
・入院患者(ホスト)：Webex Messaging でリンクが共有され、面会時間になったらリンクをクリックし、開始
![オンライン面会_20211122.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/af874832-55af-bb56-50bc-207300f46d57.gif)
※ブラウザの WebRTC が使われており、初回アクセス時は、マイクやカメラのアクセス許可が必要になる場合があります。
※リンクの配布は別途実装する必要があります。


# :star: 事前準備
ご利用にあたっての前提条件：

:::note info
・Webex の有償ユーザ (A-FLEX3.0 契約) であること
・「A-FLEX-MTGBROKER」の PID が契約に含まれていること (追加費用はかかりません :free:)。
:::
(詳しくは、Cisco の担当者までお問合せください :telephone_receiver:)

## 1. Webex Instant Connect の有効化
[Instant Connect for virtual care](https://instant.webex.com/virtualcare) にアクセスし、「Begin Virtual Care Integration」をクリックします。
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/079a1aa0-66fd-7fb6-e498-f325576ac269.png)
Webex のログイン画面が表示されるので、上記前提条件を満たす Webex 組織に登録されている管理者権限のユーザでログインします。

:::note info
他のユーザで既にログインしている可能性がある場合は、ブラウザのシークレットウィンドウで実施することをお勧めします。
:::

アクセス許可の画面が表示されるので、「承認」をクリックします。
![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/38e487d7-0430-9fe1-ae53-056c9b4fd865.png)
「Activate Instant Connect」をクリックすると、「Instant Connect activated」に変わり、有効化が完了します。
![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/7573c48b-dcd8-e70e-9b1e-a5c0ff55e27b.png)

## 2. アクセストークンの取得
[Webex for Developers](https://developer.webex.com/) にアクセスし、上と同じ管理者権限のユーザでログインします。
![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/bb928b99-9c60-5198-81b0-b8e07777624b.png) 

「My Webex Apps」を選択します。
![画像10 (小).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/cbcd35d0-05e1-ebe2-a75c-b14c80920647.png)

有効化されたタイミングで自動作成された「GuestIssuerApp」が確認できます。

:::note alert
これは絶対に削除しないでください :no_good:。
:::
![画像11-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/f670e567-07e9-e1f9-f3a3-4bcb24ec2d67.png)

右上の「Create a New App」をクリックします。
![画像11-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/d867c1f7-6662-b53e-83f5-d0f1a7559100.png)

Create a New App 画面が表示されたら、「Create a Bot」をクリックします。
![画像12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/f3343536-c0a2-ce72-ab31-a56c23c162d7.png)

New Bot 画面が表示されたら、必要な情報を入力し、右下の「Add Bot」をクリックします。
![画像13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/c46131aa-5407-7725-464a-7bb9004b391a.png)

:::note info
「Bot access token」の値をコピーして保管しておきます。
:::

![画像14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/279cc6ba-e4da-d075-aef7-e5a9c5d9b9f4.png)
※「Integration」の「OAuth Access token」を利用することも可能です。詳細は、[こちらの記事](https://gblogs.cisco.com/jp/2021/08/make-meeting-reservation-system-by-webex-api-4/)をご参照ください。

# :star: リンクの作成
## 1. API 情報の確認
[Instant Connect for virtual care](https://instant.webex.com/virtualcare) にアクセスし、「Begin Virtual Care Integration」をクリックします。
![画像15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/19e01928-40f1-634a-b19e-17abfbe373b1.png)

Host と Guest の URL が表示されます。

:::note info
主催者(ホスト)と参加者(ゲスト)のリンク作成時に必要な情報ですので、コピーして保管しておきます。
:::
![画像16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/3ca42cf6-8eeb-0d09-f3c7-95ca00a10f2b.png)

画面下部に POST メソッドの URI が表示されます。

:::note info
 API のリクエスト先になりますので、こちらもコピーしておきます。
:::

![画像17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/45a1a801-dc7e-5fb9-0b75-0d1b68dfc331.png)

POST メソッドの URI をクリックすると、Header や Body の仕様が確認できます。
![画像18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/65f8869e-75db-4dc5-98fa-5730a96b1b85.png)

## 2. API リクエスト
リクエストが成功すると、ホスト用(host)とゲスト用(guest)の情報がそれぞれ返ってきます。
![画像19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/9dbf78ba-0646-5ea6-a411-1bc8b449c304.png)

:::note info
※"aud" は、非公開ですので Cisco の担当者までお問合せください :telephone_receiver:
※"sub" は、会議室毎にユニークな値を設定します。
:::

Python でのリクエスト例：

```python
import requests
import json

url = "https://mtg-broker-a.wbx2.com/api/v1/joseencrypt"

payload = json.dumps({
  "aud": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "jwt": {
    "sub": "test"
  }
})
headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer Zjc4M2NjNGEtMjkzYi00MTIyLWE5ZjgtN2U3ZjRkMTg4ZGJjZTNlYmU2MjktMDI2_P0A1_2b3e2fe0-c4ea-4dd4-958b-48eb4cb375a7'
}

response = requests.request("POST", url, headers=headers, data=payload)

print(response.text)

```
:::note info
※'Authorization'の Bearer ヘッダには、コピーしておいた「Bot access token」の値を設定します。
:::

## 3. リンクの作成
先程コピーした主催者(ホスト)と参加者(ゲスト)用 URL の後ろに Response で取得した情報をくっつけることでリンクの完成です。
![画像20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/9bb70c90-55f7-64fa-506f-8d78d61d4b3f.png)
複数のアルゴリズムで暗号化されており、文字数がとても長いです。
![画像21-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/5cb9431d-b4bf-3cb8-14fc-359cc9d95bb4.png)

# :star: 動作確認
作成したリンクを参加者(ゲスト)と主催者(ホスト)がそれぞれクリックします。

参加者(ゲスト)は主催者(ホスト)が参加するまで待機画面のままです。
![画像23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/470917e7-6aca-0f3d-0d62-041884486a7c.png)
※WebRTC の仕様上、カメラやマイクが利用できないデバイスではエラーになります。
※1台の PC でテストする場合、mac と Windows で内蔵 Web カメラの動作に違いがあります。

:::note info
mac：Web カメラを複数のブラウザウィンドウで共有できる
Windows：Web カメラを複数のブラウザウィンドウで共有できない :arrow_right: Web カメラを増やすか、仮想カメラで対応
:::

主催者(ホスト)は、初回参加時にログイン画面が表示されます。
ここでは管理者権限のユーザではなく、Webex Meetings のライセンスが付与されたユーザでログインします。
アカウント情報を保存することで 2 回目以降はログインを省略することが可能です。
![画像24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/f8b303cc-792c-963d-b9cf-b51e05f1e834.png)

「Start Consultation」をクリックすると、会議が開始されます。
![画像25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2340937/e7efcc4b-5499-8a08-afef-e0a14b21e481.png)

# :star: 最後に
最後まで読んで頂き有難うございます。

シンプルな API で会議リンクを取得できるので、さまざまなサービスで活用できると感じました。

あとは、発行されたリンクを配布する必要がありますが、最近は CPaaS や iPaaS が普及してきているので、同じ要領 (API 連携)で解決できると思います (配布先は Eメール、SMS、LINE などを想定)。

:::note info
SMS でリンクを共有する場合は、短縮 URL サービスを利用して短くしてから配布する必要があります。
:::

今後、Web 会議を皆様のサービスとして活用する場合に少しでもお役に立てれば幸いです。

# :memo: 免責事項
本サイトおよび対応するコメントにおいて表明される意見は、投稿者本人の個人的意見であり、私の所属する組織の意見ではありません。本サイトの内容は、情報の提供のみを目的として掲載されており、私の所属する組織や他の関係者による推奨や表明を目的としたものではありません。各利用者は、本Webサイトへの掲載により、投稿、リンクその他の方法でアップロードした全ての情報の内容に対して全責任を負い、本Web サイトの利用に関するあらゆる責任から私の所属する組織を免責することに同意したものとします。