OSSを使って独自のWeb会議アプリ(SkyWay Conf)を立てる方法

今日は[WebRTCプラットフォームSkyWay](https://webrtc.ecl.ntt.com/)(以下、SkyWay)の中の人として記事を書きます。

SkyWayのデモアプリとして公開していた、 **[SkyWay Conference](https://conf.webrtc.ecl.ntt.com/)** (以下、SkyWay Conf)というWeb会議アプリのソースコードを、オープンソースソフトウェア(以下、OSS)として公開しました。

-  https://github.com/skyway/skyway-conf
<img width="1792" alt="skyway_conf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6651/e7e742f4-e1be-59e3-4f51-7e7d6cf83614.png">

新型コロナウイルス感染症の影響で、様々なコミュニケーションがオンラインで行われるようになりました。誰もが、オンラインで、取りたい時に自由にコミュニケーションが取れるように、SkyWayとして出来ることを考えた結果、今回のOSS公開に至りました。詳しくは、 [SkyWay公式のお知らせ](https://support.skyway.io/hc/ja/articles/360047462713)をご覧下さい。

この記事では

- SkyWay Community Editionと組み合わせたSkyWay Confの動かし方
- 利用する上での注意点
- FAQ

について解説します。

# SkyWay Confの動かし方

SkyWay Confをローカル環境で動かす手順を解説します。

## 1. SkyWay Community Editionへの登録

SkyWayにまだアカウントを持っていない方は、以下のサイトから登録を行って下さい。
https://console-webrtc-free.ecl.ntt.com/users/registration

![skyway_regist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6651/5d74c055-a1aa-58a1-68c1-4f8715f293ba.png)

メールアドレス、パスワードを入力して登録すると、入力したメールアドレスにアクティベーションメールが届きます。そのメールのリンクをクリックすることで登録が完了します。

## 2. アプリケーション(APIキー)の作成

ログインしたら「新しくアプリケーションを追加する」をクリックしてアプリケーション(APIキー)を作成して下さい。
![skyway_dash_add_apikey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6651/442d3d29-a8bb-a988-d82f-41c80e7018f3.png)

|入力項目|設定|説明|
|:--|:--|:--|
|アプリケーション説明文|SkyWay Confのテスト用|アプリケーションにつける説明文で、ダッシュボードでの表示のみに利用されます。128文字以内で指定してください。|
|利用可能ドメイン名|localhost|作成するアプリケーションで利用するドメイン名を入力します。ここでは  **localhost**  と入力します。この場合、 http://localhost にWebアプリをホスティングして利用することが出来ます。|
|TURNを利用する|有効|TURNサーバは、ファイアウォールを経由する等の理由によりP2P通信ができない場合でも、メディアやデータをリレーすることにより通信を可能とします。 **有効にした場合、SDK並びにブラウザが利用するかどうかを自動判別します。** |
|SFUを利用する|有効|SFUとは、P2PではなくSFUというメディアサーバを経由して映像や音声の送受信を行う技術です。 **SkyWay Confでsfuルームを利用する場合は有効にします。** |
|listAllPeers APIを利用する|無効|listALLPeers APIを使用する場合は有効にします。 **SkyWay Confでは利用しないため無効にします。**  |
|APIキー認証を利用する|無効|APIキーの不正利用を防止するための認証機能を利用する場合は有効にします。**SkyWay Confは対応していないため無効にします**が、SkyWay Confをベースに商用サービスを開発される場合などは機能追加することをオススメします。|

## 3. APIキーを控える

アプリケーション作成後、表示されているAPIキーを控えて下さい。
![skyway_dash_top_apikey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6651/93d01cf4-34d3-8ce1-b8cf-9c77820cac59.png)
 
 **注:** SkyWay Community Editionでは、TURNとSFUに月500GBまでの利用制限があります。現在までの利用量はダッシュボードで確認できます。

## 4. SkyWay Confのソースコードをダウンロード

[GitHubのリポジトリ](https://github.com/skyway/skyway-conf)からソースコードをダウンロードして下さい。

- ZIPでダウンロードする場合
  - https://github.com/skyway/skyway-conf/archive/master.zip

- git clone する場合

```
$ git clone https://github.com/skyway/skyway-conf.git
```

## 4. APIキーの追記

以下の通り、ソースコードにAPIキーを追記して下さい。
**src/conf/utils/skyway.ts** 

```ts
import Peer, { SfuRoom } from "skyway-js";

export const initPeer = (forceTurn: boolean): Promise<Peer> => {
  return new Promise((resolve, reject) => {
    const peer = new Peer({
      key: "688602ed-6f20-443c-b869-2a55997f5790", //ここにAPIキーを追記
      debug: 2,
      config: {
        iceTransportPolicy: forceTurn ? "relay" : "all",
      },
    });
```
 
## 5. 実行

以下のコマンドを実行して、必要なパッケージをインストールして下さい。

```
$ npm install
```

パッケージのインストールが完了したら以下のコマンドでビルドと開発用Webサーバを起動します。

```
$ npm run dev
```

以下のURLにアクセスして動作確認して下さい。
http://localhost:9000/webpack-dev-server/

**注:** SkyWay Confで利用している [navigator.mediaDevices.getUserMedia](https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia) は、localhost以外のサイトでは、TLS/SSLにより保護されたサイトでしか利用できません。そのため、コンソールに出てくる http://0.0.0.0:9000/webpack-dev-server/ では動作確認できませんので、ご注意下さい。

# Webサーバへのデプロイ

以下のコマンドを実行して、プロダクション環境用にビルドを行って下さい。

```
$ npm run build
```

 **docs フォルダ**に生成された以下のファイルを、ご自身で管理されているサーバにアップロードしてお使い下さい。

```
image/
conf.bundle.js
conf.html
index.bundle.js
index.html
vendor.bundle.js
```

 **注:** SkyWayのダッシュボードの「利用可能ドメイン」にご自身のサーバのドメイン名を登録して下さい。
 **注:** TLS/SSLにより保護されたサイトでお使い下さい。
 **注:**  公開サーバにアップロードすると誰でも利用可能な状態になりますので、アクセス制限や認証を行って下さい。

# SkyWay Confの動作要件

## 動作確認済みブラウザ
- Google Chrome 最新の安定版 (v81以上)
- Firefox 最新の安定版 (v75以上)
- Safari 最新の安定版(v13以上)
- Microsoft Edge 最新の安定版( **Chromium版 v79以上** )

Android Chrome、Mobile Safari(iOS,iPadOS)でも利用可能ですが、画面UIはモバイルデバイスに最適化されていないため使いにくい場合があります。Android Firefoxについてはデバイスの選択がうまく動作しない不具合があるためご利用はお控えください。

## 利用に必要なもの
- USBカメラ
- スピーカー・マイク

**注:**  **マイク入力が利用できないPCでは利用できません**(エラーが出て会議室に入室できません) 。PC側でマイクを無効にしている場合も同様ですので、ご注意下さい。

# 使い方

SkyWayの公式サイト[「SkyWay Conferenceの使い方」](https://webrtc.ecl.ntt.com/conf-man.html)をご覧下さい。

# FAQ

## Q.  何人まで参加できますか？
**mesh** の場合は、4名程度とお考えください。
**sfu** の場合は、PCの利用で一部屋15名程度が目安です。映像をミュートするとPCの負荷が下がるためより多くの人数で会議ができます。

## Q.通信内容はエンドツーエンドで暗号化(E2EE)されますか？
**mesh** の場合は参加者同士でエンドツーエンドで暗号化されます。
**sfu** の場合はSFUサーバで復号化するためE2EEでは有りません。SFUサーバ内で復号化されたデータは再びサーバ内で暗号化され相手に送信されるため、インターネット上を復号化されたデータが流れるわけでは有りません。また、SkyWayのSFUサーバでは通信内容の記録は一切行っておりません。

![e2ee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6651/9ba2749f-d9d0-1ea2-6e56-a6bac2016960.png)

## Q. 第三者が勝手に会議に参加することを防ぐことが出来ますか？
SkyWay Confとしては、RoomIDがわかれば参加することが出来てしまいます。対策としては、RoomIDを複雑なものにするか、SkyWay ConfのホスティングサーバにBasic認証やIPアドレス制限をかける等、外部からアクセスされないような対策をとって下さい。

## Q. SkyWay Confのビルド方法やWebサーバへの設置に関してサポートを受けることは出来ますか？
OSSですので公式のサポートは提供していません。

## Q. GithubのIssueやPullRequestには対応してくれますか？
対応しません。不具合修正や機能追加を行いたい場合は、ご自身でリポジトリをForkして行って下さい。