Browser Phone

A fully featured browser based WebRTC SIP phone for Asterisk

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

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

24 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

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.