Experts.jp日本に、もっとエキスパートを。2014年に連載した「WebRTCを使ってみよう!」シリーズのアップデート記事も3回目となりました。今回は、前回の「手動」で行ったP2P通信の準備を、自動で行えるようにしてみましょう。シグナリングサーバーを立てよう前回は手動でコピー&ペーストを行い、WebRTCのP2P通信を始めるために次の情報を交換しました。candidate今回はこれを仲介するサーバー(シグナリングサーバー)を動かしてみましょう。方法として次の2つをご用意しました。Node.jsを使ったシグナリングサーバーChromeアプリNode.jsを準備しようまず、WebSocketを使ってシグナリングを行う方法をご紹介します。WebSocketの扱いやすさから、ここではNode.jsを使います。(もちろん他の言語を使っても同様にシグナリングサーバーを作ることができます)こちらの公式サイトから、プラットフォームに対応したNode.jsを入手してインストールしてください。Node.jsのインストールが完了したら、次はWebSocketサーバー用のモジュールをインストールします。次のコマンドを実行してください。※必要に応じて、sudoなどをご利用ください。ws※以前の連載ではsocket.ioを使いましたが、今回はよりプリミティブなwsを使っています。シグナリングサーバーを動かそう次のコードを好きなファイル名で保存してください。ws2);}ポート番号は必要に応じて変更してください。次のコマンドを実行します。signaling.jsシグナリングサーバーの動作はシンプルで、クライアントからメッセージを受け取ったら他のクライアントに送信するだけです。Chromeアプリを使う場合は場合によってはNode.jsをインストールして動かすのは、ハードルが高くて難しいケースもあるかもしれません。server」というものを作ってみました。Chromeを利用したアプリとしてインストールし、アプリタブから起動して利用します。ChromeOS)で動くはずです。クライアントからの接続を待ち受けます。※実装があまいので時々不安定になります。その場合は[restart]ボタンを押してリセットし、ブラウザもリロードして接続しなおしてください。シグナリング処理を変更しようそれでは前回の手動シグナリングのコードを、少しずつ変更していきましょう。WebSocketで用意したシグナリングサーバーに接続します。JavaScriptに次の処理を追加してください。err);};次に、WebSocketでメッセージを受け取った場合の処理を追加します。RTCSessionDescription(message);setAnswer(answer);}};JSONテキストからオブジェクトを復元し、typeに応じて前回用意したsetOffer()/setAnswer()を呼び出し、RTCPeerConnectionに渡しています。SDPの送信Offer/AnswerのSDPの送信も、WebSocket経由で行います。前回要したsendSdp()を次のように変更します。message);ws.send(message);}SDPをJSONテキストに変換してWebSocketでシグナリングサーバーに送信しています。実際に動かしてみようシグナリングサーバーを起動して、ChromeかFirefoxのウィンドウを2つ開いて修正したHTMLを読み込んでください。ChromeとFirefoxの間で通信することもできます。サンプルを公開しているので、そちらで試すこともできます。その場合でもシグナリングサーバーは自分で用意する必要があるのでご注意ください。Video]ボタンをクリックします。カメラのアクセスを許可すると、それぞれリアルタイムの映像が表示されます。通信開始どちらかのウィンドウで[Connect]ボタンを押します。candidateを含む)が自動で交換され、(4)ビデオ通信が始まります。手動シグナリングに比べて操作がずっと簡単になりました。これなら実際に利用できそうですね。流れはこのような形になります。candidateが出そろう前にP2P通信が確立する(ことがある)メリットがあります。SDPを生成したら、すぐに相手に送るように変更します。candidateを収集した際も、すぐに送るように変更します。candidateをWebSocket経由で受け取った場合の処理も追加しましょう。candidateを受け取ったら、その度にRTCPeerConnection.addIceCandidate()で覚えさせます。exist!');return;}}さあ、これで修正は完了です。ICEの場合と同じです。シグナリングサーバーを起動して、ChromeかFirefoxのウィンドウを2つ開いて修正したHTMLを読み込んでください。Video]→[Connect]です。見た目も特に変わりはありません。したら人によっては早く繋がるのを実感できるかもしれません。Pages/GitHubも用意しています。ws_signaling_1to1_trickle.html2台のPC間の通信ここまできたら、せっかくなので2台の別々のPCで通信してみたくなります。同じネットワークに属するPC同士ならば通信できるはずです。例として次のような状況を考えてみましょう。2台のPCがある前者(192.168.0.2)のポート:8080でWebサーバー、ポート:3001でNode.jsのシグナリングサーバーが動いているFirefoxの場合は、接続するURLを変更すれば問題なく動きます。やっかいなのはChromeの場合です。例外的な扱いで許可されているきちんと対処すると、次のような対策が必要です。試すにはハードルが高いですよね。暗号化通信を使うように設定そこで実験的に無理やり動かすには、次のような方法があります。Webサーバーとシグナリングサーバーは同一である必要はなく、また異なるWebサーバーでも構わないことを利用しています。お勧めはしませんが、どうしてもやりたい場合の参考としてどうぞ。次回は今回はNode.jsとWebSocketを使ったシグナリングを実現しました。残念ながら今回の仕組みでは、1対1の通信しか行うことができません。次回はこれを拡張し、複数人で同時に通信できるようにしたいと思います。オマケ:WebRTCの仕様の差分のおさらいオマケとして、今回のWebRTC再入門2016シリーズで取り上げているWebRTC関連仕様の変更箇所について、おさらいしおきましょう。Chromeではフラグ指定が必要ベンダープレフィックスの除去Firefoxでは、主要なオブジェクトのベンダープレフィックスが取れた。setRemoteDescription()メディアストリーム処理の新しいイベントハンドラontrack()が追加、onaddstream()は非推奨Firefoxではサポート済、Chromeでは未サポート仕様は常に更新されていますし、ブラウザの実装状況も異なります。最新の情報もご確認ください。