Click here to Skip to main content
15,886,676 members
Articles / Programming Languages / Javascript
Tip/Trick

RTCDatachannel SIP signaling

Rate me:
Please Sign up or sign in to vote.
4.00/5 (2 votes)
2 May 2013MIT 14.6K   4   2
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


Written By
Software Developer
Poland Poland
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionJsSIP RTCDatachannel library Pin
Member 1141432829-Jan-15 23:59
Member 1141432829-Jan-15 23:59 
GeneralMy vote of 3 Pin
Mic6-Aug-13 14:56
Mic6-Aug-13 14:56 
Good

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.