SkyWayのP2P-video-chatが簡単に実装できるNode-REDノードを作った

SkyWayを使えば簡単にビデオチャットが実装できるのですが、
さらに簡単に実装できるようNode-RED用のSkyWayノードを自作しました。
コードは以下のGitHubリポジトリにあげてます。
https://github.com/TakedaHiromasa/node-red-contrib-skyway
<img width="400" alt="flowSample.png" src="https://qiita-image-store.s3.amazonaws.com/0/259617/282e0fe1-0b4f-5cf5-ccc3-94add1bbe10c.png">

# 事前準備とインストール
#### 事前準備
事前にSkyWayの<code>APIキー</code>を発行してください。
また、SkyWayの<code>利用可能ドメイン</code>にデプロイ先のホスト名を追加してください。
それから、現在このノードはまだβ版ということでローカル環境のNode-REDでしかデバッグしてません。
もしかしたら`enebular`や`IBM Bluemix`では動かないかも。

#### インストール
現在npmライブラリに登録していないため、node-redの`パレットの管理`からはインストールできません。
  
**step1.**
[リポジトリ](https://github.com/TakedaHiromasa/node-red-contrib-skyway)をクローンします。
**step2.**
Node-REDユーザーディレクトリ（通常 `~/.nodered`)に移動します。

```
cd ~/.nodered
```
**step3.**
`npm i`でcloneしたリポジトリを指定します。

```
npm i <cloneしたディレクトリ>/node-red-contrib-skyway
```

# 使い方
### フローの作成
<img width="400" alt="flowSample.png" src="https://qiita-image-store.s3.amazonaws.com/0/259617/282e0fe1-0b4f-5cf5-ccc3-94add1bbe10c.png">
上記のようなフローが基本的な形です。
`skyway p2p`は`GETリクエスト`の入力で発火するので、
ノードの入力には必ず`http In`ノードを含めてください。
出力は二つあって、それぞれ出力内容はいかの通りです。

| 出力 | 内容 |
|:-:|:-:|
| htmlout | SkyWay P2P video chat を構成する雛形htmlを出力。 |
| myPeerId | getリクエストをトリガーに、自身のPeerIdを出力。 |

どちらも`msg.payload`に`string`形式で出力します。

### 設定
<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/259617/bb788ddc-ede9-ed4e-b15c-51e93d3406af.png">

| 項目 | 内容 |
|:-:|:--|
| API key | SkyWayのAPIキーを入力してください |
| PeerId  | Call相手が決まっている場合、相手のPeerIdを入力してください |
| Auto Call | チェックを入れると、Webが表示されたと同時に上記の`PeerId`に設定した相手に自動でCallします。 |
|Debug Level| 実行時のデバッグレベルです。<br>最高レベルにすると全てのデバッグ情報がブラウザのconsoleに出力されます。 |
|Video Size| Webページに設置するVideoタグのサイズ設定です。 |

### 実行する前に
`http response`ノードによって、Webページが表示される場所のドメイン名をSkyWayに登録します。
localホストで実行しているNode-REDであれば、
`localhost` `127.0.0.1`などを利用可能ドメインに登録しましょう。
※ちなみに二つとも別のドメインとして扱われます。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/259617/56e117b2-ab6b-2f87-1501-f48112ab12e4.png">


### 実行
デプロイして`http In`ノードに設定したURLにアクセスしてみましょう。
すると、初めてアクセスした方は(Chromeであれば)メディアアクセスの許可を求めるダイアログが出て、それを許可すると以下のような画面が表示されると思います。(画像はCall後)
<img width="700" alt="flowSample.png" src="https://qiita-image-store.s3.amazonaws.com/0/259617/b59d86d2-09e4-04e4-2668-95c537ada743.png">
これで、p2pのビデオチャットができます。

### 工夫
出力されるビデオチャットの雛形は`<div class="SkyWay-area">`で囲われているため、タグを操作してうまい具合にWebに組み込んだりしてみるといいかもしれません。
(Webの知識がないのでよくわからない)

# 仕組み
わかりづらいですが、以下が動作の概要図です。
![図.002.png](https://qiita-image-store.s3.amazonaws.com/0/259617/3005022f-bd4c-a52e-04f1-7bb642063236.png)
エンドポイントへのGETリクエストにより、まずNodeはhtmlをクライアントへ返します。
そして、htmlの`<head>`に書かれている

```
<script type="text/javascript" src="/js/SkyWay.js"></script>
```
によって、`/js/SkyWay.js`へGETリクエストが発行されます。
Node側は`/js/SkyWay.js`のエンドポイントに来たGETリクエストを受信し、`SkyWay.js`をクライアントへ返します。
これで、クライアント側の`SkyWay.js`の処理が始まり、Peerオブジェクトを作り始めます。
Peerオブジェクトが生成できたら、`/peer`のエンドポイントを介してPOSTでPeerIDをNode側に送信します。

本当はNode側でPeerオブジェクトを生成して実行したかったのですがSkyWay-js-SDKがwindow依存だったのでうまくいきませんでした・・・
そのことについてはこちらの記事でも言及されています。
> 「Node環境でSkyWayしようと思ったが秒で心が折れた話」
> https://qiita.com/pokiiio/items/2a26b08aedca722b0444

結果的に結構ゴリ押しでデータをやり取りしているような状況です。
いい改善案が思いつく方は是非コードを改変してみてください。

# まとめ
Web系の知識もなければ、Node.jsを書いたこともなく、ましてやNode-REDの自作ノードなんて作ったこと無い中で「勉強になるかな・・・」と思って作り始めてみたものの、形になるまでとてつもなく大変でした。
ノードを作っている方たちはすごいですね。
怖くてまだ`npm publish`はしていませんが、いつか公開できればと思います。