Creating a phone in a browser using WebRTC and Plivo service
Recently, the WebRTC standard was developed that allows streaming data transfer between browsers. Chrome 17, Opera 12, Firefox 18 (as well as the versions above mentioned) to some extent already support this standard. There is also a webrtc4all extension that allows other browsers to work with WebRTC. I will not describe here the advantages, disadvantages and prospects of the technology, I will go straight to practical use.
There is also a Plivo service that allows you to manage calls in real time using the API. To make calls, the client can create a SIP account or rent a number. At the moment, the numbers are available in more than forty countries, among which Russia, unfortunately, is not. Also through the API, you can create, modify and delete numbers and accounts. Another important thing that plivo has is applications. Applications allow you to combine numbers and SIP accounts. In the application settings there is a mandatory option - Answer URL, and two optional - Fallback URL and Hungup URL. Actually from these URLs, Plivo receives commands for managing calls.
Details on the API can be found here . I will describe only those parts that are used to create the phone. To manage calls, you need to return XML with commands when you request the Answer URL. Thus, you can redirect the call to a number, reject the call, play music, read the text. Plivo always sends incoming and outgoing calls to the Answer URL. API for managing numbers, accounts and applications - simple HTTP requests to certain URLs with specific parameters. Plivo provides libraries to simplify working with the API https://github.com/plivo . I used plivo-php. Do not forget to install dependencies for this library - php-curl, php-openssl, pear package HTTP_Request2. Also Javascript API was used directly for the client side of the phone. This API allows you to log in using a SIP account, make, accept, reject a call directly in the browser.
I needed to create a telephone for the site where companies are registered as groups whose members are employees of companies. Each employee or department has its own number, so it was necessary to link the number and SIP account. You can do without rented numbers, but then calling from a regular phone to the browser will be problematic.
Briefly explain how it will work. Each user on the site has its own SIP account and a rented number. All SIP accounts must be tied to one application (let's call it DirectDial Application), all numbers must be tied to another application (let's call it Number Application). Different numbers can be tied to different applications, as I did, because there are different user groups on the site. However, the Answer URL they may be the same. When the user loads the page, using the js API, we will login using the appropriate SIP account. Further, the user can make calls from the browser. Data on such calls will be sent to the Answer URL DirectDial Application. The answer URL should always return any XML response, since Plivo will not call the number dialed by the user if you do not send the appropriate command. Data on an incoming call is sent to the Answer URL Number Application'a. Here is the same situation - the answer must be sent anyway. In my case, I simply searched the SIP database for the account corresponding to the dialed number and redirected the call to this account, then the user saw the incoming call in the browser.
')
First you need to create a DirectDial Application. Go to https://www.plivo.com/app/create/ and create an application. In Application name we write DirectDial Application (any other name is possible), in the Answer URL the corresponding URL (let it be site.com/dda_answer ). Check the Default endpoint application checkbox, then click Create. Endpoint is the same as a SIP account. I am not an expert in the SIP protocol, and I can not say which name is more correct. When making an outgoing call from a SIP account to site.com/dda_answer , a POST request will arrive with approximately the following parameters:
Almost always Direction will be inbound. Therefore, it is better to determine the type of call based on the parameters From and To. The easiest answer to this query:
The result will be called the called_number number, in which rented_number will be displayed as the incoming number. In my case, it was a rented number corresponding to the sipname8905 account. XML can be created using plivo-php. Called_number should be transmitted in the form of 795023423434, that is, without the “+” sign in front of the number and must contain the code of the country, city and cellular operator.
When the call is completed, a request for the Answer URL will also be sent (if you specified the Hangup URL when creating the application, the request will be sent to it). Query parameters look like this:
CallStatus and HangupCause may be different. This is the case when the number was busy.
Here is an example script for the Answer URL DirectDial Application. I used this example by adding methods to it to save the history of outgoing calls. The easiest answer is:
We now turn to Number Application. You also need to create a new application, specifying a different Answer URL, you do not need to check the Default endpoint application checkbox. If you have this is the only application for rented rooms, then you can note the Default number application. Now, when someone calls the rented number that is associated with the Number Application, Plivo will send a request to the Answer URL of this application. Query parameters will look something like this:
The response to this request must also be necessarily sent. In my case, I search for the SIP account corresponding to rented_number, and redirect the call to the SIP account. The answer is:
The connection between the SIP account and the number is stored in my database, so do not try to search for how to do this through the API or in the settings for Plivo. The script is very similar to the one used for the Answer URL DirectDial Application. In this place, you can create an answering machine by sending answers with the necessary commands. Also, if you did not specify the Hangup URL when creating the Number Application, then at the end of the call you will receive the same request as for the Answer URL DirectDial Application. And the answer here may be the same.
We now turn to the most interesting - to the phone. An example can be found here . First, connect the js provided by Plivo
Now we can initialize the Plivo object.
webrtcNotSupportedAlert is a user-defined function that will be called after initialization if the browser does not support webRTC technology. onReady will be called if the browser supports webRTC. In the onReady method, it is convenient to log in the user if the username and password are defined in advance, and to bind the methods to Plivo events. I will give an example of the minimum required code.
A list of all events is available here . You can also set your own ringtone and something different instead of beeps.
This service is convenient to use to create a hotline, or to enable customers from another country to easily and cheaply contact you by renting a number in this country.
But it will not do without a fly in the ointment. It works so far only in Chrome. And there are problems with sound in versions 24 and 25. In Chrome 23, everything worked fine.
There is also a Plivo service that allows you to manage calls in real time using the API. To make calls, the client can create a SIP account or rent a number. At the moment, the numbers are available in more than forty countries, among which Russia, unfortunately, is not. Also through the API, you can create, modify and delete numbers and accounts. Another important thing that plivo has is applications. Applications allow you to combine numbers and SIP accounts. In the application settings there is a mandatory option - Answer URL, and two optional - Fallback URL and Hungup URL. Actually from these URLs, Plivo receives commands for managing calls.
Details on the API can be found here . I will describe only those parts that are used to create the phone. To manage calls, you need to return XML with commands when you request the Answer URL. Thus, you can redirect the call to a number, reject the call, play music, read the text. Plivo always sends incoming and outgoing calls to the Answer URL. API for managing numbers, accounts and applications - simple HTTP requests to certain URLs with specific parameters. Plivo provides libraries to simplify working with the API https://github.com/plivo . I used plivo-php. Do not forget to install dependencies for this library - php-curl, php-openssl, pear package HTTP_Request2. Also Javascript API was used directly for the client side of the phone. This API allows you to log in using a SIP account, make, accept, reject a call directly in the browser.
I needed to create a telephone for the site where companies are registered as groups whose members are employees of companies. Each employee or department has its own number, so it was necessary to link the number and SIP account. You can do without rented numbers, but then calling from a regular phone to the browser will be problematic.
Briefly explain how it will work. Each user on the site has its own SIP account and a rented number. All SIP accounts must be tied to one application (let's call it DirectDial Application), all numbers must be tied to another application (let's call it Number Application). Different numbers can be tied to different applications, as I did, because there are different user groups on the site. However, the Answer URL they may be the same. When the user loads the page, using the js API, we will login using the appropriate SIP account. Further, the user can make calls from the browser. Data on such calls will be sent to the Answer URL DirectDial Application. The answer URL should always return any XML response, since Plivo will not call the number dialed by the user if you do not send the appropriate command. Data on an incoming call is sent to the Answer URL Number Application'a. Here is the same situation - the answer must be sent anyway. In my case, I simply searched the SIP database for the account corresponding to the dialed number and redirected the call to this account, then the user saw the incoming call in the browser.
')
First you need to create a DirectDial Application. Go to https://www.plivo.com/app/create/ and create an application. In Application name we write DirectDial Application (any other name is possible), in the Answer URL the corresponding URL (let it be site.com/dda_answer ). Check the Default endpoint application checkbox, then click Create. Endpoint is the same as a SIP account. I am not an expert in the SIP protocol, and I can not say which name is more correct. When making an outgoing call from a SIP account to site.com/dda_answer , a POST request will arrive with approximately the following parameters:
[Direction] => inbound [From] => sip:sipname8905@phone.plivo.com [CallerName] => sipname8905 [BillRate] => 0.00400 [To] => called_number [CallUUID] => 138caf72-615d-11e2-8f6e-659f0688e76c [CallStatus] => ringing [Event] => StartApp Almost always Direction will be inbound. Therefore, it is better to determine the type of call based on the parameters From and To. The easiest answer to this query:
<?xml version="1.0" encoding="utf-8"?> <Response> <Dial callerId="rented_number"> <Number>called_number</Number> </Dial> </Response> The result will be called the called_number number, in which rented_number will be displayed as the incoming number. In my case, it was a rented number corresponding to the sipname8905 account. XML can be created using plivo-php. Called_number should be transmitted in the form of 795023423434, that is, without the “+” sign in front of the number and must contain the code of the country, city and cellular operator.
When the call is completed, a request for the Answer URL will also be sent (if you specified the Hangup URL when creating the application, the request will be sent to it). Query parameters look like this:
[Direction] => inbound [BillDuration] => 0 [From] => sip:sipname8905@phone.plivo.com [CallerName] => sipname8905 [HangupCause] => USER_BUSY [BillRate] => 0.00400 [To] => called_number [Duration] => 0 [CallUUID] => 138caf72-615d-11e2-8f6e-659f0688e76c [CallStatus] => busy [Event] => Hangup CallStatus and HangupCause may be different. This is the case when the number was busy.
Here is an example script for the Answer URL DirectDial Application. I used this example by adding methods to it to save the history of outgoing calls. The easiest answer is:
<?xml version="1.0" encoding="utf-8"?> <Response> <Hangup/> </Response> We now turn to Number Application. You also need to create a new application, specifying a different Answer URL, you do not need to check the Default endpoint application checkbox. If you have this is the only application for rented rooms, then you can note the Default number application. Now, when someone calls the rented number that is associated with the Number Application, Plivo will send a request to the Answer URL of this application. Query parameters will look something like this:
[Direction] => inbound [From] => calling_number [CallerName] => +calling_number [BillRate] => 0.00900 [To] => rented_number [CallUUID] => 4f26b9b5-4468-4d95-8f52-e24b084b8a76 [CallStatus] => ringing [Event] => StartApp The response to this request must also be necessarily sent. In my case, I search for the SIP account corresponding to rented_number, and redirect the call to the SIP account. The answer is:
<?xml version="1.0" encoding="utf-8"?> <Response> <Dial callerId="calling_number"> <User>related_endpoint</User> </Dial> </Response> The connection between the SIP account and the number is stored in my database, so do not try to search for how to do this through the API or in the settings for Plivo. The script is very similar to the one used for the Answer URL DirectDial Application. In this place, you can create an answering machine by sending answers with the necessary commands. Also, if you did not specify the Hangup URL when creating the Number Application, then at the end of the call you will receive the same request as for the Answer URL DirectDial Application. And the answer here may be the same.
We now turn to the most interesting - to the phone. An example can be found here . First, connect the js provided by Plivo
<script type="text/javascript" src="https://s3.amazonaws.com/plivoweb-sdk/plivo.min.js"></script> Now we can initialize the Plivo object.
Plivo.onWebrtcNotSupported = webrtcNotSupportedAlert; Plivo.onReady = onReady; Plivo.init(); webrtcNotSupportedAlert is a user-defined function that will be called after initialization if the browser does not support webRTC technology. onReady will be called if the browser supports webRTC. In the onReady method, it is convenient to log in the user if the username and password are defined in advance, and to bind the methods to Plivo events. I will give an example of the minimum required code.
onIncomingCall = function (acc_name) { // $('#answer-button').click(function(){Plivo.conn.answer();}); } onReady = function () { Plivo.conn.login(username, pass); Plivo.onIncommingCall = onIncommingCall; $('#button-call').click(function(){ var numb = $('#number-textfield').val().replace(/[\D,\s]/g, ''); Plivo.conn.call(numb); }); $('#button-hangup').click(function(){ Plivo.conn.hangup(); }); } A list of all events is available here . You can also set your own ringtone and something different instead of beeps.
This service is convenient to use to create a hotline, or to enable customers from another country to easily and cheaply contact you by renting a number in this country.
But it will not do without a fly in the ointment. It works so far only in Chrome. And there are problems with sound in versions 24 and 25. In Chrome 23, everything worked fine.
Source: https://habr.com/ru/post/171867/
All Articles