WebRTC is a powerful communication tool available for developers which provides the capability implement WebRTC for making and receiving calls directly within their web applications.
npm install ringcentral-web-phone
npm install ringcentral-web-phone
Now, let's take a look at the code behind the Demo to become familiar with developing RingCentral WebRTC application integrations,
Since WebRTC is browser-based, you will need to include two HTML5 video tags with some specific properties in your markup to operate the RingCentral Web Phone.
<video id="remoteVideo" hidden="hidden"></video> <video id="localVideo" hidden="hidden" muted="muted"></video>
src attributes for your application may differ depending upon your method of installation and where you install your vendor libraries.
Next we will take a look at the templatized markup used to load various views of the Web Phone Demo.m
This template is used when the application code receives an incoming voice call.
When users have successfully authenticated with the demo application, this is the default UI displayed and is used for placing outbound voice calls using WebRTC.
When the demo application has initially loaded, and the user has not authenticated, this UI is displayed which supports using Password Flow Authentication (which actually should not be used with browser-based applications).
When a call has been placed (outbound) or received (inbound), and successfully accepted, this is the template UI which will be displayed to the user. In it, are all the primary operations of the Web Phone:
We begin by setting up application variables which are required, and caching some jQuery selectors for simplified reference.
This function handles loading the templates of the demo. This is not a recommended pattern for production applications, since it introduces some potential memory leaks with any event bindings, but as this is a demo app...we do not mind as much.
Once we have this data, we cache it in Local Storage of the browser, and lastly we retrieve information about the extension which has just authenticated.
Once we have received the information about the currently authenticated extension, we attempt to provision SIP (which is used to determine if we are able to register as a WebRTC user for making and receiving calls over WebRTC).
Once we have successfully received the client information and provisioned SIP, we pass the SIP provisioning response to our
register function which is responsible for creating the Web Phone and User Agent instances as well as registering event handlers on the User Agent object for the following events:
Then the Web Phone object is returned to the
register method caller.
Once we have successfully registered and created the Web Phone, the promise chain calls the
makeCallForm function which loads the appropriate UI template (Make Call Form) and registers an eventHandler to store the last dialed number, and which then executes the
makeCall method (that actually uses the Web Phone to place the outbound voice call using WebRTC).
makeCall method expects a phone number and home country id to be passed.
This method defines a new
session which is the result of executing the Web Phone's User Agent's invite method.
invite method of the User Agent expects to be provided:
onAccepted method is called with the session (result of calling the User Agent's invite method) in the previous step.
This is one of the longest methods in the application (depending upon the types of functionalities you desire in your Web Phone application integrations). Since we include every operation available on the Web Phone, you can see the complete reference of how we handle each of these events here from both a UI and session perspective.
It is important to note that the
onAccepted method is used for both inbound and outbound voice calls in the demo, but you may have differing use cases and requirements that demand a different architecture.
Also, you will see that all operations are performed on the session object while you are using the Web Phone library, but by using this resource your integration code can be simplified considerably.