Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

SkyWayを使えば簡単にビデオチャットが実装できるのですが、
さらに簡単に実装できるようNode-RED用のSkyWayノードを自作しました。
コードは以下のGitHubリポジトリにあげてます。
https://github.com/TakedaHiromasa/node-red-contrib-skyway
flowSample.png

事前準備とインストール

事前準備

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

インストール

現在npmライブラリに登録していないため、node-redのパレットの管理からはインストールできません。

step1.
リポジトリをクローンします。
step2.
Node-REDユーザーディレクトリ(通常 ~/.nodered)に移動します。

cd ~/.nodered

step3.
npm iでcloneしたリポジトリを指定します。

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

使い方

フローの作成

flowSample.png
上記のようなフローが基本的な形です。
skyway p2pGETリクエストの入力で発火するので、
ノードの入力には必ずhttp Inノードを含めてください。
出力は二つあって、それぞれ出力内容はいかの通りです。

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

どちらもmsg.payloadstring形式で出力します。

設定

項目 内容
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後)
flowSample.png
これで、p2pのビデオチャットができます。

工夫

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

仕組み

わかりづらいですが、以下が動作の概要図です。
図.002.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はしていませんが、いつか公開できればと思います。

dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした