略称でWebブラウザの上でカメラやマイクの利用や、ブラウザ同士の双方向通信(P2P)を実現する技術。Chromeの設定まず,ブラウザ(Chrome)からpeerConnectionとGetUserMediaを使えるようにするための設定を行う。アドレスバーにて,「chrome:flags」と入力するとChromeの設定画面が開く.そこで,peerConnectionとGetUserMediaを有効にするローカルサーバの構築GetUserMediaによるカメラからの動画取得などは、サーバ環境が無いと実行できない。GetUserMediaだけならMANPを使用すると便利だと思う。error);を記述するとカメラや音声をブラウザで取得することが出来る。<script>peerConnectionによるP2Pの接続についてpeerConnectionを用いるとブラウザ同士のP2P通信を実現することが出来る。P2Pを行う上で問題になるのは、NATの問題があるため、STUNサーバを使用する。詳しくは、以下ののサイトが参考になった。P2P通信の最大のハードル「NAT」を越える新技術STUNサーバについてSTUNサーバは、通常3478番ポートでリクエストを待ち受ける。STUNは、NATの後ろにあるホストがUDP接続を行う際に使用される。プライベートアドレスの中から電話の音声(UDP)を通過させるための手段の1つ。STUNサーバは、クライアントのパブリックアドレス、NATの種類、NATにより割り当てられたローカルポート番号などの情報を割り出す。この情報により、クライアントとVOIPプロバイダとの間でのUDP通信、そして通話が可能となる。3489で定義されている。両ブラウザがSTUNサーバから受信した接続先候補情報(candidte)オファーアンサーこれらの情報をブラウザ同士でスムーズに交換するために、今回はWebSocketを使用する。onIceCandidate);onIceCandidateは、コールバック関数でSTUNサーバから自分の接続情報(Candidate)が送られてくるたびに呼ばれる関数。受信した自分の情報を接続する相手に送る必要があるので、コールバック関数の中で相手に送信する。※コールバックについては、2を参照GetUserMediaを使用してビデオチャットを実装する場合peerConに送信するデータや受信したデータをどのように扱うかを記述する必要がある。それらの処理もインスタンスを生成した際に記述する。//WebSocketを用いてCandidateを受信したときの関数を作成する。peerCon.processIceMessage(candidate);3:接続相手に自分の接続情報と「今から通信しましょう」というオファーを作成し、接続先相手に送信するオファーとアンサーについてpeerconnectionによるP2Pを実装するためには、接続を要求する側(A)がオファーを作成し、接続を要求される側(B)に送信する。その後、Bがオファーを受信後アンサーを作成し、Aにアンサーを送信。Aがアンサーを受信後、P2Pによる接続が出来るようになる。SessionDescription(answerSdp));以上の処理を行うことで、PeerConnectionを用いたP2P通信を実装することが可能でさる。server.jsのコマンドでサーバを立ち上げる。入力すれば、ページが表示される。アクセスするとWebカメラに接続しても良いか聞かれるので許可を押す。Webカメラが起動するので、その後もう1つブラウザを立ち上げてカメラを起動してから接続ボタンを押す。すると2つのブラウザ間でP2Pの通信を行える。付随機能として「自分の名前」とチャットをイメージした「コメント」をリアルタイムに相手に送信する機能を追加した。チャット機能は、相手の画面上のランダムな場所にコメントが表示され、5秒ほどしたら消える仕様になっている。同じローカルネットワークに属しているのであれば自分のIPアドレスを教えて上げると他のPCのブラウザとP2Pで接続することが可能である。その際にはindex.htmlの下記の場所を書き換える必要がある。