今回はSkyWayのP2PVideoサンプルをenebularで動かしてみます。
SkyWayとは
SkyWay – Enterprise Cloud WebRTC Platform
ビデオ・音声通話・データ通信といったリアルタイムコミュニケーションの標準技術である「WebRTC」を構築・運用できるサービスです。本来、WebRTCというと、実装していくと、なにかしらのサーバー基盤を作る必要があるのですが、そこを肩代わりしてくれるので、手軽に利用できます。
今回のコンセプト
SkyWayは使う上でのサンプルがいろいろと揃っています。
skyway-js-sdk/examples/p2p-videochat at master · skyway/skyway-js-sdk
今回はこちらの1 on 1のビデオチャットのサンプルを利用します。
enebularは何をするかというと、表示側を担当します。
SkyWayでアプリケーション作成
SkyWayでアカウントを取得し、アプリケーションを作っていきます。
まず作成開始。
アプリケーション作成画面では、
- アプリケーション説明文
- わかりやすい名前を設定
- 利用可能ドメイン名
- *.herokuapp.com
としておきます。 ここで、*.herokuapp.com とするのは、enebularのエディタで一時的に検証するときでも、その後、Heroku Deployするときでも使えるようにするためです。
ほかは、そのままの設定でアプリケーション作成ボタンを押します。
書き出されたらAPIキーをメモしておく
無事、アプリケーションが作成されたら、APIキーをテクストエディタなりにメモしておきます。
Discover Flow
つづいて、enebularのプロジェクトに今回のフローを読み込んでおきましょう。
以下の、Discover FlowからForkします。
フローを編集する（APIキー反映）
Forkできたらフローを編集します。
フローはこのようになっています。
skyway-js-sdk/examples/p2p-videochat at master · skyway/skyway-js-sdk
冒頭で紹介したサンプルのHTML・JavaScript・CSSのファイルをうまくレスポンスする形にしています。
JavaScriptソースにAPIキーを反映する
ということで、一つだけソースを編集します。
このノードをダブルクリックすると、出力されるJavaScriptのソースが表示されます。
ソースの冒頭に書かれている、
<<<MY_API_KEY>>>
部分を編集します。
仮に、
ABCDEFG12345678
がAPIキーとしたら、
と記入します。
編集できたら、デプロイボタンを押して設定を反映します。これで準備完了です。
試してみる
では試してみましょう。今回設定したURLを表示します。
Flow Editorの右上の i のアイコンをマウスを乗せてURLを確認します。
今回把握したエディタのURL/index.html
という形でChromeでアクセスします。
カメラ・マイクを許可すると、表示されます！
他のIDとやり取りするために、自分のIDをテキストエディタなりにメモしておきます。
他のPCやスマホと通信してみる
ではいよいよ、他のPCやスマホと通信してみましょう。
他のPCやスマホのブラウザで同じURLにアクセスします。
先ほどのIDを記入してCallを押します。
無事表示されました！
可視化のさらなるアプローチとしてのビデオストリーミング
可視化にはグラフや通知などいろいろな伝え方がありますが、可視化のさらなるアプローチとしてのビデオストリーミングがSkyWayによって体験できました。
今回は、enabularはビデオチャットを表示するHTML/CSS/JavaScript表示側に徹していますが、これができると、enebularが得意とするIoTデータの可視化と連動することができます。
例えば、IoTデータの重要なアラートが出た場合、多くの場合、現地へ確認するという行動が生じますが、そこをビデオチャット機能はSkyWayに担ってもらい、より遠隔の効果を高めるということもできるでしょう。
SkyWayとenebularの連携、是非、楽しんでみてください！
注意点：実際に運用するときは
実際に運用されるときの注意点です。今回のフローエディターで表示されているURLは一時的なもので、すぐ動作を体験したいときは良いですが、実際に運用するときには向きません。
たとえば、URLが一定時間で変化したりインスタンスの制限があります。
ということで、もし運用をしたくなったら、enebularで作った動作を書き出すDeployを行いましょう。
私の場合は、HerokuにDeployするHeroku Deployをよく利用しています。こちらはHerokuアカウントを持っているとすぐ使えるためで重宝します。今回もフローエディタで試したあと、Heroku Deployを行って運用しました。