SkyWayを使えば簡単にビデオチャットが実装できるのですが、
さらに簡単に実装できるようNode-RED用のSkyWayノードを自作しました。
コードは以下のGitHubリポジトリにあげてます。
https://github.com/TakedaHiromasa/node-red-contrib-skyway
事前準備とインストール
事前準備
事前にSkyWayのAPIキー
を発行してください。
また、SkyWayの利用可能ドメイン
にデプロイ先のホスト名を追加してください。
それから、現在このノードはまだβ版ということでローカル環境のNode-REDでしかデバッグしてません。
もしかしたらenebular
やIBM Bluemix
では動かないかも。
インストール
現在npmライブラリに登録していないため、node-redのパレットの管理
からはインストールできません。
step1.
リポジトリをクローンします。
step2.
Node-REDユーザーディレクトリ(通常 ~/.nodered
)に移動します。
cd ~/.nodered
step3.
npm i
でcloneしたリポジトリを指定します。
npm i <cloneしたディレクトリ>/node-red-contrib-skyway
使い方
フローの作成
![flowSample.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F259617%2F282e0fe1-0b4f-5cf5-ccc3-94add1bbe10c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a1ffe3a422ce7233a5c9a4383718d4f2)
出力 | 内容 |
---|---|
htmlout | SkyWay P2P video chat を構成する雛形htmlを出力。 |
myPeerId | getリクエストをトリガーに、自身のPeerIdを出力。 |
どちらもmsg.payload
にstring
形式で出力します。
設定
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F259617%2Fbb788ddc-ede9-ed4e-b15c-51e93d3406af.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6320fbe2fe3ce45c3a951dd9d01579ae)
項目 | 内容 |
---|---|
API key | SkyWayのAPIキーを入力してください |
PeerId | Call相手が決まっている場合、相手のPeerIdを入力してください |
Auto Call | チェックを入れると、Webが表示されたと同時に上記のPeerId に設定した相手に自動でCallします。 |
Debug Level | 実行時のデバッグレベルです。 最高レベルにすると全てのデバッグ情報がブラウザのconsoleに出力されます。 |
Video Size | Webページに設置するVideoタグのサイズ設定です。 |
実行する前に
http response
ノードによって、Webページが表示される場所のドメイン名をSkyWayに登録します。
localホストで実行しているNode-REDであれば、
localhost
127.0.0.1
などを利用可能ドメインに登録しましょう。
※ちなみに二つとも別のドメインとして扱われます。
実行
デプロイしてhttp In
ノードに設定したURLにアクセスしてみましょう。
すると、初めてアクセスした方は(Chromeであれば)メディアアクセスの許可を求めるダイアログが出て、それを許可すると以下のような画面が表示されると思います。(画像はCall後)
これで、p2pのビデオチャットができます。
工夫
出力されるビデオチャットの雛形は<div class="SkyWay-area">
で囲われているため、タグを操作してうまい具合にWebに組み込んだりしてみるといいかもしれません。
(Webの知識がないのでよくわからない)
仕組み
わかりづらいですが、以下が動作の概要図です。
エンドポイントへの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
はしていませんが、いつか公開できればと思います。