Voice and Video Calls in a Web Browser with RELAY

The SignalWire RELAY WebRTC JavaScript library is here!

Jun 21, 2019

By Erik Lagerway, VP of Product

We are very excited to share our new RELAY for Web Browser Library (JavaScript SDK) This will enable rapid development for those building web clients for contact centers, cloud communications systems, video chat solutions, or any application requiring real-time communications capabilities. This new library from SignalWire will enable voice and video calls between endpoints on the SignalWire network and the PSTN (Public Switched Telephone Network) as well as enterprise SIP (Session Initiation Protocol) networks.

This library has been created from the ground-up with real-time communications in mind. We have taken the best of RELAY and created a web-first toolkit that provides a better experience for the developer when creating the application and for their users consuming those applications. The RELAY construct allows the developer to create compelling workflows that were purpose-built for communications on the web.

Our Web Browser library allows developers to take full advantage of the SignalWire network and the endpoints that are contained therein. Making a call to another Web Browser endpoint has never been easier. Making and receiving calls from a Web Browser to the legacy phone network just works. Calling SIP (Session Initiation Protocol) endpoints is supported out of the box.

In the first iteration of this SDK, 1:1 voice and video calls are supported with more advanced functionality including Messaging, simple Video Conferencing, and advanced Web Conferencing with screen share features (and much more) fast on the way.

Check out the demo video below, or read on for step-by-step instructions with code samples.



Getting Started

Use our demo application to test your configuration from your project. The SignalWire Call Demo can be found here. To get started, we need to grab our Project Key from our SignalWire dashboard:

and paste it in the SignalWire Call Demo under Project. We also need to obtain a JSON Web Token (JWT). To learn more about generating and using JWT, including all of the options that are available to you, see our Authentication for JavaScript SDK Documentation.

Once you have generated a JWT, copy and paste it into the demo application under Token.

After you have entered both values, connect the client by clicking Connect:

Now, you can create and receive voice and video calls to and from other browsers, SIP endpoints, and the PSTN (Public Switched Telephone Network). For outbound calls, simply enter the resource or number to dial in the Call To section and click Call!


Code examples


Connect with RELAY by creating a client and attaching all the necessary event handlers. All the available events that you can attach a listener to can be found here.

function connect() {
  client = new Relay({
    Project: ‘my-project-id’,
    token: ‘my-jwt’
  });
  client.remoteElement = 'remoteVideo';
  client.localElement = 'localVideo';
  client.on('signalwire.ready', function() {
    btnConnect.classList.add('d-none');
    btnDisconnect.classList.remove('d-none');
    connectStatus.innerHTML = 'Connected';
    startCall.disabled = false;
  });
  // Update UI on socket close
  client.on('signalwire.socket.close', function() {
    btnConnect.classList.remove('d-none');
    btnDisconnect.classList.add('d-none');
    connectStatus.innerHTML = 'Disconnected';
  });
  // Handle errors...
  client.on('signalwire.error', function(error){
    console.error("SignalWire error:", error);
  });
  connectStatus.innerHTML = 'Connecting...';
  client.connect();
}

Make a new call:

function makeCall() {
  const params = {
    destinationNumber: ‘35123’, // required!
    audio: document.getElementById('audio').checked,
    video: document.getElementById('video').checked ? { aspectRatio: 16/9 } : false,
  };
  currentCall = client.newCall(params);
}

Hangup a current call if present:

function hangup() {
  if (currentCall) {
    currentCall.hangup()
  }
}


Documentation

Web Browser Library: https://docs.signalwire.com/topics/relay-sdk-js

JavaScript Authentication: https://docs.signalwire.com/topics/relay-sdk-js-auth

Come and build something great on SignalWire!

Main developer documentation site: https://docs.signalwire.com/

Friendly support can be found in our online community.

P.S. We always announce features to our community before bringing it to the general public, so sign up for your free SignalWire account today and join our Community!

(*) Please check our pricing page for up to date pricing.