03. マニュアルシグナリング(「OfferSDPの作成」まで構築)



WebRTCでは、P2P通信を始める前に、お互いの情報を交換するシグナリングと呼ばれる処理を行います。
シグナリングの手続きを理解するために、「03. 」~「06. 」にかけて、お互いの情報の交換を手動で行う「マニュアルによるシグナリング」の処理を構築します。
「マニュアルによるシグナリング」では、交換する情報をブラウザ画面に表示し、手動のコピー&ペーストによって情報をWebRTCに設定します。
本項では、「マニュアルによるシグナリング」の「OfferSDPの作成」までを構築します。

解説

「マニュアルによるシグナリング」の「OfferSDPの作成」までの手続きの流れは以下です。

  1. ビデオチャットを行うために2つのブラウザを立ち上げます。
  2. ビデオまたはマイクまたはその両方をOnにします(理由は後述)。
  3. 片方のブラウザの「Create OfferSDP.」ボタンを押します。
  4. ボタンを押すと以下の処理が行われます。
  5. new RTCPeerConnection() により、RTCPeerConnectionオブジェクトを作成します。
  6. 作成されたRTCPeerConnectionオブジェクトについて、イベントハンドラを構築します。
  7. 作成されたRTCPeerConnectionオブジェクトについて、メディアストリームを追加します。
  8. 作成されたRTCPeerConnectionオブジェクトについて、createOffer()関数を呼び出します。
  9. createOffer()関数の結果得られるSDPを、setLocalDescription()関数を用いて、ローカルSDPとして設定します。
  10. ICE candidate の収集が始まります。(ICE candidate : Interactive Connectivity Establishment candidate: 双方向の接続の確立の候補)
  11. ICE candidate の収集が完了すると、「ICE gathering state change」イベントが発生し、「iceGatheringState」は「complete」になります。
  12. ICE candidate の収集の完了後、「収集したICE candidateを保持するSDP」をブラウザ画面の「Offer側のOfferSDP用のテキストエリア」に貼り付けます。

準備

02. カメラとマイクの開始と停止」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

「public/index.html」ファイルを編集します。

「マニュアルによるシグナリング」用のHTML要素を追加します。

「head」部の<title>My Video Chat</title>の下に、「読み取り専用のエリアの背景を灰色にするスタイル設定」のコードを追加します。


「body」部の下部の「クライアント側の処理のファイル(client.js)を読み込むコード」の上に、以下のコードを追加します。

クライアント側の処理

「public/client.js」ファイルを編集します。

「マニュアルによるシグナリング」の「OfferSDPの作成」までの処理を追加します。

グローバル変数

「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。

「Create OfferSDP.」ボタンを押すと呼ばれる関数

「UIから呼ばれる関数」コード部に、「「Create OfferSDP.」ボタンを押すと呼ばれる関数」の定義を追加します。

RTCPeerConnectionオブジェクトの作成関数

「RTCPeerConnection関連の関数」コード部に、「RTCPeerConnectionオブジェクトの作成」関数の定義を追加します。

RTCPeerConnectionオブジェクトのイベントハンドラの構築関数

「RTCPeerConnection関連の関数」コード部に、「RTCPeerConnectionオブジェクトのイベントハンドラの構築」関数の定義を追加します。

OfferSDPの作成関数

「RTCPeerConnection関連の関数」コード部に、「OfferSDPの作成」関数の定義を追加します。

動作確認

node でサーバーを起動します。

ブラウザで「localhost:1337」にアクセスします。



① 「Camera」もしくは「Microphone」もしくは両方のチェックボックスをOnにし、カメラもしくはマイクもしくは両方を有効にします。※1
② 「Offer side」の「OfferSDP」のセルにある「Create OfferSDP」ボタンを押します。
③ 「Offer side」の「OfferSDP」のセルのテキストエリアに、「OfferSDP」が表示されます。

※1:カメラもマイクも有効にしなかった場合は、通信するデータがないので、「Create OfferSDP」ボタンを押しても、「OfferSDP」が生成されず、「OfferSDP」が表示されません。『カメラもマイクも有効にしなかった場合、「OfferSDP」が生成されない』問題は、第11項の「独自データの送受信」にて解決します。「独自データの送受信」の対応によって通信するデータとして独自データがあるので、カメラ/マイクが有効かによらず、「OfferSDP」が生成されるようになります。

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine) : https://my-video-chat.appspot.com/app03/index.html
デモ(Heroku) : https://myvideochat1234.herokuapp.com/app03/index.html

関連ページ

前項目 : 02. カメラとマイクの開始と停止

次項目 : 04. マニュアルシグナリング(「AnswerSDPの作成」まで構築)