10. Trickle ICE 方式によるシグナリング

前項までのビデオチャットプログラムは、P2P通信しようとする相手にSDPを送信する方法として、Vanilla ICE 方式と呼ばれる「ICE candidate の収集の完了後に、収集したICE candidateを保持するSDPを相手に送信する」という方法を採用していました。
本項では、Trickle ICE 方式と呼ばれる「SDPを作成直後にすぐに相手に送信し、ICE candidateを見つけるごとに相手に送信する」という方法の処理を構築します。

解説

Trickle ICE 方式によるシグナリングですべきことは、以下です。

OfferSDPおよびAnswerSDPを作成直後にすぐに相手に送信するようにします。
ICE candidateを見つけるごとに相手に送信するようにします。

Trickle ICE 方式は、Vanilla ICE 方式に比べて、処理の手続きが多少複雑になりますが、ICE Candidate の収集の完了を待たないため、接続が確立するまでの時間が早くなるという利点があります。

Vanillaには、「簡素な」「地味な」という意味があります。また、コンピューター用語においては、「改変が行われていない」「カスタマイズされていない」という意味があります。
Trickleには、「（液体が）少しづつ流れる」「（涙・汗・雨などが）したたり落ちる」「（人が）少しづつ来る」という意味があります。

準備

「09. STUN Serverへの対応」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

「OfferSDPの作成」および「OfferSDPの設定とAnswerSDPの作成」

OfferSDPおよびAnswerSDPを作成直後にすぐに相手に送信するようにします。

「RTCPeerConnection関連の関数」コード部の「OfferSDPの作成」および「OfferSDPの設定とAnswerSDPの作成」の関数の処理を変更します。

「初期SDPをサーバーを経由して相手に送信」する処理を追加します。

// OfferSDPの作成 function createOfferSDP( rtcPeerConnection ) { （・・・略・・・） rtcPeerConnection.createOffer() .then( ( sessionDescription ) => { （・・・略・・・） return rtcPeerConnection.setLocalDescription( sessionDescription ); } ) .then( () => { // Vanilla ICEの場合は、まだSDPを相手に送らない // Trickle ICEの場合は、初期SDPを相手に送る // 初期OfferSDPをサーバーを経由して相手に送信 console.log( "- Send OfferSDP to server" ); g_socket.emit( "signaling", { type: "offer", data: rtcPeerConnection.localDescription } ); } ) .catch( ( error ) => （・・・略・・・） } // OfferSDPの設定とAnswerSDPの作成 function setOfferSDP_and_createAnswerSDP( rtcPeerConnection, sessionDescription ) { （・・・略・・・） rtcPeerConnection.setRemoteDescription( sessionDescription ) .then( () => { （・・・略・・・） return rtcPeerConnection.createAnswer(); } ) .then( ( sessionDescription ) => { （・・・略・・・） return rtcPeerConnection.setLocalDescription( sessionDescription ); } ) .then( () => { // Vanilla ICEの場合は、まだSDPを相手に送らない // Trickle ICEの場合は、初期SDPを相手に送る // 初期AnswerSDPをサーバーを経由して相手に送信 console.log( "- Send AnswerSDP to server" ); g_socket.emit( "signaling", { type: "answer", data: rtcPeerConnection.localDescription } ); } ) .catch( ( error ) => （・・・略・・・） }

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

ICE candidateを見つかるごとに相手に送信するようにします。

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

「ICE candidateをサーバーを経由して相手に送信」する処理を追加します。

// ICE candidate イベントが発生したときのイベントハンドラ // - これは、ローカルのICEエージェントがシグナリング・サーバを介して // 他のピアにメッセージを配信する必要があるときはいつでも発生する。 // これにより、ブラウザ自身がシグナリングに使用されている技術についての詳細を知る必要がなく、 // ICE エージェントがリモートピアとのネゴシエーションを実行できるようになる。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate rtcPeerConnection.onicecandidate = ( event ) => { console.log( "Event : ICE candidate" ); if( event.candidate ) { // ICE candidateがある console.log( "- ICE candidate : ", event.candidate ); // Vanilla ICEの場合は、何もしない // Trickle ICEの場合は、ICE candidateを相手に送る // ICE candidateをサーバーを経由して相手に送信 console.log( "- Send ICE candidate to server" ); g_socket.emit( "signaling", { type: "candidate", data: event.candidate } ); } （・・・略・・・） };

サーバーからのメッセージ受信に対する処理

「Socket.IO関連の関数」コード部の「サーバーからのメッセージ受信に対する処理」を変更します。

「"candidate" を受信したときの処理」を追加します。
「"candidate" を受信したときは、「受信したICE candidateの追加」関数を呼び出します。

// サーバーからのメッセージ受信に対する処理 // ・サーバー側のメッセージ拡散時の「io.broadcast.emit( "signaling", objData );」に対する処理 g_socket.on( "signaling", ( objData ) => { （・・・略・・・） if( "offer" === objData.type ) { （・・・略・・・） } else if( "answer" === objData.type ) { （・・・略・・・） } else if( "candidate" === objData.type ) { if( !g_rtcPeerConnection ) { // コネクションオブジェクトがない alert( "Connection object does not exist." ); return; } // Vanilla ICEの場合は、ここには来ない。 // Trickle ICEの場合は、相手側のICE candidateイベントで送信されたICE candidateを、コネクションに追加する。 // ICE candidateの追加 console.log( "Call : addCandidate()" ); addCandidate( g_rtcPeerConnection, objData.data ); // 受信したICE candidateの追加 } else { console.error( "Unexpected : Socket Event : signaling" ); } } );

ICE candidateの追加関数

「RTCPeerConnection関連の関数」コード部に、「ICE candidateの追加」の関数を追加します。

addIceCandidate()関数を用いて、ICE candidateをRTCPeerConectionオブジェクトに追加します。

// ICE candidateの追加 function addCandidate( rtcPeerConnection, candidate ) { console.log( "Call : rtcPeerConnection.addIceCandidate()" ); rtcPeerConnection.addIceCandidate( candidate ) .catch( ( error ) => { console.error( "Error : ", error ); } ); }

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

Trickle ICE 方式においては、ICE candidateを見つけるごとに相手に送信します。Vanilla ICE 方式の「ICE candidate の収集の完了後に、収集したICE candidateを保持するSDPを相手に送信する」処理をコメントアウトします。

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

"complete" を受信したときの処理について、「SDPをサーバーに送信する処理」をコメントアウトします。

// ICE gathering state change イベントが発生したときのイベントハンドラ // - このイベントは、ICE gathering stateが変化したときに発生する。 // 言い換えれば、ICEエージェントがアクティブに候補者を収集しているかどうかが変化したときに発生する。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicegatheringstatechange rtcPeerConnection.onicegatheringstatechange = () => { console.log( "Event : ICE gathering state change" ); console.log( "- ICE gathering state : ", rtcPeerConnection.iceGatheringState ); if( "complete" === rtcPeerConnection.iceGatheringState ) { // Vanilla ICEの場合は、ICE candidateを含んだOfferSDP/AnswerSDPを相手に送る // Trickle ICEの場合は、何もしない if( "offer" === rtcPeerConnection.localDescription.type ) { // OfferSDPをサーバーに送信 //console.log( "- Send OfferSDP to server" ); //g_socket.emit( "signaling", { type: "offer", data: rtcPeerConnection.localDescription } ); } else if( "answer" === rtcPeerConnection.localDescription.type ) { // AnswerSDPをサーバーに送信 //console.log( "- Send AnswerSDP to server" ); //g_socket.emit( "signaling", { type: "answer", data: rtcPeerConnection.localDescription } ); } else { console.error( "Unexpected : Unknown localDescription.type. type = ", rtcPeerConnection.localDescription.type ); } } };

動作確認

動作に関しては、前項と本項は変わりません。
（接続が確立するまでの時間が多少早くなりますが、体感できるほどではないかもしれません。）

ダウンロード

サンプルプログラム

デモ

デモ（Google App Engine） : https://my-video-chat.appspot.com/app10/index.html
デモ（Heroku） : https://myvideochat1234.herokuapp.com/app10/index.html