09. STUN Serverへの対応

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

解説

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

「RTCPeerConnection」を生成するときのオプションであるconfigに、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のアドレスを追記します。

// RTCPeerConnectionオブジェクトの作成 function createPeerConnection( stream ) { // RTCPeerConnectionオブジェクトの生成 let config = { "iceServers": [ { "urls": "stun:stun.l.google.com:19302" }, { "urls": "stun:stun1.l.google.com:19302" }, { "urls": "stun:stun2.l.google.com:19302" }, ] }; let rtcPeerConnection = new RTCPeerConnection( config ); （・・・略・・・） }

動作確認

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

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

たとえば、本項のビデオチャットプログラムを、インターネットに公開されたサーバーである「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