Geekly Articles each Day
📜 ⬆️ ⬇️

Several lines of JS code to call from browser to mobile phone

Flashphoner.createSession(...).createCall({callee:'+74957718000'}).call();

In this article we will explain how to make a button to call from the site page to a mobile or landline number.

Call pattern


First of all, you need a SIP account of the VoIP telephony operator . The operator "lands" a call that goes over the Internet (VoIP) and dials to a mobile or landline phone.

Our tasks in this case are as follows:
')
  1. Send SIP INVITE towards SIP operator.
  2. Accept SIP 200 OK from the operator.
  3. Receive sound from the operator.
  4. Send sound from the browser to the operator.

The browser does not work on honest SIP / TCP and SIP / UDP protocols, so in our scheme there will be an intermediary server that will talk to the operator on the classic SIP / UDP .


SIP account


To get a SIP account, you can register, for example, in the VoIP telephony service sipnet or from any other provider that provides lines for calls to mobile phones.

A SIP account consists of the following six parameters:

  1. Login
    For example alice123
  2. Name for authentication (may differ from login or match).
    For example alice123
  3. Password
    For example ******
  4. Domain
    For example sipnet.ru
  5. Proxy (may differ from domain or match)
    For example sipnet.ru
  6. Port (usually 5060)
    For example 5060

Simplified SIP Account


It often happens that the domain matches the outbound proxy and the login matches the authentication name , and the port uses the standard 5060 . In this case, the SIP operator can provide a SIP account in a simplified form:
Loginalice123
Password***
Domainsipnet.ru

This is already somewhat similar to the usual access to the web resource. Once accessed, you can test it with any of the softphones, for example Xlite, Linphone, Ekiga, etc.

Desktop Softphone Test


When using the Bria 4 softphone, the SIP connection settings look like this:


Usually the provider provides numbers to which you can make a SIP call. Some providers give free minutes with minimal recharge.

It remains to call from the softphone and make sure that SIP calls really go to normal phones. For example, call the Ministry of Communications on the phone +74957718000.


If the calls work normally via the desktop softphone, you can go to the browser phone and to the browser calls.

HTML page for a call


Browser calls will be made via WebRTC technology via Web Call Server 5 , which on the one hand works with the browser via WebRTC, and on the other hand it calls up to the SIP operator via SIP.


The code of the HTML page from which calls are made is quite compact and takes 14 lines:

 <!DOCTYPE html> <html> <head lang="en"> <script type="text/javascript" src="flashphoner.js"></script> <script language="javascript" src="click-to-call.js"></script> </head> <body onload="init_page()"> <button id="callButton" type="button" onclick="connectAndCall('+74957718000')">Call</button> <button id="hangupButton" type="button" onclick="hangup()">Hangup</button> <div id="remoteMedia" style="visibility: hidden"></div> <div id="localMedia" style="visibility: hidden"></div> <p id="status"></p> </body> </html>

The page has a Call button for a call and a Hangup button for resetting it. There is a field in which the status is displayed.

Div - elements localMedia and remoteMedia are used to embed objects into the page that are responsible for receiving and sending sound.

The flashphoner.js script is available for download in the Web SDK assembly.

Click-to-call.js script for a call


The click-to-call.js script contains 97 lines. Using this script, a connection is established to the server and a call is made.

 var localMedia; var remoteMedia; var outCall; //init API function init_page() { Flashphoner.init(); localMedia = document.getElementById("localMedia"); remoteMedia = document.getElementById("remoteMedia"); } //call function connectAndCall(number) { //if already connected, make a call if (Flashphoner.getSessions().length > 0) { call(number, Flashphoner.getSessions()[0]); } else { //SIP credentials var sipOptions = { login: "10001", authenticationName: "10001", password: "12345", domain: "192.168.1.3", outboundProxy: "192.168.1.3", port: "5060", registerRequired: false }; var connectionOptions = { urlServer: "wss://wcs5-eu.flashphoner.com:8443", sipOptions: sipOptions }; //create new connection to WCS server Flashphoner.createSession(connectionOptions).on(Flashphoner.constants.SESSION_STATUS.ESTABLISHED, function (session) { setStatus("Session", Flashphoner.constants.SESSION_STATUS.ESTABLISHED); //session connected, place call call(number, session); }).on(Flashphoner.constants.SESSION_STATUS.DISCONNECTED, function () { setStatus("Session", Flashphoner.constants.SESSION_STATUS.DISCONNECTED); onHangup(); }).on(Flashphoner.constants.SESSION_STATUS.FAILED, function () { setStatus("Session", Flashphoner.constants.SESSION_STATUS.FAILED); onHangup(); }); } } function call(number, session) { //disable call button document.getElementById("callButton").disabled=true; var constraints = { audio: true, video: false }; //prepare outgoing call outCall = session.createCall({ callee: number, visibleName: "Click To Call", localVideoDisplay: localMedia, remoteVideoDisplay: remoteMedia, constraints: constraints, receiveAudio: true, receiveVideo: false }).on(Flashphoner.constants.CALL_STATUS.RING, function () { setStatus("Call", Flashphoner.constants.CALL_STATUS.RING); }).on(Flashphoner.constants.CALL_STATUS.ESTABLISHED, function () { setStatus("Call", Flashphoner.constants.CALL_STATUS.ESTABLISHED); }).on(Flashphoner.constants.CALL_STATUS.FINISH, function () { setStatus("Call", Flashphoner.constants.CALL_STATUS.FINISH); onHangup(); }).on(Flashphoner.constants.CALL_STATUS.FAILED, function () { setStatus("Call", Flashphoner.constants.CALL_STATUS.FAILED); onHangup(); }); outCall.call(); } function hangup() { if (outCall) { outCall.hangup(); } } function onHangup(){ //will be invoked on hangup } function setStatus(callOrSession,status){ document.getElementById("status").innerHTML= callOrSession +" "+status; }

In this script, there are four main functions:


Initialization


Here we simply call the init () function and thus initialize the API.

 Flashphoner.init();

Establishing a server connection


Here we connect to the server using the secure websockets protocol and transfer the data of the SIP account so that the server, in turn, can connect to the SIP operator (provider).

  var sipOptions = { login: "10001", authenticationName: "10001", password: "12345", domain: "192.168.1.3", outboundProxy: "192.168.1.3", port: "5060", registerRequired: false }; var connectionOptions = { urlServer: "wss://wcs5-eu.flashphoner.com:8443", sipOptions: sipOptions }; Flashphoner.createSession(connectionOptions);

Call


Create a call and call the call () method to call. When you create a call, the callee parameter is passed - this is the number of the subscriber to whom we are calling, for example, the mobile number.

 outCall = session.createCall({ callee: number, visibleName: "Click To Call", localVideoDisplay: localMedia, remoteVideoDisplay: remoteMedia, constraints: constraints, receiveAudio: true, receiveVideo: false }); outCall.call();

Call reset


To reset the call, call the hangup () API method

 outCall.hangup();

Test the call page


To test it in Google Chrome, you need to upload click-to-call.html and click-to-call.js pages to a web server with https support. Chrome gives access to the microphone only from secure pages (https). Script code is available for download at this link .

The scripts connect to the test server wss: //wcs5-eu.flashphoner.com: 8443 . To test with your own server, you need to install a WCS5 server on a Linux system. Download WCS5 server can be on this link .

Open the click-to-call.html page in the Google Chrome browser and click the Call button. The server accepts the call and sends the status ESTABLISHED. The mobile subscriber picks up the phone and as a result, a call is established between the browser and the mobile phone.


Thus, we have analyzed the SIP accounts provided by IP-telephony providers, tested calls with softphones, created two files for a call from the browser click-to-call.html and click-to-call.js and tested these scripts by calling from the Google Chrome browser to a mobile phone, through a SIP-operator. The call from the browser goes to Web Call Server 5 and further to the SIP operator with a touchdown on a mobile phone.

Links


SIP - session setup protocol used in VoIP telephony
Web Call Server - WebRTC-SIP gateway for browsers with SIP telephony.
Web SDK - JavaScript server API for developing browser phones. The build contains a flashphoner.js script.
Source - click-to-call.html and click-to-call.js scripts

Source: https://habr.com/ru/post/327466/

More articles:


All Articles