ホーム > プログラミング > ビデオチャットアプリを作る > 04. マニュアルシグナリング(「AnswerSDPの作成」まで構築)

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



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

解説

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

  1. OfferSDPの作成の結果、Offer側のブラウザの「Offer側のOfferSDP用のテキストエリア」に張り付けられたOfferSDPを、Answer側のブラウザの「Answer側のOfferSDP用のテキストエリア」に手動で、コピー&ペースとします。
  2. Answer側のブラウザの「Set OfferSDP and Create AnswerSDP.」ボタンを押します。
  3. ボタンを押すと以下の処理が行われます。
  4. new RTCPeerConnection() により、RTCPeerConnectionオブジェクトを作成します。(前項で対応済み)
  5. 作成されたRTCPeerConnectionオブジェクトについて、イベントハンドラを構築します。(前項で対応済み)
  6. 作成されたRTCPeerConnectionオブジェクトについて、メディアストリームを追加します。(前項で対応済み)
  7. OfferSDPを、テキストエリアから取得します。
  8. OfferSDPを、setRemoteDescription()関数を用いて、リモートSDPとして設定します。
  9. 作成されたRTCPeerConnectionオブジェクトについて、createAnswer()関数を呼び出します。
  10. createAnswer()関数の結果得られるSDPを、setLocalDescription()関数を用いて、ローカルSDPとして設定します。
  11. ICE candidate の収集が始まります。(ICE candidate : Interactive Connectivity Establishment candidate: 双方向の接続の確立の候補)
  12. ICE candidate の収集が完了すると、「ICE gathering state change」イベントが発生し、「iceGatheringState」は「complete」になります。
  13. ICE candidate の収集の完了後、「収集したICE candidateを保持するSDP」をブラウザ画面の「Answer側のAnswerSDP用のテキストエリア」に貼り付けます。

準備

03. を実施していない場合は、まず、03. を実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

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

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

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

ICE gathering state change イベントが発生したときのイベントハンドラ

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」の「ICE gathering state change イベントが発生したときのイベントハンドラ」の処理を変更します。

OfferSDPの設定とAnswerSDPの作成関数

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

動作確認

1台のパソコン内での動作確認

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

ブラウザを2つ立ち上げ、それぞれのブラウザで「localhost:1337」にアクセスします。



2つ立ち上げた一方を「オファー側」、もう一方を「アンサー側」とします。

① 「オファー側」「アンサー側」の両方で、「Camera」もしくは「Microphone」もしくは両方のチェックボックスをOnにし、カメラもしくはマイクもしくは両方を有効にします。※1

② 「オファー側」で、「Offer side」の「OfferSDP」のセルにある「Set OfferSDP and Create OfferSDP」ボタンを押します。
③ 「オファー側」で、「Offer side」の「OfferSDP」のセルのテキストエリアに、生成された「OfferSDP」が表示されます。
④ 「オファー側」の「Offer side」の「OfferSDP」のセルのテキストエリアに表示された「OfferSDP」をコピーします。

⑤ 「アンサー側」で、「Answer side」の「OfferSDP」のセルのテキストエリアに、コピーした「OfferSDP」を、ペーストします。
⑥ 「アンサー側」で、「Answer side」の「AnswerSDP」のセルにある「Create AnswerSDP」ボタンを押します。
⑦ 「アンサー側」の「Answer side」の「AnswerSDP」のセルのテキストエリアに、生成された「AnswerSDP」が表示されます。

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

「オファー側」


「アンサー側」

ダウンロード

サンプルプログラム

デモ

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

関連ページ

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

次項目 : 05. マニュアルシグナリング(「接続完了」まで構築)


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.