Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

RTCDatachannel SIP signaling

4.00/5 (2 votes)
2 May 2013MIT 14.9K  
RTCDatachannel with SIP signaling implementation based on JsSIP library

Introduction 

I was searching in Internet for implementation of WebRTC datachannel API using SIP signaling, but I wasn't able to find any. Instead, I have found very nice JavaScript library JjSIP that implements RTCPeerConnection API and SIP signaling. So I have modified this library for my needs. For those who are interested in WebRTC datachannel please use/extend my solution. My library works only for Chrome and for now I don't plan to extend it for Firefox. It was developed for my personal needs and will be updated in case of necessity. 

Read more about RTC Datachannel

Sources of Jssip-datachannel can be found here.  

Using the code  

Here is a sample client working with the library. Registration of UA on SIP server:

JavaScript
function register(){        
    var id = $("#pc1_id").val();
    var uri = 'sip:' + id + '@officesip.local';
    var configuration = {
        'ws_servers' : 'ws://192.168.148.100:5060',
        'uri' : uri,
        'register' : true,                
        'trace_sip': true
    };
 
    sipUA = new JsSIP.UA(configuration);        
 
    sipUA.on('registered', function (e) {
        $("#registrationInfo").html(" Registered, ID: " + id);
    });
 
    sipUA.on('unregistered', function (e) {
        $("#registrationInfo").html(" Not registered");
    });
 
    sipUA.on('registrationFailed', function(e) {
        $("#registrationInfo").html(" Not registered");
    });    
 
    sipUA.on('newRTCSession', function(e) {
        var request = e.data.request;
        var session = e.data.session;
        if(e.data.originator === "local"){                
            log("Connecting to " + $("#pc2_id").val() + " ...");
        }else {
            var display_name = request.from.display_name || request.from.uri.user;
            log("Incoming request from " + display_name);
 
            var eventHandlers = {
                'progress': function (e) { log("> in progress"); },
                'failed': function (e) { log("> failed!"); 
                    $("#connectButton").removeAttr("disabled"); },
                'started': channelEstablished,
                'ended': channelClosed
            };
 
            var options = {
                'eventHandlers': eventHandlers
            };
 
            session.answer(options);
        }            
    });
    $("#registerButton").hide();
    $("#unregisterButton").show();
    $("#connectButton").removeAttr("disabled");
    sipUA.start();
    return false;
}

Unregistration of UA on SIP server:

JavaScript
function unregister() {
    $("#registerButton").show();
    $("#unregisterButton").hide();
    $("#connectButton").show().attr("disabled", "disabled");
    $("#disonnectButton").hide();
    $("#sendText").attr("disabled", "disabled");
    $("#migrateButton").attr("disabled", "disabled");
    $("#acceptButton").attr("disabled", "disabled");
    sipUA.stop();
    return false;
}

RTCDatachannel initialization:

JavaScript
function connect() {
    $("#connectButton").attr("disabled", "disabled");
    $("#datawindow").empty();
 
    var id = $("#pc2_id").val();
    var uri = 'sip:' + id + '@officesip.local';        
 
    var eventHandlers = {
        'progress': function(e){ log("> in progress"); },
        'failed': function (e) { log("> failed!"); 
               $("#connectButton").removeAttr("disabled"); },
        'started': channelEstablished,
        'ended':  channelClosed
    };
 
    var options = {
        'eventHandlers': eventHandlers
    };
 
    sipUA.connectDataChannel(uri, options);
    return false;
}
   var channelEstablished = function (e) {
    $("#sendText").removeAttr("disabled");
    $("#migrateButton").removeAttr("disabled");
    $("#connectButton").removeAttr("disabled").hide();
    $("#disconnectButton").show();
    log("> connected!");
    sipUA.dataChannel.onmessage = function (e) {
        log("received: " + e.data);
    }
} var channelClosed = function(e){
    $("#disconnectButton").hide();
    $("#connectButton").show();
    $("#sendText").attr("disabled", "disabled");
    $("#migrateButton").attr("disabled", "disabled");
    $("#acceptButton").attr("disabled", "disabled");
    log("> closed!");
} 
Close RTCDatachannel: 
JavaScript
function disconnect() {
    sipUA.closeDataChannel();    
    return false;
} 

Send Text chat message:

JavaScript
function sendMessage(){
    log("
sent: " + $("#pcInput").val() + "
");
    sipUA.dataChannel.send($("#pcInput").val());
    return false;
} 
Screenshots of two clients communication over the datachannel: 

Please visit github to find the sources of library.  

License

This article, along with any associated source code and files, is licensed under The MIT License