WebRTCについての少し細かい話と実際の話はいろんな記事でとても分かりやすい記事がたくさんあるので後ほど文献を紹介する
まず初めに概要の概要として理解してもらうために、ざっくりと説明する。
HTMLのAPIの１つで、Webブラウザーなどを介して高速なデータ通信を実現する規格のこと。特に映像や音声などの容量が大きいデータをリアルタイムに送受信できること、P2P（ピアツーピア）の仕組みを持っていることから、ビデオチャットやWeb会議などに応用されている。
→少し硬いのでもう少しかみ砕くと、ビデオとか音声とかメッセージなどのデータをブラウザ間同士で送受信できるプロトコル
→電話とかアプリなどを必要とせずにweb上ですべて実装ができる
→skypeとかLINEとかも同じような規格で実装しているらしい
まあチャットアプリとかビデオ通話とかを、ChromeとかFireFoxといったブラウザ上でできるAPIなんだなーくらいでいいと思う
そんな簡単にできるものだったらセキュリティとか速度とか大丈夫なん？というところだがこんなにシンプルなAPIであるのは理由があるわけで
難しい言葉が出てきたが、
SDPとは通信に必要な各ブラウザの情報を示す文字列。(セッションの属性、メディアの形式、IPアドレス、ポート番号、通信帯域など)
まあ堅苦しいので自分のSDPといったら私の情報とか住所とでも考えたらわかりやすいかもしれない
ICEとは相手ブラウザに到達する可能性のある通信経路に関する情報を示したもの
どの道使ってお互い通信する？といった経路について書いてあるもの
最初にSDP（私の情報）をPCから送りあうのだが、流れを書くと
A1. 私に関する情報を作成 makeoffer
A2. 作ったと同時にA1.で作った自分の情報を暗記する
A3. あなたの情報ください！！ sendoffer
B1. 受け取りまーす、覚えまーす setoffer
B2. 私に関する情報作成 makeanswer
B3. 作ったと同時にB1.で作った自分の情報を暗記する
B4. お待たせでーす！ sendanswer
A4. 受け取りまーす、覚えまーす setanswer
概要図は以下のようになる
⓪：情報の作成 SDPやICEの作成などはhtml上で行うためwebサーバーにアクセスが必要 makeoffer
→⓪´：つながり確認（以後継続）
(→暗記なう)
→①：offer SDP(SDPを送って、相手の情報が欲しいと伝える) sendoffer
→相手が①を受けとる、暗記 setoffer
→②：情報の作成 ⓪と同じ makeanswer
→②´：つながり確認（以後継続）
(→暗記なう)
→③：answer SDP(相手からの要求に対し答えを送る) sendanswer
→相手からの③を受け取る、暗記 setanswer
→④：ICE(通信経路)を交換し合ったら通信可能
上記のことを行って、さらに次で説明するブラウザ間でのICE(通信経路)を見つけ通信可能状態になったとしても、wifiを用いてインターネットをつないでいる場合、たいていNAT(Network Address Translation ネットワークアドレス変換)という障壁がある。
NATについては詳しく書かないが簡単に言うと、wifiの外から見た自分のPCのIPアドレスとwifi内部でのipアドレス（それぞれグローバルipとプライベートipと呼ぶ）の変換を行う技術って感じ。
通信するブラウザ同士、たいていの場合同じネットワーク環境内にいないので、それを可能にするものがSTUN/TURNサーバー
グローバルipアドレスとか通信可能ポートとかを教えてくれる
俗にいうNAT越えを果たす、もっとも重要なサーバー
STUNがあるといっても、NATやPCによってはポート制限(俗にファイヤーウォール)などの通信制限があり、相手のグローバルipにアクセスできない場合が多々ある。というか同じネットワーク内にいない場合,ほとんどNATで足止めされる。その時のためのTURNサーバー。
ブラウザ間での通信がダメな時、仲介サーバーとしてデータを仲介してくれるので通信が可能になるということ。
詳しくは https://qiita.com/okyk/items/a405f827e23cb9ef3bde
何度も言っているがICEとは、複数のブラウザ間で通信する場合どのような経路を使って通信するかを書いているもので、これはお互い把握していないと迷子になってしまう。なので先ほど紹介したSTUN/TURNサーバーを使った経路情報を含めた経路情報として送ることになるため、通信ができるようになる。 SDPを交換し終わった後の処理の仕方として、Trickle ICE とVanilla ICEといった二つの方法がある。これについては深くは説明しない。https://qiita.com/massie_g/items/916694413353a3293f73 このサイトに載っている。
ICEの候補(以下ICECanditate)は、SDPの交換が終わったらひたすら総当たりで経路情報を探っている。おそらくこれはブラウザ側が行っている処理。それをSDPの交換が終わってからすぐに送って、送ってもらってを繰り返すうちにつながるやり方がTrickle ICEで、すぐには送らずにいろんな候補がたくさん出てきたらまとめて送るというやり方がVanilla ICE。 今回はTrickle ICEで実装した。これを送りあっていくうちにpeer-to-peerの通信が可能になるといった流れだ。
ここまでがWebRTC通信を行うまでの流れである。私はビデオ通話を実装したのでこの後の処理として、videoの処理がいくつかあるが今回は割愛する。 ここまで読んで、世の中にはびこっているWebRTCやってみた系の記事のコードは読めば理解できると思う。
・URLは別途示しています。
接続キーワードは教えてもらうこと！
部屋名は、通話をする相手と共有すること！
