Skip to content

Restcomm WebRTComm Quick Start

Jump to bottom Edit New page
Antonis Tsakiridis edited this page Jan 14, 2016 · 7 revisions

This tutorial will show you how to integrate Restcomm WebRTComm JavaScript library into your Web Apps to tap into the Restcomm telecom capabilities. WebRTComm uses WebRTC for media (audio and video) and JAIN SIP for signaling and exposes an efficient API to add communication features in your Web App like calls and text messages.

IMPORTANT NOTE: WebRTComm library offers a relatively low-level API. We encourage interested developers to use the new higher level, Twilio compatible Web SDK found at: https://github.com/RestComm/restcomm-web-sdk instead that hides most of the complexity and offers a simple and easier to user API.

Prerequisites

  • Restcomm Communications Platform
  • NodeJS (we are using NodeJS for the server side cause it's simpler, but you could use anything you want)

1. Restcomm

Here you have two alternatives:

2. Restcomm WebRTComm library

Once you have installed the Restcomm platform (or you are using RaaS) you are ready to start taking advantage of Restcomm's features from your Web Apps. What you need to do is clone the WebRTComm GitHub repository from: https://github.com/RestComm/webrtcomm:

$ git clone https://github.com/RestComm/webrtcomm.git

Use the existing sample Web App, 'Hello World'

To illustrate the library, we'll be using a sample App provided in the repo, called hello-world:

  • Edit index.html inside hello-world sample in the local repo: $WEBRTCOMM/samples/hello-world.
  • Search for string CHANGEME and perform required changes in the Restcomm instance IP address/domain name. This will depend on which alternative you picked above for Restcomm: a. if you used RaaS then you don't need to update the IP address (i.e. the RaaS domain name is used by default). b. if you used the Docker image then you should use the local IP address that Restcomm uses when coming up:
// Get user media and initialized webrtcomm facilities
function start() 
{
   trace("Requesting local stream");

   // webrtc getUserMedia
   getUserMedia({audio:true, video:videoEnabled}, gotStream,
         function(error) {
            trace("getUserMedia error: ", error);
         });

   // setup WebRTClient
   var wrtcConfiguration = {
      communicationMode: WebRTCommClient.prototype.SIP,
      sip: {
         sipUserAgent: 'TelScale RTM Olympus/1.0.0',
         sipRegisterMode: true,
         sipOutboundProxy: 'wss://cloud.restcomm.com:5063',  // CHANGEME: setup your restcomm instance domain/ip and port
         sipDomain: 'cloud.restcomm.com',  // CHANGEME: setup your restcomm instance domain/ip
         sipDisplayName: 'Bob',
         sipUserName: 'bob',
         sipLogin: 'bob',
         sipPassword: '1234',
      },
      RTCPeerConnection: {
         iceServers: undefined,
         stunServer: 'stun.l.google.com:19302',
         turnServer: undefined,
         turnLogin: undefined,
         turnPassword: undefined,
      }
   };

   ...
  • Fire up a NodeJS 'static' web server and serve the contents of index.html: $ nodejs server.js
  • Navigate your browser to https://localhost:2013, this is where NodeJS is configured to serve your page.
  • Once the page loads you should see a fairly basic user interface with 3 buttons. Press 'Start' to trigger registration of your Web App with Restcomm (if you open a JS console in your browser you should see SIP REGISTER messages exchange, ending with a 200 OK response which signifies a successful registration).
  • Then press Call and behind the scenes number +1235 will be called on the Restcomm instance and you will hear the associated announcement (Notice you won't see video from the other side cause it's not yet supported on our media server)
  • From then on, you can try more fun experiments, such as calling a different Restcomm number by changing the whole URI in the code from sip:1235@<ip address> to for example sip:1311@<ip address> which is the default Restcomm Application for conferencing:
// Make a call to a specific SIP destination
function call() 
{
   trace("Starting Call");

   // update the contact to any Restcomm application you want to reach (by default we use the 1235 application which is the demo 'Say App'
   var contact = "sip:+1311@cloud.restcomm.com";

   var callConfiguration = {
             displayName: '+1311',
             localMediaStream: localStream,
             audioMediaFlag: true,
             videoMediaFlag: videoEnabled,
             messageMediaFlag: false,
             audioCodecsFilter: '',
             videoCodecsFilter: ''
   };

   currentCall = wrtcClient.call(contact, callConfiguration);
   ...

Now the real fun begins: you can call the same number using the WebRTComm library from yet another browser window and start a conference between the two (remember that you need to have registered with different users for that)!

That's it! Give it a try it and share your experience with the rest of the Restcomm community, or even better, jump in and get your hands dirty with the code! Here are some additional resources:

Add a custom footer
Add a custom sidebar

Clone this wiki locally