WebRTCでリアルタイム通信する

WebRTCとは

  • Webブラウザーなどを介して高速なデータ通信を実現する規格
  • 映像や音声などの容量が大きいデータをリアルタイムに送受信できる
  • P2Pの仕組みを持っている

ということで、最近良く使うWeb会議の映像を送るAPIのことです。

WebRTCに含まれるもの

  • MediaStream カメラやマイク、スピーカーを制御して音や映像をストリームで扱えるようにするAPI
  • RTCPeerConnection 映像や音をリアルタイムに送信するAPI
  • RTCDataChannel テキストデータなどをリアルタイムに送信するAPI

今回は、 MediaStream と RTCPeerConnection でリアルタイムビデオチャットを作ります。

WebRTCを利用する流れ

WebRTCはなんらかの手段で双方の接続情報を共有しWebRTC APIに渡すことで、勝手に接続してくれる仕組みになっています。 なんらかの手段というのは、ほんとになんでもよくて、例えばチャットやらなんやらで接続情報をコピペして教え合う、なんてことも可能です。 逆にいうと、接続情報を共有する手段はWebRTCとは別に用意する必要があります。 今回は、WebSocketを使って接続情報を共有することにします。

端末Aと端末Bがいて、端末Aが端末Bに接続しようとする流れを以下に示します。 なお、WebSocketで会議室を作ってあり、そこで必要な接続情報が共有できるものとします。

  1. 端末Bは会議室に入室しており、会議室にIDが登録されています
  2. 端末Aは会議室に入室すると、会議室に入室しているIDを取得し、そのIDに対しWebSocketで Offerを送信します。
  3. 端末BはOfferの要求をうけると、それをWebRTCに渡し、Answerを送り返します。
  4. 端末AはAnswerを受け取ると、それをWebRTCに渡します。
  5. 双方はIceCandidateと呼ばれる経路情報をさらにやりとりして接続することになります。

よくわからないのですが、実装上、IceCandidateのやりとりの部分を書かなくても動いていて、ちょっと気になっています。ローカルで実装したから、ダメなのかな？

実装の解説

GitHub - naoki-tomita/webrtc-app

気が向いたら書きます。

以上です。よろしくお願いします。