がねこまさし

WebRTC初心者でも簡単にできる!Node.jsで仲介(シグナリング)を作ってみよう

  • 3
  • 9
  • 85

こんにちは! がねこまさしです。前回はWebRTCの通信を手動でつなぎましたが、今回は仲介役のサーバーを作ってみましょう。

※今回の内容は、Node学園祭2013で発表した内容(の一部)とほぼ同じです。その時の資料もご参照ください。

※こちらの記事は2014年に書かれました。2016年7月のアップデート記事がありますので、そちらもご参照ください。

シグナリングサーバーを立てよう

前回は手動でコピー&ペーストしてシグナリングを実現しました。今回はそれを楽にしましょう。

シグナリングサーバーはどうして必要なの?

シグナリングの過程では、お互いのIPアドレスやポート番号を渡す必要があります。この段階ではお互いIPアドレスを知らないので直接やりとりできません。そこで、仲介役となるシグナリングサーバーが必要となります。このサーバーは、どちらブラウザもIPアドレスを知っていることが前提となります。
signaling_server
つまり、Peer-to-Peer通信の開始前には、普通のサーバー/クライアント型の通信が行わることになります。

Node.jsを準備しよう

今回はシグナリング処理をWebSocketを使って実現してみます。ソケットの処理が実現できればどのような言語でも構わないのですが、メッセージング処理が得意なNode.jsを使うことにします。 Node.jsのインストーラーをこちらのサイトから入手し、手順に従ってインストールしてください。Windows,Mac OS X,Linux用のバイナリが用意されています。今回のサンプルはv0.10.15で動作確認していますが、v0.10.x系ならばそのまま動くはずです。

Node.jsのインストールが完了したら、こんどはWebSocket用のモジュールをインストールします。コマンドプロンプト/ターミナルから、 次のコマンドを実行してください。 ※必要に応じて、sudoなどをご利用ください。

socket.ioは、異なる種類のブラウザ間の通信を簡単に行えるようにしてくれるモジュールです。異なる複数の通信方式をサポートしています。

  • ‘websocket’ , ‘flashsocket’ , ‘htmlfile’ , ‘xhr-polling’ , ‘jsonp-polling’

シグナリングサーバーを動かそう

次のコードを好きなファイル名で保存してください。(例えば signaling.js)

起動するにはコマンドプロンプト/ターミナルから、 次のコマンドを実行してください。

シグナリングサーバーの動作は単純で、右からきたメッセージをそのまま左に流すだけです。

シグナリング処理を変更しよう

それでは前回のHTMLを、少しずつ変更して行きましょう。まず、socket.ioのクライアント用JavaScriptを読み込みます。localhostの部分は、実際のシグナリングサーバーに変更してください。


次に、socket.ioの接続、通信処理をJavaScriptに追加します。

重要なのはonMessage()の処理で、Offer SDP,Answer SDP,ICE Candidateのそれぞれに対応して、前回用意したOnOffer(), onAnswer(), onCandidate()を呼び出しています。

今度は実際にSDP/ICE Candidateを送る部分を変更します。前回はテキストエリアに表示するだけでしたが、今回はそれをsocket.io経由で送信します。

最後は、ちょっとしたフラグの処理の追加です。

実際に動かしてみよう

シグナリングサーバーが動いてることを確認したら、Chromeのウィンドウを2つ開いて修正したHTMLを読み込んでください。

(1) 両方のウィンドウで[Start video]ボタンをクリックします。カメラのアクセスを許可すると、それぞれリアルタイムの映像が表示されます。
signaling_1

(2) どちらかのウィンドウで[Connect]ボタンを押します。SDP, ICE Candidateが自動で交換され、ビデオ通信が始まります。
signaling_2
前回の14ステップに比べて、ぐっと減って2ステップになりました。これなら使えそうですね。

シグナリングの流れを追ってみる

シグナリングの流れを追跡してみましょう。前回はコード上を追っかけたので、今回は流れを図で見てみます。

SDPの交換

signaling_sdp
SDPのOffer, Answerが、シグナリングサーバー経由で交換されます。

ICE Candidateの交換

signaling_ice
複数のICE Candidateが飛び交い、すべての交換が終わるとPeer-to-Peer通信が始まります。

次回は

今回はシグナリングサーバーを動かして、Peer-to-Peer通信確立までを自動化しました(それが普通ですけど)。実は今回の仕組みでは、一つのシグナリングサーバーで同時に2人までしか通信できません。まったく実用的ではありません。次回は複数人での通信にチャレンジする予定です。

今回のソース

最後に、今回使ったHTMLを掲載しておきます。

<バックナンバー>

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer SkyWay spdy TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket