ホーム > プログラミング > ビデオチャットアプリを作る > 07. シグナリングサーバーによる自動シグナリング

07. シグナリングサーバーによる自動シグナリング



WebRTCでは、P2P通信を始める前に、お互いの情報を交換するシグナリングと呼ばれる処理を行います。
前項までで、「マニュアルによるシグナリング」の処理を構築しました。
本項では、「マニュアルによるシグナリング」の処理を、「シグナリングサーバーによる自動シグナリングの処理」に変更します。

解説

「マニュアルによるシグナリング」の処理は、お互いの情報の交換をブラウザ画面のテキストエリアを通して、人のコピペ操作によって行いました。
「シグナリングサーバーによる自動シグナリング」の処理は、お互いの情報の交換をシグナリングサーバーを通して、人の操作なしで行います。

準備

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

サーバー側の処理

「server.js」ファイルを編集します。

「server.js」 の内容を以下のようにします。

ウェブページ

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

「マニュアルシグナリング」用のHTML要素をコメントアウトし、「自動シグナリング」用のHTML要素を追加します。

「public/index.html」 の内容を以下のようにします。

クライアント側の処理

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

「マニュアルシグナリング」のコードのコメントアウト

以下の「マニュアルシグナリング」のコードをコメントアウトします。

グローバル変数

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

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

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

Socket.IO関連の関数

「Socket.IO関連の関数」コード部に、「接続時の処理」と「サーバーからのメッセージ受信に対する処理」を追加します。

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

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

動作確認

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

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



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

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

② 「オファー側」で、「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。リモートの映像が表示される、もしくは、リモートの音声が再生される、もしくはその両方が行われます。

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

チャット前


チャット中

ダウンロード

サンプルプログラム

デモ

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

関連ページ

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

次項目 : 08. チャットからの離脱


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


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