Browser Phone

A fully featured browser based WebRTC SIP phone for Asterisk

Project Page: https://github.com/InnovateAsterisk/Browser-Phone

Commercial Version: Available here: SiperbSiperb 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

49 thoughts on “Browser Phone

  • Avatar
    2022-01-26 at 2:35 pm
    Permalink

    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

    Reply
    • Conrad
      2022-01-29 at 7:22 am
      Permalink

      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.

      Reply
  • Avatar
    2022-03-03 at 6:36 am
    Permalink

    I have implement this but when we refresh page call disconnect issue appear.

    Reply
    • Conrad
      2022-03-31 at 3:48 pm
      Permalink

      I’m not sure if you can prevent a user from refreshing a web page.

      Reply
  • Avatar
    2022-03-29 at 1:03 pm
    Permalink

    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?

    Reply
    • Conrad
      2022-03-31 at 3:46 pm
      Permalink

      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.

      Reply
      • Avatar
        2022-04-01 at 5:44 am
        Permalink

        Hello Conrad:

        Now it is working perfectly on asterisk 18, it was my fault during the config time. Congratulations again for this amazing contribution.

        Reply
  • Avatar
    2022-04-21 at 7:40 pm
    Permalink

    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

    Reply
    • Conrad
      2022-08-05 at 11:10 am
      Permalink

      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.

      Reply
  • Avatar
    2022-05-24 at 8:33 pm
    Permalink

    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 !

    Reply
  • Avatar
    2022-06-27 at 3:06 am
    Permalink

    please how i can implment in .net core

    Reply
    • Conrad
      2022-08-05 at 10:54 am
      Permalink

      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.

      Reply
  • Avatar
    2022-08-04 at 9:59 am
    Permalink

    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

    Reply
  • Avatar
    2022-08-05 at 7:44 am
    Permalink

    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?

    Reply
  • Avatar
    2022-10-14 at 4:37 pm
    Permalink

    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

    Reply
  • Avatar
    2022-10-28 at 4:32 pm
    Permalink

    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!

    Reply
    • Conrad
      2022-11-10 at 7:37 am
      Permalink

      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.

      Reply
  • Avatar
    2022-11-07 at 2:53 pm
    Permalink

    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”,

    Reply
    • Conrad
      2022-11-10 at 7:44 am
      Permalink

      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: myVariable
      but not:
      wssServer: 172.27.0.8

      Reply
      • Avatar
        2022-11-14 at 5:54 pm
        Permalink

        thanks, 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?

        Reply
        • Conrad
          2022-11-19 at 8:47 am
          Permalink

          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.

          Reply
  • Avatar
    2022-12-02 at 8:16 am
    Permalink

    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

    Reply
    • Conrad
      2022-12-26 at 8:09 pm
      Permalink

      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.

      Reply
  • Avatar
    2022-12-26 at 6:45 pm
    Permalink

    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 !

    Reply
    • Conrad
      2022-12-26 at 8:12 pm
      Permalink

      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.

      Reply
  • Avatar
    2023-02-06 at 5:15 pm
    Permalink

    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!

    Reply
  • Avatar
    2023-03-09 at 1:17 am
    Permalink

    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!

    Reply
    • Conrad
      2023-04-11 at 8:03 am
      Permalink

      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)

      Reply
  • Avatar
    2023-04-10 at 5:27 pm
    Permalink

    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

    Reply
    • Conrad
      2023-04-11 at 7:47 am
      Permalink

      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

      Reply
  • Avatar
    2023-05-29 at 3:51 pm
    Permalink

    Hi,
    Thanks for your contributon.

    Can we configure chat groups ?

    Thanks…

    Reply
    • Conrad
      2023-06-02 at 8:15 am
      Permalink

      Chat groups are coming soon, but not possible now.

      Reply
  • Avatar
    2023-06-01 at 4:41 pm
    Permalink

    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?

    Reply
    • Conrad
      2023-06-02 at 8:17 am
      Permalink

      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.

      Reply
  • Avatar
    2023-06-05 at 5:59 pm
    Permalink

    Probably should’ve added this to my last question but do I need a raspberry pi to implement this?

    Reply
    • Conrad
      2023-06-06 at 12:54 pm
      Permalink

      Nope, in fact there is a video on how to host this solution on AWS and Google VPC.

      Reply
      • Avatar
        2023-06-07 at 3:02 pm
        Permalink

        Can you share a link please?

        Reply
  • Avatar
    2023-06-30 at 3:26 pm
    Permalink

    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

    Reply
    • Conrad
      2023-07-03 at 8:07 am
      Permalink

      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.

      Reply
  • Avatar
    2023-09-11 at 11:32 pm
    Permalink

    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

    Reply
    • Conrad
      2023-10-12 at 7:56 am
      Permalink

      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.

      Reply
  • Avatar
    2023-09-24 at 6:48 pm
    Permalink

    Good afternoon, thank you for the great application, I would like to know how to integrate it into React Native or even Kotlin?

    Reply
    • Conrad
      2023-10-12 at 7:53 am
      Permalink

      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.

      Reply
  • Avatar
    2024-05-21 at 10:10 pm
    Permalink

    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.

    Reply
    • Conrad
      2024-05-23 at 12:20 pm
      Permalink

      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.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.