ホーム > プログラミング > ビデオチャットアプリを作る > 05. マニュアルシグナリング(「接続完了」処理まで構築)

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



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

解説

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

  1. AnswerSDPの作成の結果、Answer側のブラウザの「Answer側のAnswerSDP用のテキストエリア」に張り付けられたAnswerSDPを、Offer側のブラウザの「Offer側のAnswerSDP用のテキストエリア」に手動で、コピー&ペースとします。
  2. Offer側のブラウザの「Set AnswerSDP. Then the chat starts.」ボタンを押します。
  3. ボタンを押すと以下の処理が行われます。
  4. AnswerSDPを、テキストエリアから取得します。
  5. AnswerSDPを、setRemoteDescription()関数を用いて、リモートSDPとして設定します。
  6. 接続が完了し、P2P通信が始まります。

準備

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

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

「マニュアルによるシグナリング」の「接続完了」までの処理を追加します。

「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数

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

AnswerSDPの設定関数

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

動作確認

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

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



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

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

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

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

⑨ 「オファー側」で、「Offer side」の「AnswerSDP」のセルのテキストエリアに、コピーした「AnswerSDP」を、ペーストします。
⑩ 「オファー側」で、「Offer side」の「AnswerSDP」のセルにある「Set AnswerSDP. Then the chat starts.」ボタンを押します。
⑪ 「オファー側」および「アンサー側」のChromeの「デベロッパーツール」の「Console」画面を表示すると、「- Connection state : connected」と表示されます。※2

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

※2:Chromeの「デベロッパーツール」は、Chromeの「右上のメニュー > その他のツール > デベロッパーツール」もしくは「Ctrl + Shift + I」で表示されます。

「オファー側」


「アンサー側」


「オファー側」
「接続完了」時のChromeの「デベロッパーツール」の「Console」画面

「Console」画面に表示されるログ内容は、「オファー側」と「アンサー側」とで異なりますが、「接続完了」時のログ内容については、「オファー側」と「アンサー側」とで同様のログ内容が表示されます。

ダウンロード

サンプルプログラム

デモ

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

関連ページ

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

次項目 : 06. マニュアルシグナリング(「リモートの映像の表示、音声の再生」まで構築)


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


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