SkyWayのP2PVideoサンプルをenebularで動かしてみよう

今回はSkyWayのP2PVideoサンプルをenebularで動かしてみます。

SkyWayとは

SkyWay – Enterprise Cloud WebRTC Platform

image

ビデオ・音声通話・データ通信といったリアルタイムコミュニケーションの標準技術である「WebRTC」を構築・運用できるサービスです。本来、WebRTCというと、実装していくと、なにかしらのサーバー基盤を作る必要があるのですが、そこを肩代わりしてくれるので、手軽に利用できます。

今回のコンセプト

SkyWayは使う上でのサンプルがいろいろと揃っています。

skyway-js-sdk/examples/p2p-videochat at master · skyway/skyway-js-sdk

今回はこちらの1 on 1のビデオチャットのサンプルを利用します。

image

enebularは何をするかというと、表示側を担当します。

SkyWayでアプリケーション作成

SkyWayでアカウントを取得し、アプリケーションを作っていきます。

image

まず作成開始。

image

アプリケーション作成画面では、

  • アプリケーション説明文
    • わかりやすい名前を設定
  • 利用可能ドメイン名
    • *.herokuapp.com

としておきます。 ここで、*.herokuapp.com とするのは、enebularのエディタで一時的に検証するときでも、その後、Heroku Deployするときでも使えるようにするためです。

image

ほかは、そのままの設定でアプリケーション作成ボタンを押します。

書き出されたらAPIキーをメモしておく

無事、アプリケーションが作成されたら、APIキーをテクストエディタなりにメモしておきます。

image

Discover Flow

つづいて、enebularのプロジェクトに今回のフローを読み込んでおきましょう。

以下の、Discover FlowからForkします。

enebular

image

フローを編集する(APIキー反映)

Forkできたらフローを編集します。

image

フローはこのようになっています。

skyway-js-sdk/examples/p2p-videochat at master · skyway/skyway-js-sdk

冒頭で紹介したサンプルのHTML・JavaScript・CSSのファイルをうまくレスポンスする形にしています。

JavaScriptソースにAPIキーを反映する

ということで、一つだけソースを編集します。

image

このノードをダブルクリックすると、出力されるJavaScriptのソースが表示されます。

image

ソースの冒頭に書かれている、

<<<MY_API_KEY>>>

部分を編集します。

仮に、

ABCDEFG12345678

がAPIキーとしたら、

image

と記入します。

image

編集できたら、デプロイボタンを押して設定を反映します。これで準備完了です。

試してみる

では試してみましょう。今回設定したURLを表示します。

image

Flow Editorの右上の i のアイコンをマウスを乗せてURLを確認します。

image

今回把握したエディタのURL/index.html

という形でChromeでアクセスします。

image

カメラ・マイクを許可すると、表示されます!

image

他のIDとやり取りするために、自分のIDをテキストエディタなりにメモしておきます。

他のPCやスマホと通信してみる

ではいよいよ、他のPCやスマホと通信してみましょう。

image

他のPCやスマホのブラウザで同じURLにアクセスします。

image

先ほどのIDを記入してCallを押します。

image

無事表示されました!

可視化のさらなるアプローチとしてのビデオストリーミング

可視化にはグラフや通知などいろいろな伝え方がありますが、可視化のさらなるアプローチとしてのビデオストリーミングがSkyWayによって体験できました。

今回は、enabularはビデオチャットを表示するHTML/CSS/JavaScript表示側に徹していますが、これができると、enebularが得意とするIoTデータの可視化と連動することができます。

例えば、IoTデータの重要なアラートが出た場合、多くの場合、現地へ確認するという行動が生じますが、そこをビデオチャット機能はSkyWayに担ってもらい、より遠隔の効果を高めるということもできるでしょう。

SkyWayとenebularの連携、是非、楽しんでみてください!

注意点:実際に運用するときは

実際に運用されるときの注意点です。今回のフローエディターで表示されているURLは一時的なもので、すぐ動作を体験したいときは良いですが、実際に運用するときには向きません。

たとえば、URLが一定時間で変化したりインスタンスの制限があります。

ということで、もし運用をしたくなったら、enebularで作った動作を書き出すDeployを行いましょう。

私の場合は、HerokuにDeployするHeroku Deployをよく利用しています。こちらはHerokuアカウントを持っているとすぐ使えるためで重宝します。今回もフローエディタで試したあと、Heroku Deployを行って運用しました。