Make a call to a web browser

How to receive calls into your web app

During this guide you will learn how to:

  • Setup the WebRTC JS SDK into your app.
  • Use the necessary SDK APIs to connect and receive calls into your web application.

Requirements

Building the app

  1. Add the WebRTC adapter as a script
    Copy
    Copied
    <script
     type="text/javascript"
     src="https://webrtc.github.io/adapter/adapter-latest.js">
    </script>

Note: After pasting the above content, Kindly check and remove any new line added

  1. Add the Telnyx RTC SDK as a script
Copy
Copied
   <script
     type="text/javascript"
     src="https://unpkg.com/@telnyx/[email protected]/lib/bundle.js">
   </script>

Note: After pasting the above content, Kindly check and remove any new line added

  1. Initialize the client using your SIP credentials
Copy
Copied
  var client = new TelnyxWebRTC.TelnyxRTC({
         login:SIP USER,
         password:SIP USER PASSWORD,
  });

Note: After pasting the above content, Kindly check and remove any new line added

  1. Attach the event listeners to receive updates from the SDK
Copy
Copied
  client
       .on('telnyx.ready', () => console.log('ready to call'))
       .on('telnyx.notification', (notification) => {
         console.log('notification:', notification)
  });

Note: After pasting the above content, Kindly check and remove any new line added

  1. Inside the telnyx.notification event you can detect the incoming call and answer it. On this example we are anwering it as soon as we get the incoming call notification
Copy
Copied
  client.on('telnyx.notification', (notification) => {
      const call = notification.call;

      // Check the type of the notification
      if (notification.type === 'callUpdate' && call.state === 'ringing') {
          // Answer the call as soon as the notification is received.
          call.answer();
      }
  });

Note: After pasting the above content, Kindly check and remove any new line added

  1. Enable the microphone
Copy
Copied
client.enableMicrophone();

Note: After pasting the above content, Kindly check and remove any new line added

  1. Connect the client
Copy
Copied
client.connect();

Note: After pasting the above content, Kindly check and remove any new line added

  1. Now your application is capable of receiving voice calls.

How to test it

  1. Go to https://webrtc.telnyx.com/
  2. Login with SIP credentials (caller SIP credentials). At this point you should have created 2 SIP connections one for the caller and another for the callee.

WebRTC Setting

  1. Enter the destination SIP username (callee SIP connection) and press the call button.

WebRTC Dialer

  1. The telnyx.notification listener will be fired and the call will automatically be answered.

Test the vanilla example