InnovateAsterisk / Browser-Phone

How to auto call a number on opening the browser phone application? Pass the number to be called as a parameter to browser phone application.

Instead of user typing and dialling the other end, the call should go automatically in click of a button.

This would depend on how you have loaded the phone, if it's a full page as a tab, then you would have to write an extension in order to access the tabs array.

If you have loaded the phone as an IFRAME (loaded from the same domain), then you can simply access the IFRAME and call DialByLine(...) method on the contentDocument and pass the number to dial in there.

let phoneFrame = document.querySelector("iframe").contentDocument;
phoneFrame.DialByLine(...);

Browser-Phone/Phone/phone.js

Line 8710 in 1206196

function DialByLine(type, buddy, numToDial, CallerID, extraHeaders){

How to hide the iframe and return to the main screen when the call ends?

This page contains all the events emitted in the global space.

This is the one your are looking for:

Browser-Phone/Phone/index.html

Line 90 in 1206196

var web_hook_on_terminate = function(session){

So this would execute in the iframe global space. From here you would refer to the container page parent. and then unload the iframe. You would need to do your own checks for calls etc

Can you explain how to implement this. I'm not clear.

This is now in the source code:
https://github.com/InnovateAsterisk/Browser-Phone/blob/master/Phone/index.html

Hosted:
https://www.innovateasterisk.com/phone/popup.html

Is it possible to remove the iframe when the call ends?

If you use the click-to-dial button, it does. (After making a successful call)

p.s: it’s very rudimentary, and just shows some of the options. You would have to build it out further.

Thank you.

How to handle the incoming call if the browser phone application is not opened?

Then you need to show/hide the window, rather than open/close. I don't have the code at hand, but the library in use there is jQuery UI.

https://jqueryui.com/dialog/

Also make sure that you change the action of the close button to "hide"

Then you need to show/hide the window, rather than open/close. I don't have the code at hand, but the library in use there is jQuery UI.
https://jqueryui.com/dialog/
Also make sure that you change the action of the close button to "hide"

The earlier used dialog is only for making call on click. Where should we implement the jQueryUI dialog for incoming call?

If you want to keep the phone connected, and hidden in the background, you can add an open function (like above), and then directly after that include a hide function, on the page load. This will log the phone in, and leave it registered for calls. Then use the web_hook_on_invite to show the phone for an inbound call. (It will ring and show the answer option.)

Browser-Phone/Phone/index.html

Line 78 in 1206196

var web_hook_on_invite = function(session){

PS. Just remember that if you put the SIP credentials in an open public space, anyone can get them. Make sure you are expecting people to be logged in. Something like a CRM or even better a private CRM would be a good place. Then also remember to provision specific user details per user, so you can cycle credentials frequently.

How to make the registration happen at the launch of the parent application like CRM?

Then use the web_hook_on_invite to show the phone for an inbound call. (It will ring and show the answer option.)

Registration done and the window gets hidden using the open and close properties of the UI Dialog. But unable to show the phone on inbound call. Can you pls help.

$(this).dialog("show") and $(this).dialog("hide") is not working

Not sure if I understand the issue?
if $(this).dialog("show") works, that’s all you need.

You will have to call this code from the web hook inside the phone iframe, and refer to the parent. Method to show the phone

Its working. Thank you for the support.

How to implement the incoming call logic using firebase?

If you asking about Web Push notifications? then yes, you can register the browser for push notifications, and get Asterisk to initiate a push.

This is a page that you can use to play around with web push.
https://web-push-codelab.glitch.me/

It must be said tho, this is quite complicated stuff, and getting Asterisk to play along with this may not be so easy. You will have to register the browser for push, capture the token (and save it with the Asteris details), and then get asterisk to send a push, so that the correct browser window gets the notification. Also, when you get the notification, what are you going to do? If you intend to show the call answer window, it may be too late for Asterisk, it may have already sent the call. You may have to put Asterisk in a wait loop.

I have managed to fully achieve this in Siperb, but it take quite a lot of work, and only OpenSIPS can do what I needed. I needed it to take the inbound call, send the push, and then wait for the device(s) to come online. Only then do i send the call to the browser. If you have multiple devices (some registered and some not), then you have to handle each one in parallel and separately check each fork, to know if someone answered on any of their registrations.

How to prevent reregistration if its already registered and hidden? Now on passing the number to dial, it is reregistering. But I want to use the already registered and hidden window.

How to prevent reregistration if its already registered and hidden?

If the phone is registered, you don't need to do anything, the phone will be ready to receive the call.

Now on passing the number to dial, it is reregistering. But I want to use the already registered and hidden window.

You can check to see if the phone is visible and registered. userAgent.isRegistered() returns bool.

Each time I make an outgoing call, the registration happens first, then only the outgoing call happens. Why is the registration happening each time?

Code written in web_hook_on_register:

var web_hook_on_register = function(ua){
// console.log("web_hook_on_register", ua);
let urlParams = new URLSearchParams(window.location.search);
if(urlParams.has("d")){
window.setTimeout(function(){
console.log("Performing Auto Dial: ", urlParams.get("d"));
/**
* Primary method for making a call.
* @param {string} type (required) Either "audio" or "video". Will setup UI according to this type.
* @param {Buddy} buddy (optional) The buddy to dial if provided.
* @param {sting} numToDial (required) The number to dial.
* @param {string} CallerID (optional) If no buddy provided, one is generated automatically using this callerID and the numToDial
* @param {Array} extraHeaders = (optional) Array of headers to include in the INVITE eg: ["foo: bar"] (Note the space after the :)
*/
DialByLine("video", null, urlParams.get("d"));
}, 1000);
}

I am using this in Call Dispatcher module. In the Call Dispatcher, the emergency calls will be send to different vehicles. The video calling facility is provided to each vehicle assigned to a case. Whenenver the video call button is presssed, the communication with the server is established and the user registration happens and then only the call goes to the vehicle.

But in whatsapp there is no registration on making each call. Directly calling and ringing appears. Is it possible to establish the same behaviour in Browser Phone.

autocall a number