A fully featured browser based WebRTC SIP phone for Asterisk
Project Page: https://github.com/InnovateAsterisk/Browser-Phone
Commercial Version: Available here: 
Siperb www.siperb.com
This web application is designed to work with Asterisk PBX. Once loaded application will connect to Asterisk PBX on its web socket, and register an extension. Calls are made between contacts, and a full call detail is saved. Audio Calls can be recorded. Video Calls can be recorded, and can be saved with 5 different recording layouts and 3 different quality settings. This application does not use any cloud systems or services, and is designed to be stand-alone. Additional libraries will be downloaded at run time (but can also be saved to the web server for a complete off-line solution).
Hosted versions/samples
- https://www.innovateasterisk.com/phone/ (Default Layout – contains a welcome screen)
- https://www.innovateasterisk.com/phone/responsive.html (Responsive Sample Layout – contains ads)
- https://www.innovateasterisk.com/phone/popup.html (Popup Sample Layout – contains ads)
Hi Conrad, a great project.
One question, you think it would work in FreePBX with PJSIP? I would like to use your project to make a webphone receive/make calls and be able to finish them (tag) and then make a statistic of all the calls that an operator has received (20 sales calls, 15 support, etc.)
The video part is not important to me, only audio calls.
Thanks in advance,
José A. Sánchez
Hi José,
Please will you make sure that in the future you post issues and questions with Browser Phone to https://github.com/InnovateAsterisk/Browser-Phone/issues
> you think it would work in FreePBX with PJSIP?
Yes, the Browser Phone application works with FreePBX and PJSIP. A few other users have tested.
> I would like to use your project to make a webphone receive/make calls and be able to finish them (tag) and then make a statistic of all the calls that an operator has received (20 sales calls, 15 support, etc.)
What you are looking for is the web_hooks. Take a look at the index.html page for template web hook. The Browser Phone also uses jQueryUI so you can present a data collection window to the user.
I have implement this but when we refresh page call disconnect issue appear.
I’m not sure if you can prevent a user from refreshing a web page.
Hi Conrad: amazing project, it is really awesome. It is working almost perfect for me in asterisk 18, however, I got an issue with messaging:
Browser user 1 —> to Browser user 2 —no message delivered, despite according to asterisk is successful
Browser user 2 —> to Browser user 1 —no message delivered, despite according to asterisk is successful
Did you test with asterisk 18? Or it is recommended downgrade to 16 and test again?
Asterisk (or SIMPLE message system) doesn’t really have a message delivery option. The ticks that you see in the video are for the message to get to the server, and them from there, it’s not know if the message gets to the user… its just a limitation of the system.
Asterisk 18 is a good option. I mainly use it now – I think 18 is the LTS version now.
Hello Conrad:
Now it is working perfectly on asterisk 18, it was my fault during the config time. Congratulations again for this amazing contribution.
Thanks so much for making this web phone project.
It is really an amazing system.
Just a quick question.
Is there a way to have the dialpad show up by default, or if there aren’t any call logs, it should show up instead of a big empty area?
And is there a way to import buddies statically or via php, so I can populate them from my extension list instead of automatically when a call is made?
Thanks again
“Is there a way to have the dialpad show up by default, or if there aren’t any call logs, it should show up instead of a big empty area?”
I believe that if there are no contacts, this is the current behaviour.
“And is there a way to import buddies statically or via php, so I can populate them from my extension list instead of automatically when a call is made?”
If you make the index page into a php page, you can populate the users local storage by simply using your own JavaScript to do this – just be careful when you do this that you don’t add multiple times, so the script should check that you don’t already have a buddy. Some sort of Server to client “Synchronise” code would be best there.
Hi Conrad, nice meeting you. Your explanation of how to install a browser phone is amazing ! I like the way you get into the details without getting people confused. I have done 2 installations, one with Asterisk 16 and the other with Asterisk 18 (both with pjsip). Only the first one works partially (extensions register and I can make calls, but I get no audio either way). Sound tests pass in both ends. Sometimes, from certain extensions I get the following message on Asterisk´s CLI when I pick up a call:
No one is available to answer at this time (1:0/0/0)
and the call is terminated with the message “Not Acceptable Here” on the application´s chat. Messaging does work fine.
Another error I get when some extensions try to call is:
Couldn’t negotiate stream 0:audio-0:audio:sendrecv (nothing)
and I get the “Not Acceptable Here” message on the chat.
Any clues of what is happening here ?
Thank you !
Check that the endpoint is set with webrtc=yes. This configures all the settings required for webrtc calling.
Also, its best that you use https://github.com/InnovateAsterisk/Browser-Phone/issues in the future.
See you there.
please how i can implment in .net core
The index page could quite easily be changed to .net core. This would allow you to store some settings, or even session information in the “backend”. This may be useful to, for example, store actual sip credentials in a database. Otherwise, there is little else .net is required for.
Hello Conrad,
Thanks a lot for building a great client and makeing it opensource.
In Browser Phone UI there is a option to use XMPP as chat engine instead of SIP. I have installed OpenFire and created same users as configured in pjsip.conf.
Could you please help with the changes needed in extension.conf, pjsip.conf or any other file to connet browser phone with Openfire.
Thanks in advance
Hello, a magnificent job, I have tried to install it locally on a computer and I always get the message connecting to Web Socket and it does not work for me, what could be the reason?
You will have to check the console log in the browser. Chrome and almost all other browsers have a developer console that outputs error messages from javascript.
Also, its best that you use https://github.com/InnovateAsterisk/Browser-Phone/issues in the future.
See you there.
Hello
First of all, I want to say thank you for this great project. I implemented your in the cloud, remote users do not receive the audio stream. how can this be corrected. thank you
Thanks for you message. There are various reason that can cause this. Please feel free to open an issues ticket at: https://github.com/InnovateAsterisk/Browser-Phone/issues
Hi how are you? first of all I wanted to congratulate you for this great application! I wanted to ask you some things:
1- I want to implement a Login page and bring me from asterisk (or another side) the data for the registration, how do I pass that data via Backend? via API or something? is it supports?
2- Is there any way to upload a telephone directory via http? I already have one in XML and I wanted to see how to load that list on the left. or elsewhere I don’t know if you have in mind to develop something like this in the future.
Thanks a lot!
1 – This is quite a common request, and yes, it can be done with any server side code language. Let’s say you use PHP. Then simply take the index.html and change it to index.php, then use normal php code to connect to the database, or do whatever you want really, and have the output of this work render to the page. You can mix your server side output with the client side code. I would recommend you mainly use the provided index page for this, leaving the majority of the elements in place there. Remember that as with all client side javascript there isn’t any way to “hide” the sensitive data that comes from the server. But you could create random data each time the page is loaded, that would mean the registration is only valid for that session (this minimises your risk considerably). Once you have created the sip data, and written this to asterisk database, or flat file (and reloaded Asterisk), you will want to parse that data to the client side code. To do that, simply write out the password to a custom javascript block with the defined json object of ‘phoneOptions’
Example: https://github.com/InnovateAsterisk/Browser-Phone/blob/acd80e551208098ec12effbc4cbceefd0ccb579f/Phone/index.html#L32
You would add any items that are defined in:
https://github.com/InnovateAsterisk/Browser-Phone/blob/acd80e551208098ec12effbc4cbceefd0ccb579f/Phone/phone.js#L392
Like SipUsername and SipPassword
2- There isn’t currently a way, however you could make your own, and populate the “buddies” with your own custom code. The Browser Phone will probably never have some sort of PhoneBook option as it was built in much the same lines as WhatsApp etc – in other words, your phone or pc, probably already has a phone book, and it doesn’t need to have another one. What may be added at some point is some sort of way to access existing phonebooks. This is mainly functionality of mobile phones, but for the PC Browser it will be a tricky task from a security and permission perspective. (Just imagine if javascript could access peoples address books!!! ouch). Having a hosted service of some sort may work. I’ll consider this option.
Hi!, this webphone is incredible.
I always use it in my office, I wanted to ask you how the variables should be defined in the “index.html” so that the options are completed by themselves.
Example:
var phoneOptions = {
welcomeScreen: null,
wssServer: “172.27.0.8”, // or 172.27.0.8 or in var?
wssServer : “172.27.0.8”,
WebSocketPort : “4443”,
Thanks for the feedback!
Basically, you can add any option from here:
https://github.com/InnovateAsterisk/Browser-Phone/blob/acd80e551208098ec12effbc4cbceefd0ccb579f/Phone/phone.js#L392
to here:
https://github.com/InnovateAsterisk/Browser-Phone/blob/acd80e551208098ec12effbc4cbceefd0ccb579f/Phone/index.html#L32
So if the index.html was actually a php page, the backend code could be collecting these values for you, and populating the client side code.
‘phoneOptions’ is standard JSON, so:
wssServer: “172.27.0.8”or
wssServer: myVariablebut not:
wssServer: 172.27.0.8thanks, when I enter the variables:
Profile Name: “Gerardo”,
SipUserName:”1111″
in Bphone show me name correctly, but When I enter the settings : wssServer:”x.x.x.x”, WebSocketPort:”8089″. The config menu not show me this config and not found call another bphone.
I should disable some option?
for the software to load the configuration in phoneOptions. Can you get the example?
You really don’t need to be changing the source code. All the options you need are presented to you in the account settings. If the account is not set up, the browser phone will prompt you to enter the account settings.
You can try with an IP address, but this is unlikely to work. WebRTC is a secure system, base of TLS certificates, so this means you will have to connect to your asterisks box over a secure connection. An IP doesn’t provide this.
Thanks team Innovate for the great work.
I am currently using version 13 of Browser-Phone with asterisk 18.15, pjsip and the instance messaging is not delivering.
The call is going fine.
I will appreciate your help
There is little difference when it comes to messaging between 13 and 18. There would be an error of sorts that shows on the Asterisk CLI or the Browser Console. If you have an error post it here, then we can see what the issue is.
Hi Conrad, nice meeting you. Your explanation of how to install a browser phone is amazing ! I like the way you get into the details without getting people confused. I have done 2 installations, one with Asterisk 16 and the other with Asterisk 18 (both with pjsip). Only the first one works partially (extensions register and I can make calls, but I get no audio either way). Sound tests pass in both ends. Sometimes, from certain extensions I get the following message on Asterisk´s CLI when I pick up a call:
No one is available to answer at this time (1:0/0/0)
and the call is terminated with the message “Not Acceptable Here” on the application´s chat. Messaging does work fine.
Another error I get when some extensions try to call is:
Couldn’t negotiate stream 0:audio-0:audio:sendrecv (nothing)
and I get the “Not Acceptable Here” message on the chat.
Any clues of what is happening here ?
Thank you !
Couldn’t negotiate stream 0:audio-0:audio:sendrecv (nothing)
This is often caused by forgetting the webrtc=yes in the Endpoint settings. First check that its in place. Its basically a waring that there is no encrypted stream found.
Hi Conrad, congratulations on your great work!
I have a problem related to the SFU, I do all the configuration (pjsip.conf, confbrige) but the video does not work.
Thanks!
When you say does not work, you mean the video streams are blank? There is quite a lot of information in the developer console, please will you create a issues ticket on github, be sure to include any errors on the Console.
https://github.com/InnovateAsterisk/Browser-Phone/issues
Hello Conrad, how are you? excellent work with the Browser Phone!
I tried to implement the Bphone by publishing it to the internet on a secure server, now when I configure the account to register, it tries from my PC to send the registration package to my central which is not public, in my head I thought that the traffic was like this:
Client > BPhone > Asterisk
But actually it is:
Client > Asterisk.
Is there any way to make the browser phone connect to my central and not the client’s PC?
Thank you!
Correct, the Browser Phone IS the actual SIP client, and it uses a Javascript WebSocket connection to establish a tunnel-like connection directly to the voice server (like Asterisk).
Its important to note that the leg of the communication line from the Browser/Client to the Asterisk server can be terminated at another point, and does not have to directly be terminated on the actual Asterisk Server. You could use a simple HTTP proxy to terminate the websocket connection, and proxy the (no unencrypted) messages onward to the Asterisk Box.
Browser/Client <=== Secure WebSocket ====> HTTPS Proxy <====== WebSocket =====> Asterisk
But remember that the DTLS stream (audio & video packets) will always have to go point-to-point, and since Asterisk is a B2BUA, this will be directly to Asterisk Media ports.
Browser/Client <=== Secure WebSocket ====> HTTPS Proxy <====== WebSocket =====> Asterisk
Browser/Client <====================== DTLS (Audio & Video) ==================> Asterisk
If you need to break out of DTLS or go to regular SIP, then its best to host a server (Like Asterisk) that can do this for you. (This is the point behind SIPERB https://www.siperb.com)
Conrad,
This is an amazing project!
Are you taking suggestions? sponsorships? Somethings that we would love to add:
– Group chats/team chats. Is this possible?
– Notes/Comments or Tags at the end of each call. Is this possible?
And then:
– Configurabl/actionable webhooks/API posts once a call is connected or disconnected.
Thanks
The best place to post these suggestions is directly on Github: https://github.com/InnovateAsterisk/Browser-Phone/issues.
There is already a notes and tags option for any call. (You click the little down arrow on the right as the call appears in the CDR/stream).
There are also a number of web hooks. For this it’s best to check the source code of the sample index.html file provided. (https://github.com/InnovateAsterisk/Browser-Phone/blob/master/Phone/index.html)
As for Group chats, this changes things considerably as the server now has to maintain the group structures etc. Its not impossible, but does require a new server backend. I have enabled XMPP, that should open things up to these kind of features, but it still needs quite a lot of work. I’m also considering changing this to Signal (WhatsApp), so that communication can be end-to-end encrypted.
Keep an eye out for progress on the GitHub site: https://github.com/InnovateAsterisk/Browser-Phone
Hi,
Thanks for your contributon.
Can we configure chat groups ?
Thanks…
Chat groups are coming soon, but not possible now.
Hi Conrad, I want to ask if it’s possible to receive normal phone calls in this browser phone app. As in can people call in from their normal phones and I receive the call in the browser?
Absolutely. Remember everything you normal Asterisk PBX can do is still possible. The browser phone just acts as an extension like you would have normally had on your desk or in your pocket.
Probably should’ve added this to my last question but do I need a raspberry pi to implement this?
Nope, in fact there is a video on how to host this solution on AWS and Google VPC.
Can you share a link please?
Hi,
After configuration, I noticed that the user status is not showing.
It shows Unknown all the time uses asterisk 18
in CLI I can see
== Extension Changed 200[subscriptions] new state Idle for Notify User nskigaki
core show hints
-= Registered Asterisk Dial Plan Hints =-
100@subscriptions : SIP/User1 State:Idle Presence:not_set Watchers 1
200@subscriptions : SIP/User2 State:Idle Presence:not_set Watchers 1
300@subscriptions : SIP/User3 State:Unavailable Presence:not_set Watchers 0
What settings have you applied in the Browser phone side. There is a text field that allows you to specify the id to subscribe to, This must be the same as what you specify in the hint of your dial-plan.