09. STUN Serverへの対応



STUN Serverについて対応し、NAT※を超えたビデオチャットを可能にします。
作成したビデオチャットプログラムをインターネットに公開されたサーバー上に配置し、起動したとき、前項までのビデオチャットプログラムは、ローカルエリアネットワーク内の相手とビデオチャットができますが、同じローカルネットワークにいないインターネット越しの相手とはビデオチャットができませんでした。STUN Serverへの対応を行うことで、インターネット越しの相手ともビデオチャットができるようになります。
※NAT : Network Address Translation : IPアドレスを変換する技術。ローカルエリアネットワーク内でのIPアドレスであるプライベートIPアドレスをインターネットにおけるIPアドレスであるグローバルIPアドレスに変換する技術。

解説

STUN Serverへの対応ですべきことは、以下です。

注意点として、Chromeブラウザでカメラやマイクを使うには、標準では、HTTPS接続(https://~)またはローカルホスト接続(http://localhost/~)である必要があります。
Chromeブラウザで、HTTP接続(http://~)で、カメラやマイクを使うには、Chromeブラウザの設定項目「Insecure origins treated as secure」に、接続先のURL(http://~)を設定する必要があります。
Chromeブラウザの設定方法や最新仕様、Chrome以外のブラウザの動作仕様や設定方法、については、必要に応じて、調査・確認してください。

準備

08. チャットからの離脱」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

RTCPeerConnectionオブジェクトの作成

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトの作成」関数の「RTCPeerConnection」を生成するときのオプションであるconfigにSTUN Serverのアドレスを追記します。

動作確認

同じローカルエリアネットワークにいる相手との動作に関しては、前項までと本項は変わりません。

前項までのビデオチャットプログラムを、インターネットに公開されたサーバー上で動作させたとき、インターネット越しの相手とはビデオチャットはできません。
本項のビデオチャットプログラムを、インターネットに公開されたサーバー上で動作させたとき、インターネット越しの相手ともビデオチャットができます。

たとえば、本項のビデオチャットプログラムを、インターネットに公開されたサーバーである「Heroku」や「Google App Engine」で動作せたとき、インターネット越しの相手ともビデオチャットができます。

「Google App Engine」上での動作デモ
前項(第08項) : https://my-video-chat.appspot.com/app08/index.html
本項(第09項) : https://my-video-chat.appspot.com/app09/index.html

「Heroku」上での動作デモ
前項(第08項) : https://myvideochat1234.herokuapp.com/app08/index.html
本項(第09項) : https://myvideochat1234.herokuapp.com/app09/index.html

ダウンロード

サンプルプログラム

デモ

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

関連ページ

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

次項目 : 10. Trickle ICE 方式によるシグナリング