Experts.jp日本に、もっとエキスパートを。2014年に連載した「WebRTCを使ってみよう!」シリーズを、2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしています。1回目はカメラにアクセスしてみました。2回目となる今回は、WebRTCの通信の仕組みを実感するために、「手動」でP2P通信をつなげてみましょう。WebRTCの通信はどうなっているの?WebRTCでは、映像/音声/アプリケーションデータなどをリアルタイムにブラウザ間で送受信することができます。それをつかさどるのが「RTCPeerConnection」です。RTCPeerConnectionには3つの特徴があります。P2P通信の前に鍵の交換を行う多少の情報の欠落があっても許容する替わりに、通信のリアルタイム性を重視しています。65535の範囲が使われるようです。P2P通信を確立するまでブラウザ間でP2P通信を行うには、相手のIPアドレスを知らなくてはなりませんし、動的に割り振られるUDPのポート番号も知る必要があります。その通信でやり取りできる内容についても、お互い合意しておく必要があります。そのためP2P通信が確立するまでに、WebRTCではいくつかの情報をやり取りしています。(SDP)各ブラウザが通信した内容を示し、テキストで表現されます。次のような情報を含んでいます。CandidateP2P通信を行う際にどのような通信経路が使えるかは、お互いのネットワーク環境に依存します。Candidate」になります。WebRTCの通信を始める前に、可能性のある候補がリストアップされます。候補が見つかったら順次通信を試み、最初につながった経路が採用されます。手動シグナリングを実験してみようこのように、P2Pを始めるまでの情報のやり取りを「シグナリング」と言います。実は、WebRTCではシグナリングのプロトコルは規定されていません(自由に選べます)。シグナリングを実現するにはWebSocketを使うなど複数の方法がありますが、今回は最も原始的な方法であるコピー&ペーストを試してみましょう。長いですが、こちらのHTMLをお好きなWebサーバーに配置してください。Pagesでも公開していますので、すぐに試すことができます。51でアクセスしてみてください。http://localhost/~のWebサーバーが必要になります)残念ながら今回はEdgeでは利用できません。通信するために2つページを開く必要があります。2014年のものよりも簡略化しました。それでも間違えやすいので慎重に操作してくださいね。Video]ボタンをクリックします。カメラのアクセスを許可すると、それぞれリアルタイムの映像が表示されます。左のウィンドウで[Connect]ボタンをクリックしてください。send:]のテキストエリアに、ドバドバっとSDPの文字列が表示されます。receive:]の下のテキストエリアにペーストします。send:]のテキストエリアに、ドバドバっとSDPの文字列が表示されます。receive:]の下のテキストエリアにペーストします。SDP]ボタンをクリックします。すると(~数秒)P2P通信が始まり両方のウィンドウに2つ目の動画が表示されるはずです。上手くいかなかった場合は、コピー範囲が欠けているか、手順が抜けている可能性があります。深呼吸してから両方のブラウザをリロードし、もう一度試してみてください。それでも通信できない場合は、実はネットワーク環境の問題の可能性があります。この記事の「トラブルシューティング」の章をご覧ください。(あるいはソースのバグや、説明の不備の可能性もあります。何かお気づきの際にはご指摘ください)トラブルシューティングこれまで何度も手動シグナリングを試して/試していただいて、通信ができないケースがありました。当初は原因が分からなかったのですが、その後に判明したケースを説明します。外部ネットワークにつながっていない場合PCが全くネットワークに接続されていない状態では、カメラ映像の取得に成功しても通信ができません。Candidateが収集できないためです。同一PC内で通信を行う場合にも、外部に接続できる状態で利用する必要があります。ハンズオン等で手動シグナリングを試してもらうことがあるのですが、長いことこの制約に気が付かず通信できないで悩んでいました。Firefox間でも通信することができます。手動シグナリングでも同様です。間で手動シグナリングを行おうとすると、カメラ映像の取得で衝突してしまうケースがあります。※この場合は片方向の映像通信となります裏側で起こっていることそれでは映像通信に成功したところで、その裏側で起きていることを見てみましょう。ICEWebRTCのP2P通信を確立するためのシグナリングでは、次の2種類の情報を交換する必要があると説明しました。candidateところが今回の手動シグナリングではSDPしか交換していません。Candidateの情報は、今回交換しているSDPの中に含まれています。実際に私のPCで取得したSDPの一部を掲載します。candidateになります。(※仮想化ソフトを入れている影響で複数のネットワークが候補になっています)。candidateが収集されるにしたがって、SDPの中に追加されます。candidateが出そろった後に、SDPとまとめて交換しています。