WebRTC Made Easy for JavaScript Developers

A simple yet powerful JS library that takes care of WebRTC and SIP signaling for you

  • video + audio video + audio highlight

    video + audio

  • message message highlight

    message

  • message message highlight

    data channel

Oops!

Looks like your browser can't run this demo.

To get the full experience, download the latest version of Chrome or Firefox

In-browser Video Chat is Now a Breeze

Here's a demo. Start a video chat between Alice and Bob.

Alice's View

Demo user one

Bob's View

Demo user two

Real-Time Messaging with a Dozen Lines of Code

Check it out. Instant message between Alice and Bob.

Bob: No messages yet

Alice's View

Demo user one

Alice: No messages yet

Bob's View

Demo user two

Send Real-Time Data In A Flash

Go ahead. Upload a file as Alice and Download it as Bob.

No files yet sent or received

no file selected
Max file size is 16KB

Alice's View

Demo user one

No files yet sent or received

no file selected
Max file size is 16KB

Bob's View

Demo user two

See How It's Done

The code displayed on the right is what powers the selected demo from Alice’s end, although Bob’s code would be very similar. SIP.js allows you to utilize WebRTC’s APIs using just JavaScript. To check out the full code for all three demos, click the button below.

SIP.js makes it easy to utilize WebRTC's APIs and set up SIP communication sessions. In no time at all, you can have two separate users talking to one another. To learn more about the SIP.js API, click the button below.

var domain = 'sipjs.onsip.com';
var aliceURI      = 'alice' + '@' + domain;
var aliceName     = 'Alice';

var bobURI        = 'bob' + '@' + domain;
var bobName       = 'Bob';

// A shortcut function to construct the media options for an SIP session.
function mediaOptions(audio, video, remoteRender, localRender) {
    return {
        media: {
            constraints: {
                audio: audio,
                video: video
            },
            render: {
                remote: {
                    video: remoteRender
                },
                local: {
                    video: localRender
                }
            }
        }
    };
}

// Makes a call from a user agent to a target URI
function makeCall(userAgent, target, audio, video, remoteRender, localRender) {
    var options = mediaOptions(audio, video, remoteRender, localRender);
    // makes the call
    var session = userAgent.invite('sip:' + target, options);
    return session;
}

function setUpVideoInterface(userAgent, target, remoteRenderId) {
    var onCall = false;
    var session;
    var remoteRender = document.getElementById(remoteRenderId);

    // Handling invitations to calls.
    // Also, for each new call session, we need to add an event handler to set
    // the correct state when we receive a "bye" request.
    userAgent.on('invite', function (incomingSession) {
        onCall = true;
        session = incomingSession;
        var options = mediaOptions(false, true, remoteRender, null);
        remoteRender.style.visibility = 'visible';
        session.accept(options);
        session.on('bye', function () {
            onCall = false;
            remoteRender.style.visibility = 'hidden';
            session = null;
        });
    });
            onCall = true;
    remoteRender.style.visibility = 'visible';
    session = makeCall(userAgent, target,
                       false, true,
                       remoteRender, null);
    session.on('bye', function () {
        onCall = false;
        remoteRender.style.visibility = 'hidden';
        session = null;
    });
}


var aliceUA = new SIP.UA({
        traceSip: true,
        uri: aliceURI,
        displayName: aliceName
    });
setUpVideoInterface(aliceUA, bobURI, 'video-of-bob');
var domain = 'sipjs.onsip.com';
var aliceURI      = 'alice' + '@' + domain;
var aliceName     = 'Alice';

var bobURI        = 'bob' + '@' + domain;
var bobName       = 'Bob';

// Sets up the chat interface for text messaging
function setUpMessageInterface(userAgent) {
    // Receive a message and put it in the message display div
    userAgent.on('message', function (msg) {
        alert(msg.body);
    });
}

var aliceUA = new SIP.UA({
        traceSip: true,
        uri: aliceURI,
        displayName: aliceName
    });
setUpMessageInterface(aliceUA);
aliceUA.message(bobURI, 'Check out this palindrome: "Now sir, a war is never even. Sir, a war is won."');
var domain        = 'sipjs.onsip.com';
var aliceURI      = 'alice' + '@' + domain;
var aliceName     = 'Alice';

var bobURI        = 'bob' + '@' + domain;
var bobName       = 'Bob';

// Creates a user agent with the given parameters. This user agent is only for
// sending data, so it has a special media handler factory for the
// RTCDataChannel.
function createDataUA(callerURI, displayName) {
    var dataURI = 'data.' + callerURI;
    var configuration = {
        traceSip: true,
        uri: dataURI,
        displayName: displayName,
        mediaHandlerFactory: function mediaHandlerFactory(session, options) {
            // Call this so that we define
            // - WebRTC.MediaStream
            // - WebRTC.getUserMedia
            // - WebRTC.RTCPeerConnection
            // - WebRTC.RTCSessionDescription.
            SIP.WebRTC.isSupported();
            /* Like a default mediaHandler, but no streams to manage */
            var self = new SIP.WebRTC.MediaHandler(session, {
                mediaStreamManager: {
                    acquire: function (onSuccess) {
                        // Must be async for on('dataChannel') callback to have a chance
                        setTimeout(onSuccess.bind(null, {}), 0);
                    },
                    release: function (stream) {
                        // no-op
                    }
                }
            });

            // No stream to add. Assume success.
            self.addStream = function addStream(stream, success, failure) {
                success();
            };

            return self;
        }
    };

    return dataUA = new SIP.UA(configuration);
}

// Sets up the file transfer interface for the WebRTC data channel.
function setUpDataInterface(userAgent, target) {
    // Target has a 'data.' prefix
    var dataTarget = 'data.' + target;
    // The open data transfer session
    var session;

    userAgent.on('invite', function (session) {
        session.mediaHandler.on('dataChannel', function (dataChannel) {
            dataChannel.onmessage = function (event) {
                alert(event.data);
                session.bye();
            };
        });
        session.accept();
    });

    // We invite the target and then send the data to them and wait for a "BYE"
    // response to signal that they got the file.
    // No video or audio, only data
    var options = {
        media: {
            constraints: {
                audio: false,
                video: false
            },
            dataChannel: true
        }
    };
    session = userAgent.invite('sip:' + dataTarget, options);
    session.mediaHandler.on('dataChannel', function (dataChannel) {
        dataChannel.onopen = (function () {
            // Send JSON data about file
            dataChannel.send('Sending data. This is text, but you can also send binary files!');
        });
    });

    // Handling the BYE response, which means that they receiced the data.
    session.on('bye', function (req) {
        alert('They received the generic data.');
    });
}

var aliceDataUA = createDataUA(aliceURI, aliceName);
setUpDataInterface(aliceDataUA, bobURI);
var ua = new SIP.UA();
ua.message(
  'will@example.onsip.com',
  'Hello, world!'
);

var session = ua.invite('will@example.onsip.com');
session.on('accepted', function () {
  this.bye();
});
See Full Demo Code  Check out the full API 

Don't Want to Bother with the Back End?

If you’d like to identify and locate your user addresses on the Internet so they can participate in RTC sessions, you’ll need SIP servers. You can build your own using open source FreeSWITCH or Asterisk, or you can try out OnSIP Network - no system setup, modifications, maintenance, or upfront capital required. Sign up for a free OnSIP sandbox account 

Sign up for a free OnSIP sandbox account 

Learn

New to SIP.js? Our guides and docs will have you up and running in a snap.

Connect

Get answers, stay up to date, and become part of the SIP.js community.

Built An App Using SIP.js?

Features

  • Register SIP User Agents using the SIP over WebSocket transport
  • Create Audio and Video sessions
  • Send Instant Messages and view Presence
  • Share your screen or desktop from Chrome
  • Utilize advanced call features such as early media, call hold and resume, and transfers
  • Send DTMF with SIP INFO
  • 100% open source, 100% JavaScript
  • Chrome, Firefox, and Opera supported
github: social coding
MIT open-source license