HTML5のWebRTCにおけるcreateSignalingChannel()の実装例と解説

WebRTCとシグナリングの役割

WebRTC（Web Real-Time Communication）は、ブラウザ同士が直接ピアツーピア（P2P）で通信するための技術です。しかし、通信を確立する前に、相手との接続に必要な情報をやり取りする仕組みが欠かせません。これには以下の要素が含まれます。

• シグナリング： 接続の開始・応答などの制御情報の交換
• ネットワーク情報： IPアドレスやポートなど、接続先を特定するための情報
• セッション制御： 通話の開始・終了などのセッション管理
• メディア情報： コーデックや解像度などのメディアに関する設定

シグナリングの伝達手段は開発者が自由に選択できます。SIPやXMPPのような既存プロトコルを使うことも、WebSocketなど任意の双方向通信チャネルを利用することも可能です。ここでは、そのシグナリングチャネルを生成する createSignalingChannel() を使った基本的な実装例を紹介します。

createSignalingChannel() のコード例

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// start(true) を呼び出すと発信者として通話を開始
function start(isCaller) {
    pc = new RTCPeerConnection(configuration);

    // ICE候補を相手のピアへ送信
    pc.onicecandidate = function (evt) {
        signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
    };

    // リモートストリーム受信時に、リモート側のvideo要素へ表示
    pc.onaddstream = function (evt) {
        remoteView.src = URL.createObjectURL(evt.stream);
    };

    // ローカルストリームを取得し、ローカル側のvideo要素へ表示して送信
    navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
        selfView.src = URL.createObjectURL(stream);
        pc.addStream(stream);
        if (isCaller)
            pc.createOffer(gotDescription);
        else
            pc.createAnswer(pc.remoteDescription, gotDescription);

        function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
        }
    });
}

signalingChannel.onmessage = function (evt) {
    if (!pc)
        start(false);
    var signal = JSON.parse(evt.data);
    if (signal.sdp)
        pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
    else
        pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};

コードのポイント

• ICE候補の交換： onicecandidate イベントで取得した候補情報をJSON形式で相手に送信し、受信側は RTCIceCandidate として登録します。これによりNAT越えのための最適な通信経路が決定されます。
• SDPオファー／アンサー： 発信者は createOffer() でセッション記述（SDP）を生成し、受信者は createAnswer() で応答します。双方が setRemoteDescription() を呼び出すことで、メディアの条件が合意されます。
• メディアストリームの取得： getUserMedia() でカメラとマイクへのアクセス許可を取得し、ローカルの映像を表示しながら addStream() で接続に追加しています。

注意：現行ブラウザでの実装について

上記のコードは初期のWebRTC仕様に基づいた例です。現在のモダンブラウザでは、navigator.getUserMedia() や URL.createObjectURL() は非推奨となっており、代わりに navigator.mediaDevices.getUserMedia() を使用し、動画要素への表示には srcObject プロパティを設定するのが標準的な方法です。

また、実際のアプリケーションでは createSignalingChannel() は独自に実装する必要があります。WebSocketサーバーやFirebase、Socket.IOなどを利用して、オファー・アンサー・ICE候補を相手のピアに中継する仕組みを構築しましょう。