WebRTCの実験を、ngrokを使って外部サーバー無しで動かそう

はじめに

WebRTCの実験を行う際には、Webサーバー、シグナリングサーバーが必要になります。こちらのハンズオンでも、自分のローカル環境でWebサーバーやシグナリングサーバーを動かすようになっています。

同一PC上で実験している分には問題ありませんが、違うPC間や、モバイルデバイスとの間で通信を行おうとすると、急に厄介になります。

• ChromeやSafariの場合、localhost 以外では http:// ではカメラ/マイクにアクセスできない
• WiFiとモバイルネットワークなど、ことなるネットワークをまたがっての動作実験ができない
• 同一WiFiでも、カフェやコワーキングスペース、イベント会場などでプライバシーセパレーターが入っていると通信できない

いずれもインターネット上にWebサーバー、シグナリングサーバーを設置することで可能になりますが、少々ハードルが高いと感じることも多いのではないでしょうか。

回避策として例えば次の方法があります。

• 外部サービスを使う
  • WebサーバーにはGitHub Pagesや、FirebaseのWebホスティングを使う
  • シグナリングにはfirebaseを使ってメッセージ交換を行う
• トンネリングツールを使う
  • 例えば ngrok など

今回は後者の ngrok を使う方法を取り上げます。

ngrok とは

ローカルネットワークで動いているサーバーを、インターネットからアクセスできるように通信をトンネリングしてくれるツール＆サービスです。導入の仕方は例えばこちらの記事が参考になると思います。

• ngrokの使い方（windows, mac）

無償、有償で使える機能が異なります。ニーズに応じでプランを選ぶことができます。

• サインアップなし ... http を http/https として公開可能（非公式だがWebSocketも動作）
• サインアップあり ... tcp を公開可能
• 有償プラン ... URLを固定可能

非サインアップ/無償プランの場合は、ツールを起動するたびにURLが割り当てられます。継続的に同じURLで利用したい場合は、有償プランが選択できます。
また、セキュリティ面や安定性の面を考えると、実験用に利用することをお勧めします。

WebRTCの実験用にngrok を使ってみる

今回はこちらのWebRTCハンズオン本編で使っているサンプルの最終形を対象にします。

シグナリングサーバー

node.js でシグナリングサーバーを起動した後、ngrok を使ってWebSocketで使っている3001ポートを公開します。

node signaling.js
ngrock http 3001

ここでプロトコルとしてhttpを指定しておくと、WebSocketでも使えるようです。
ポートの公開が成功するとコンソール上にURL情報が表示されます。それをメモしておきます。

Forwarding                    http://xxxxxx.ngrok.io -> localhost:3001
Forwarding                    https://xxxxxx.ngrok.io -> localhost:3001

※ ngrock を起動しなおすとURLが変更されます。

Webサーバー

ソースの修正

同様にWebサーバーも公開しますが、今回のサンプルの場合は WebSocket のURLを先ほどメモした情報を使って書き換えておきます。

webrtc.js の9行目

• before) const wsUrl = 'ws://localhost:3001/';
• after) const wsUrl = 'wss://xxxxxx.ngrok.io/';

wsではなく、wssにしましょう。

Webサーバーの公開

Webサーバーを起動したら、そのポートを公開します。例えば 8888 ポートで動かしている場合は次のようにします。

ngrock http 8888

シグナリングサーバーと同様にポートの公開が成功するとコンソール上にURL情報が表示されます。もちろんそれもメモしておきましょう

Forwarding                    http://yyyyyy.ngrok.io -> localhost:8888
Forwarding                    https://yyyyyy.ngrok.io -> localhost:8888

あとは、2台のPCやスマートデバイスから、https://yyyyyy.ngrok.io に接続すればサンプルを使って通信ができる、ハズです。

おわりに

WebRTCを実験している最中に困るのは、外部サーバーが必要になるところだと思います。まずはこんな方法でスタートしてみてはいかがでしょうか？

本格的に使うためには、自分でサーバーを立てるかWebRTCプラットフォームのサービスを利用するのことになりますが、そのための判断材料を集めることができると思います。

補足

ngrok で公開できるのは、TCPだけのようです。UDPをトンネルすることはできませんので、UDPがふさがったネットワーク間で通信するには、TURNサーバーが別途必要になります。