Noodlを簡易Web/MQTTサーバとしてビデオ通話システムを構築する

## 概要
最近はコロナウィルスの影響でStayHomeすることが多くなっています。
3密を避ける生活をしていると、密なコミュニケーションを取り続けることが、より大切になってきていると感じます。
そこで遠隔とのコミュニケーションに役立つWebRTC（Web Real-Time Communication）について調べてみました。

今回はNoodlを簡易Webサーバとして利用し、ビデオ・音声通話基盤のSkyWayを使ったアプリケーション(1対1のビデオ通話システム)を試します。

## 技術要素
- WebRTC:ブラウザ上でリアルタイム通信する技術
- SkyWay:ビデオ・音声通話のためのマルチプラットフォームSDK
- Noodl：ビジュアルプログラミングツール(今回は簡易Webサーバとして利用）

## 1. SkyWayのセットアップ
まずは[SkyWay](https://webrtc.ecl.ntt.com/)のサイトでアカウントを作成し、アプリケーションをつくります。
1.トップページから「無料で始める」ボタンを押します。
![img0011_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/8c3bee6f-38be-c3ec-5c46-7800d34e853f.png)

2.次に「Community Edition（無料版）に登録する」でメールアドレス、パスワードを登録します。
無料版/有料版の比較・詳細は[こちら](https://webrtc.ecl.ntt.com/pricing.html)で確認してください。

![img0012_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/b92c8098-503f-9868-d8ed-8b3c4c6d9a4f.png)

3.「登録する」をクリックすると、入力したメールアドレス宛に認証メールが届くので、リンクをクリックし認証します。

## 2. SkyWayでアプリケーションを作成する
メール認証をしたら、再度ログインをして開発者用ダッシュボードに進みます。
1.「新しくアプリケーションを作成する」からSkyWayアプリケーションを作成します。アプリケーション説明文に`P2P-media`(任意)、利用可能ドメイン名には`localhost`を入力します。

![img0014_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/f09c98bc-a53e-0386-b0c9-02248473b96d.png)

2.その他の権限[^1]についてはデフォルトのままとし、アプリケーションを作成します。

![img0009_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/99d74fed-2937-d4a3-3d89-addc0eb52007.png)

3.アプリケーションが作成されるとAPIキーが作成されるので、これをメモします。
![img0017_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/2d4670c5-84e7-1a31-9119-8119391e6013.png)

## 3. SkyWayサンプルコードのダウンロード
1.次に、SkyWay公式のGitHubから[サンプルコード](https://github.com/skyway/skyway-js-sdk)をCloneします。
今回は1対1のビデオ通話のサンプルコードを使うので、
`examples/p2p-media`と`examples/_shared`フォルダを使います。
![img0022_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/b75db0a8-4c93-0dc1-4a95-1a034102724c.png)

2.`examples/_shared/key.js`ファイルを開いて取得したAPIキーを転記します。

```js:key.js
window.__SKYWAY_KEY__ = '先ほどメモしたAPIキー';

```

## 4. Noodlを簡易Webサーバとする
あとは上記ファイルをWebサーバに配置するだけです。
ここでは簡易WebサーバとしてNooldを使います。
なお、外部サーバで確認したい場合はSkyWayの「設定変更」から利用可能ドメインに対象のサーバドメインを追加しておいてください。例えば`yur-site/github.io`などです。

1.Noodlを起動し、新たにProjectを作成します。Projectはクラウド上ではなくローカルPC(Save locally)を選択してください。この時点でWebサーバが起動します。

![img0023_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/8397787b-32ec-465a-468f-8792d9f1af4e.png)

2.プロジェクトフォルダを開くためにNoodlのギアマークからプロジェクトフォルダを開いてください。

3.プロジェクトフォルダにp2p-mediaフォルダと_sharedフォルダをコピーしてください。

![img0027_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/0c0c0d8a-ce6f-6e6d-070a-0cc9ca3e7839.png)


4.これで準備ができましたので、さっそくブラウザ上からサンプルファイルにアクセスします。ChromeなどWebcamに対応しているブラウザでアクセスしてみてください。
Noodlの簡易サーバは`ポート8574`で起動し、プロジェクトフォルダは'/external/viewer/'以下に展開されます。
Webcamはセキュリティの問題でlocalhostへのHTTP通信かHTTPS通信のサイトでなければ実行できません。そのためURLはこちらでアクセスすることなります。

>http://localhost:8574/external/viewer/p2p-media/index.html

カメラにアクセスしても良いか確認のダイアログが表示されます。OKすればカメラの映像が表示されるはずです。

![img0029_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/b392686d-40f1-6092-6c74-f0b571dd1431.png)

![img0030_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/f79a1f5e-1bc5-7c28-c348-86b7ff03b640.png)
これでビデオ通話システムが起動します。うまくいけば実行後の画面はこちらになります。

![img0031_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/6bca8750-b808-1932-0151-b1e0bc13fd07.png)

---
## まとめ
SkyWayを使うと簡単にビデオ通話システムが構築できました。
同様の手順でサンプルから1対1のテキストチャット・1対多のビデオ会議システムも試すことができます。

本当はNoodlのビジュアルプログラミングを使って構築したかったのですが、NoodlのJavascriptノードでWebcamera、videoの扱い方がよくわかりませんでした。今回はサンプルの実行までとなります。

## 参考
[OSSを使って独自のWeb会議アプリ(SkyWay Conf)を立てる方法](https://qiita.com/yusuke84/items/e86501810acaa146195d)
[スマホとPCでビデオ通話できるWebページを作ってみた](https://qiita.com/arene-calix/items/129dddd0d9db8f3f516f)
[【爆速！】5分でビデオチャットを構築する](https://qiita.com/kolife/items/6b771676d7558254b3a6)


[^1]: TURNサーバ：社内ネットワークなど、NAT超えが必要な環境下の端末との通信を実現する中継サーバ。SFUサーバ：多拠点通信にて、端末の負荷を下げる中継サーバ