A fully featured browser based WebRTC SIP phone for Asterisk
Browser Phone 3.x
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). Step-by-step Guide
Browser Phone 4.0
Please note: The Browser Phone project version 4.0 will be developed under Siperb. Siperb is already hosted and offers both the web Softphone and mobile sip client, and the necessary SIP to WebRTC Proxy to connect to your PBX. Siperb offers much more, including: Hosting, Provisioning, Transcoding (from DTLS to regular RTP), and a complete history of calls and conversations.
It’s free and open source – try now : https://www.siperb.com/phone/
WebRTC Browser Phone
The below video illustrates how to install Asterisk and the Browser Phone on a Raspberry Pi. There also a video on Installing Asterisk and the Browser Phone in the cloud.
Browser Phone Project Home Page: https://www.browser-phone.org
Source Code (GitHub): https://github.com/InnovateAsterisk/Browser-Phone
Hosted versions/samples:
- https://www.innovateasterisk.com/phone/ (Default Layout – contains a welcome screen)
- https://www.innovateasterisk.com/phone/popup.html (Popup Sample Layout – contains ads)
- https://www.innovateasterisk.com/phone/responsive.html (Responsive Sample Layout – contains ads)
Docker
Browser Phone now offers a Dockerfile. It is by far “The easiest way to kick the tires on WebRTC“. It comes fully configured with 3 users, and the SSL certificate needed to run your tests. It may take a while to build, but it’s literally a 1, 2, 3 process.
Features v0.3.x
- SIP Audio Calling
- SIP Video Calling
- XMPP Messaging
- Call Transfer (Both Blind & Attended)
- 3rd Party Conference Call
- Call Detail Records
- Call Recording (Audio & Video)
- Screen Share during Video Call
- Scratchpad Share during Video Call
- Video/Audio File Share during Video Call
- SIP (text/plain) Messaging
- SIP Message Accept Notification (not delivery)
- Buddy (Contact) Management
- Useful debug messages sent to console.
- Works on: Chrome (all features work), Edge (same as Chrome), Opera (same as Chrome), Firefox (Most features work), Safari (Most feature work)
- Asterisk SFU – Including talker notification and Caller ID
- Dark Mode & Light Mode – System Setting Detects
XMPP Features v0.2.x
- User Login & Auth (Use SIP credentials)
- Buddy List (Roster) Saved on Server
- Buddy vCard
- Buddy Picture Upload
- Message Typing Indication
- Message Delivery & Read Notification
- Offline Message History (If supported by server)
- Tested to work with Openfire
Server; Requires
- Asterisk PBX version 13|16|17|18 (with Websockets and Text Messaging, chan_sip or chan_pjsip)
Server; Optional
- Openfire XMPP Server
JavaScript Dependencies
- sip-0.20.0 : WebRTC and SIP signalling library
- jquery-3.3.1 : JavaScript toolkit
- jquery.md5 : Md5 Hash plug-in (unused)
- Chart-2.7.2 : Graph and Chart UI
- jquery-ui : Windowing & UI Library
- fabric-2.4.6 : Canvas Editing Library
- moment-2.24.0 : Date & Time Library
- croppie-2.6.4 : Profile Picture Crop Library
- strophe-1.4.1 : XMPP Library
Note: These files will load automatically from CDN.
StyleSheet Dependencies
- normalize-v8.0.1 : CSS Normalising Stylesheet
- roboto : Roboto Font
- font-awesome-4.7 : Icon Font library
- jquery-ui : For jQuery UI
- croppie-2.6.4 : For Croppie
Note: These files will load automatically from CDN.
Lib Folder Download (Off-line)
You can download the lib folder containing all related library files: https://github.com/InnovateAsterisk/Browser-Phone/tree/master/lib
Note: These files are provided “as-is” for your convenience. Each library folder may contain its own licence and terms of use please refer to the original license holder for more details.
Screenshots
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.
Hello,
Thank you very much for your great contribution to the community, just a simple question, is there a way to log out so that another user can connect? I see that after the first login it is impossible to log out, the only way is to delete cache and cookies and reset the browser I don’t know if there is any way to do this. Another option I was thinking about is to host several versions of the webphone on the same web server with predefined configurations. Thank you very much in advance for your response.
Thank you
The hosted Browser Phone was not designed with this function in mind, however, you are able to grab a clone of the project and develop your own customisations. Many people do this with they own plugins. This could be used to say, provision sip details according to the logged in user, and clean up the previous session etc.
Good afternoon, thank you for the great application, I would like to know how to integrate it into React Native or even Kotlin?
Hi Joshua, I spent ages looking at different ports for this project, but in the end i found the most up-to-date software platform, and the system that involved no re-writing, was actually to simply use the native browser view option for both Android and iOS. This comes with some of its own limitations that I am hoping to overcome.
Hi Conrad,
Great work and thank you for your contribution to VoIP OpenSource community.
I’ve been trying to send the authentication changing index.html to index.php. I’ve included at the beginning of the file a few lines to retrieve the SIP user and secret of the extension, and modified the JS function to load the phoneOptions Object, like this:
var phoneOptions = {
loadAlternateLang: false,
welcomeScreen : null,
profileName : ,
wssServer : ,
WebSocketPort : 8089,
ServerPath : “/ws”,
SipDomain : ,
SipUsername : ,
SipPassword : ,
VoiceMailSubscribe : 0,
VoicemailDid : “*97”,
ChatEngine : “SIMPLE”,
EnableAccountSettings : 1
} …
and I can see in the rendering of the web page that the parameters are being loaded properly, in the Chrome console I see:
var phoneOptions = {
loadAlternateLang: false,
welcomeScreen : null,
profileName : “XXXX@my.domain”,
wssServer : “my.domain”,
WebSocketPort : 8089,
ServerPath : “/ws”,
SipDomain : “my.domain”,
SipUsername : “XXXX”,
SipPassword : “secretpassword”,
VoiceMailSubscribe : 0,
VoicemailDid : “*97”,
ChatEngine : “SIMPLE”,
EnableAccountSettings : 1
}
It should be working somehow because the welcome screen is gone and I can enable or disable the Account Settings menu, but, even though, the phone is not being provisioned, it is asking for configuration as if no parameter was loaded and the Account settings menu is empty. What am I missing? Or what could I’ve been doing wrong?
If you can shed some light on this I would really appreciate it. Thanks.
Make sure the status (under the picture, top left) says “Registered”, otherwise it will offer the settings page as you describe each time you try to dial.
The server settings must be correct for it to say Registered. Check the Developer Tools > Console Log for possible errors or issues.
What an amazing project, thank for your great work !
I have a question, how can I get call quality value when calling audio ? Sorry for my bad English
What you are looking at is typically called a MOS https://en.wikipedia.org/wiki/Mean_opinion_score
Although there are some systems that can calculate a MOS based ont he number of dropped packets and latency etc. Its often considered a “Human” score. You you may have to actually ask people what the call quality was like – even Whatsapp do this after call.
I have installed the browser-phone and when i try to make a call to an endpoint at the asterisk server. the call is made but the voice did not worked. I receive an error message like this:
WARNING[126804][C-00000006]: res_rtp_asterisk.c:3255 __rtp_recvfrom: ElmasCallCenter-1718735379.16: DTLS packet from 78.174.222.148:8197 dropped. Source not in ICE active candidate list.
There is a problem with the sender. According to the SDP, the port should be 65511 or 65513, but was actually 1024.
Did you see this problem before sir?
This can happen if the router manipulates the SIP messages incorrectly – I remember something called SIP ALG. Its almost always made things worse… even though it was designed to improve SIP of NAT. The nice thing about WebRTC is that it establishes a secure tunnel (point-to-point) and in the case of browser phone, it sends the SIP messages from the client to the server directly. This means that nothing can manipulate the SIP messages, but also means that another way to know of the port and ip address of the media is required – so this is the ICE system. If the ICE protocol is not working correctly, you will not have audio packets. Make sure that the ICE negotiations are working on the Browser Phone, and rtp.conf is correctly set on the server. If your server is behind NAT (like AWS), then you need to let Asterisk know about this.
Hi,
Thanks for an amazing product.
I was curious if its possible to allows simple sip messaging to phone numbers in addition to just extensions.
Is there a setting somewhere which is preventing the chat window from opening up on normal calls?
Thanks a lot!
Yes, there is a condition around simple Address Book Contacts, they don’t typically allow text messages. You can either modify the code to allow this, or make the buddy as type Extension. Then use the text message (SIMPLE) handler in Asterisk to send the actual Text Message – i would use a condition handler for the number like that it must be formatted as E.164 https://en.wikipedia.org/wiki/E.164.
I would then use an SMS service provider to perform the actual delivery for you.
Working backward (receiving a text message or reply), would be a much more ambitious task, but probably possible.
Hi,
Thanks for your response.
Where would the code be to modify?
I’ve been looking but couldn’t find it.
Just wondering why receiving messages from a longer number (phone number as apposed to an extension number) is more ambitious?
Thanks a lot,
Leo
Hi team, I have installed this amazing project on my pbx and it is working like a charm.
I need 2 things to understand:
1- Where are the calls recording stored? I mean the browser phone has the capability of auto call recording, i need to know the backend path where it actually saves call recordings.
2- The recording in the browser phone is using opus codec and saves file into a different format, i need to make it use PCMA or PCMU to save recordings in .wav format. Can you please guide how to do?
Hi, Glad it’s working for you.
1- All modern browsers have something called an Index Database. This is a no-sql database available to the javascript that can only be accessed by the code on the page within the originating domain.
2- You would have to apply a post-process to the file data. This is a very slow process so would be out-side of the Browser Phone development.
Most of our efforts are now focused on Siperb https://www.siperb.com/ . With Siperb, call recordings will be stored in your online bucket, and transcoded to any format you need. We have call recording upload and sync planned for Q2 this year. It’s not going to be expensive, but it will be well supported. Hope to see you there.