WebRTCをさわってみる＆手動シグナリングしてみる

今回は、WebRTCについて書きたいと思います。

WebRTCって何ぞ？

WebRTCって何ぞ？
ってとこから書きたいなと思ったのですが、他の方の記事見てるとよく書けてるな。。
改めて書く必要ないんじゃないかな。。
図ないと分かりづらいよな。。面倒だなこれ。。

って感じになりました。

ということで、WebRTCって何ぞ？とかは下記の記事を参考にしてください！

・WebRTCを仕組みから実装までやってみる
http://blog.wnotes.net/blog/article/webrtc-beginning

・WebRTCで変わるWebの未来
http://www.qcontokyo.com/data_2013/ToruYoshikawa_QConTokyo2013.pdf

んで、今回書くのは
P2Pで通信を開始するまでのシーケンスを1手順ずつ、自分でわかるように、自分のために書きます。

今回やろうとすること

端末A・端末BをPeer to Peerし、
Macに内蔵しているカメラで撮影している内容をリアルタイムに共有するところまでやる。

必要っぽいもの

シグナリングサーバー
ICEサーバー(STUN / TURN)

と思ったけど、シグナリングは手動でできそうだし、ICEサーバーだけでいいんじゃないか感。

ということで、今回は↓でやります。
・シグナリングは手動
・Googleが提供しているSTUNサーバー

接続手順

事前準備（共通）

No	端末A	端末B
1	video要素を作っておく	video要素を作っておく
2	Peerを生成	Peerを生成
3	メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる	メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる

この作業は接続する端末共通です。
ここまで実施することで、ブラウザで自身の姿が見れるようになるはずです。

接続対象へSDPを送受信してセッションを確立
Simple Traversal of UDP through NATs (STUN): NAT越えの方法としてRFC3489で定められた標準的な仕組み。
外部のSTUNサーバに対してクライアントが一度接続し、グローバルIPとマッピングされたポート番号を記憶しておくことで、そのデータを使ってPeerは相手のマシンを特定することができる。

No	端末A	端末B
4	端末Bへ送信するOfferを生成
5		端末Aで生成したOfferを受信
6		端末Bへ送信するAnswerを生成
7	端末Bで生成したAnswerを受信

リモート側のストリームを共有する
接続経由を共有することで、端末Aと端末BをPeer to Peer接続する。

No	端末A	端末B
8	端末Bへ送信する経路情報を出力
9		端末Aで生成した経路情報を受信
10		端末Aへ送信する経路情報を出力
11	端末Bで生成した経路情報を受信

ここまでくると、接続した端末のカメラの動画が表示されるようになっているはずです。

まとめて書くと、こんな手順です。

No	端末A	端末B
1	video要素を作っておく	video要素を作っておく
2	Peerを生成	Peerを生成
3	メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる	メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる
4	端末Bへ送信するOfferを生成
5		端末Aで生成したOfferを受信
6		端末Aへ送信するAnswerを生成
7	端末Bで生成したAnswerを受信
8	端末Bへ送信する経路情報を出力
9		端末Aで生成した経路情報を受信
10		端末Aへ送信する経路情報を出力
11	端末Bで生成した経路情報を受信

手動でやると面倒ですね。これ。

接続してみよう！

コードはこんな感じ（1〜11の上記手順通り番号をつけています。
このコードをブラウザで表示すると、こうなります。

図. webrtcテストサンプル

このコードでは、1〜3までは開いた時に勝手にやってくれます。
（カメラを許可すると、左上に端末A(自分の顔)が表示されます。

では、ブラウザを２つ立ち上げ(別のPCでも可)、端末Aと端末Bとして作業してみましょう。
4〜11は下記のような作業が必要なので実行してみてください。

図. 手順説明用

No	端末A	端末B
4	端末Bへ送信するOfferを生成 ・Developer ToolsのConsoleで下記を実行し、表示される文字列をコピーする(文字列に変換して表示されてるやつ webrtc.createOffer()
5		端末Aで生成したOfferを受信 ・4でコピーした文字列をブラウザに表示されてるテキストエリア左側（図の①）に貼り付け、Consoleから下記を実行する webrtc.receiveSdp()
6		端末Aへ送信するAnswerを生成 ・Consoleで下記を実行し、表示される文字列をコピーする(文字列に変換して表示されてるやつ webrtc.createAnswer()
7	端末Bで生成したAnswerを受信 ・6でコピーした文字列をブラウザに表示されてるテキストエリア左側（図の①）に貼り付け、Consoleから下記を実行する webrtc.receiveSdp()
8	端末Bへ送信する経路情報を出力 ・Consoleで下記を実行し、表示される文字列をコピーする(文字列に変換して表示されてるやつ webrtc.displayCandidates()
9		端末Aで生成した経路情報を受信 ・8でコピーした文字列をブラウザに表示されてるテキストエリア右側（図の②）に貼り付け、Consoleから下記を実行する webrtc.receiveCandidates()
10		端末Aへ送信する経路情報を出力 ・Consoleで下記を実行し、表示される文字列をコピーする(文字列に変換して表示されてるやつ webrtc.displayCandidates()
11	端末Bで生成した経路情報を受信 ・10でコピーした文字列をブラウザに表示されてるテキストエリア右側（図の②）に貼り付け、Consoleから下記を実行する webrtc.receiveCandidates()

11を実行することで、右上に端末B(相手の顔)が表示されます。

おわりに