HaxeでWebRTCを扱う #WebRTC

この記事では、HaxeにおけるWebRTCの扱い方と注意点について記します。

1. HaxeでWebRTCを扱うには

Haxeは、標準ライブラリでWebRTCに対応しています。関連するクラスは、js.html.rtcパッケージに収められています。

js.html.rtcパッケージ

DataChannel.hx
DataChannelEvent.hx
ErrorCallback.hx
IceCandidate.hx
IceCandidateEvent.hx
LocalMediaStream.hx
MediaStream.hx
MediaStreamEvent.hx
MediaStreamList.hx
MediaStreamTrack.hx
MediaStreamTrackEvent.hx
MediaStreamTrackList.hx
NavigatorUserMediaError.hx
NavigatorUserMediaErrorCallback.hx
NavigatorUserMediaSuccessCallback.hx
PeerConnection.hx
SessionDescription.hx
SessionDescriptionCallback.hx
StatsCallback.hx
StatsElement.hx
StatsReport.hx
StatsResponse.hx

2. 注意点

JavaScriptでWebRTCを扱ったことのある方であれば、特に突っかかることもなくHaxeに移植可能です。ただし、以下の3点には注意が必要です。

型名にRTCは付かない

Haxeでは、@:native修飾子によって型名からRTCが省かれています。

JavaScript

var pc = new RTCPeerConnection(pcOption);

Haxe

var pc = new PeerConnection(pcOption);

ベンダープリフィックスは付かない

コンパイルされて出来るjsファイルは、ベンダープリフィックスの付いていない純粋なものになっています。2015年2月8日時点で、ベンダープリフィックスのないWebRTCコードはいずれのブラウザーでも動作しません。

私は、これをInitialization Magicを用いて解決しました。以下はMainクラスに書き加える場合のサンプルコードです。

Main.hx

private static function __init__() : Void untyped {
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate;
    window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription;
}

もしも標準ライブラリの上書きに躊躇が無ければ、該当するクラスにそれぞれ書き加える方が、毎回書く必要がなくなるため便利でしょう。ただ、いずれもあまり美しくはないので、もっと良い方法があればご教示ください。

VoidCallbackの返り値はBool型

後述するサンプルコードで頻出するナントカCallback型は、返り値がBool型で定義されています。これは、返り値はVoid型であるとするWebRTC 1.0 EDの定義と異なります。

VoidCallback.hx

typedef VoidCallback = Void -> Bool;

ErrorCallback.hx

typedef ErrorCallback = String -> Bool;

SessionDescriptionCallback.hx

typedef SessionDescriptionCallback = SessionDescription -> Bool;

試しに、標準ライブラリを書き換えて返り値をVoid型としても動作します。どうしてHaxeでは異なる定義としているのか、私には理解できませんでした。後述するサンプルコードでは、標準ライブラリは書き換えずに、すべてtrueを返しています。

3. サンプルコード

以下に、簡単なシグナリング処理のサンプルコードを掲載します。なお、クライアント同士のマッチング処理やエラー処理などは省略しているため、これをコピペしても動作はしません。実際に動作する完全なコードはgitHubを参照ください。

Main.hx

package ;

import haxe.Json;
import js.Browser;
import js.html.rtc.DataChannel;
import js.html.rtc.IceCandidate;
import js.html.rtc.PeerConnection;
import js.html.rtc.SessionDescription;
import js.html.WebSocket;
import js.Lib;

class Main 
{
    private var _ws:WebSocket;
    private var _wsUrl:String;

    private var _pc:PeerConnection;
    private var _pcOption:Dynamic;

    private var _dc:DataChannel;
    private var _dcLabel:String;
    private var _dcOption:Dynamic;

    static function main() 
    {
        new Main();
    }

    public function new()
    {
        Browser.window.onload = init;
    }

    private function init(evt:Dynamic):Void
    {
        // 0. オプション設定
        _wsUrl = "ws://localhost:8080";
        _pcOption = {
            "iceServers": [ { "url": "stun:stun.l.google.com:19302" } ]
        };
        _dcLabel = "dataChannelLabel";
        _dcOption = {
            ordered: false,
            maxRetransmits: 0
        };

        // 1. RTCPeerConnectionを作成する
        _pc = new PeerConnection(_pcOption);
        _pc.onicecandidate = onIceCandidate;
        _pc.ondatachannel = onDataChannel;

        // 2. シグナリングサーバーに接続する
        _ws = new WebSocket(_wsUrl);
        _ws.onmessage = onMessageWs;

        // 送信側であれば
        if (isSender) {
            // データチャネルを初期化する
            _dc = _pc.createDataChannel(_dcLabel, _dcOption);
            initDataChannel(_dc);

            // セッション情報（オファー）を作成する
            _pc.createOffer(onCreateSdp, onFailure);
        }
    }

    private function initDataChannel(dc:DataChannel):Void
    {
        dc.onopen = function(evt:Dynamic):Void {
            trace("open");
            dc.send("Hello!");
        };
        dc.onclose = function(evt:Dynamic):Void {
            trace("close");
        };
        dc.onmessage = function(evt:Dynamic):Void {
            trace("message", evt.data);
        };
    }

    private function onMessageWs(evt:Dynamic):Void
    {
        var msg:Dynamic = Json.parse(evt.data);

        switch (msg.type) {
            case "sdp":
                // セッション情報を受け取る
                var sd:SessionDescription = new SessionDescription(msg.data);
                _pc.setRemoteDescription(sd, function():Bool {
                    // 受信側であれば、セッション情報（アンサー）を作成する
                    if (sd.type == "offer") _pc.createAnswer(onCreateSdp, onFailure);
                    return true;
                }, onFailure);

            case "candidate":
                // 経路情報を受け取る
                var candidate:IceCandidate = new IceCandidate(msg.data);
                _pc.addIceCandidate(candidate);

            default:
                onFailure("予期しないメッセージの受信");
        }
    }

    private function onCreateSdp(sd:SessionDescription):Bool
    {
        // 生成されたセッション情報を登録する
        _pc.setLocalDescription(sd, function():Bool {
            // 生成されたセッション情報を シグナリングサーバーを通して転送する
            _ws.send( Json.stringify( { type: "sdp", data: sd } ) );
            return true;
        }, onFailure);
        return true;
    }

    private function onFailure(error:String):Bool
    {
        trace(error);
        return true;
    }

    private function onIceCandidate(evt:Dynamic):Void
    {
        if (evt && evt.candidate) {
            // 生成された経路情報を シグナリングサーバーを通して転送する
            _ws.send( Json.stringify( { type: "candidate", data: evt.candidate } ) );
        }
    }

    private function onDataChannel(evt:Dynamic):Void
    {
        if (evt && evt.channel) {
            // データチャネルを初期化する
            _dc = evt.channel;
            initDataChannel(_dc);
        }
    }

    private static function __init__() : Void untyped {
        window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
        window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate;
        window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription;
    }
}

以上です。