WebRTC Browser Phone with Asterisk & Raspberry Pi

In this video I will show you how to make a fully featured WebRTC, Browser Based, SIP Phone. Once again we will use the Raspberry Pi, and install Asterisk 13 (from Source), setup and configure Asterisk for web sockets, and host a small site with the pages you need. Then we will go on to setup some demo users and start testing.
GitHub site:
github.com/Inn...
For part 2 (With PJSIP)
• WebRTC Browser Phone w...
The above GitHub project contains all the html and javascript files to need to host.
Support My Channel:
www.innovateas...
or just Buy Me a Coffee: www.buymeacoff...

[@diggybell]

Outstanding presentation Conrad. As the CTO for a small telecom services company that uses Asterisk and a Raspberry Pi fan, I am impressed with how clearly you covered all of the topics in this presentation. When I started using Asterisk in 2010 I had to spend a lot more than 1:45 to understand the wealth of knowledge you have presente.d We are currently working with WebRTC and Asterisk for future product integrations. You have confirmed some of the things we have learned to this point, and provided valuable insight for our ongoing projects. I am now subscribed to your channel and will be looking forward to spending time going through all of your current and future videos. Kudos!

[@InnovateAsterisk]

I't my absolute pleasure! It's been fantastic fun putting these videos together, and there is a bunch more still to come. COVID has blown a hole in my plans this year, and I have not had a chance to produce as much as I have. I'll be making more soon... stay tuned!

[@onenemmanuel8672]

You are amazing, could you please make a tutorial on call scheduling and dealing with NAT issues over SIP.

[@InnovateAsterisk]

Thanks for the feedback. Automatic or scheduled calling is a good topic idea. What is the NAT issue you are facing? If you want to ask a more specific question, it best to do so on the Asterisk Community Forum.

[@abdulazeezthankayathil9383]

The video and the codes are very useful. Your explanation is awesome. Thanks a lot.

[@InnovateAsterisk]

Glad it was helpful!

[@MythologicalSPB]

Thank you for sharing your knowledge! You explain everything clearly.

[@InnovateAsterisk]

My pleasure! Happy to share. Stay tuned, more videos on their way.

[@alexpasion9585]

It is impressive what you have achieved. Thank you very much for sharing your deep knowledge. Congratulations.

[@InnovateAsterisk]

My pleasure!

[@hamzabarka393]

This is so nice, thanks for helping us. I really appreciate it! Can I use Ubuntu or debian instead of Raspberry Pi?

[@InnovateAsterisk]

From what i recall the default supported operating system is a version of Debian, and Debian and Ubuntu are very similar. I would generally advise to use the default supported OS - they operate much faster and more stable like that.

[@mymusicchannel5625]

Hi, please make a video on how to install webRTC service, web socket and web phone on asterisk 13 & 16 running on CentOS 7 or 8

[@desmondsimzhenghui5841]

bump

[@chuonikenya]

This is an outstanding presentation. I am wondering if this softphone would work with a predictive dialer , asterisk based? We'd want our agents to make the calls from the webRTC. Thank you for sharing this amazing tool.

[@InnovateAsterisk]

You can make your own scripts around this code (to perform the auto dial)

[@michelhevia]

Really an awesome tutorial. Just one question, according to what I’ve seen, with this browser phone you can only call contacts you have previously added to your phone or is it possible to call any number without adding it to your contacts? Thanks

[@InnovateAsterisk]

Correct. The project has evolved a little since this video, but the mechanics are about the same - like WhatsApp, you have to create contact first, but it has a number of features that speed this process up. You can now click the quick dial button, enter the number and hit dial, it will then create a contact for you, and setup the call. You see the reason for the contact is that after the call, you can go back and get a full CDR details and quality analysis.

[@edwardmedeiros7665]

This is an awesome and informative tutorial...Thank you for taking the time to do this!...If I might ask a guestion? Is it possible to have the raspberry pi initiate a call by a GPIO event such as a button press or a proximity sensor signaling there is someone at the door?

[@InnovateAsterisk]

Hi Edward, Thanks for you feedback :) Yes, the GPIO is a great way to extend the functionality of Asterisk and to build awesome projects! I would suggest using python, and loading your script as a service, then program in a button press, that uses Asterisk AMI. The AMI can initiate call setups in the same way as if you are at the Asterisk CLI. I have done a video that (although doesn't cover this topic exactly) covers the principals: kzbin.info/www/bejne/i2rNdpaseN6oZtE

[@chriskay-tech]

Hi, thank you very much for the informative video and above all for making your project open source. Absolutely love the contagious enthusiasm, energy, and passion you have when creating these videos. Is it possible yo have a server with FreePbx+Asterisk and do all those configs graphically and have a seperate server running the browserphone? Also, might have missed it but does the browserphone connect to some sort of db or something to persist login credentials or thats handled by asterisk ws?

[@InnovateAsterisk]

Yes, absolutely! FreePBX, is a great config editor for Asterisk, you really do have full control over everything. The webrtc settings that FreePBX generates are compatible with the Browser Phone. With the credentials - these values are entered into the Phone UI, and stored locally (In the browsers local storage). Generally this is ok, but you may need to know this if you are using this software commercially.

[@olata6017]

Very many thanks for sharing this. I have personally found it very insiteful as I've been struggly with configuring Asterisks. Geat work very well done. Congrats. I'll suggest you spell out the videos to watch before this for people like me that's looking to gain a robust understanding. I'm going to watch the other videos hoepfully I can put them in the right order. I saw on your GitHub page that the Browser-Phone is designed for Asterisks 13 & 16, Asterisk is currently on v17, does it mean it definitely won't work with v17 or you just haven't tested it? Many thanks again.

[@InnovateAsterisk]

Thanks for the feedback! :) There was quite a big difference between Asterisk 13 and 16, especially around chan_sip and chan_pjsip etc. In the end it's was better to use chan_sip with Asterisk 13 and chan_pjsip with Asterisk 16. So I think it will probably be fairly smooth sailing for Asterisk 17. I have not had a chance to test out 17 yet... please try and let me know.

[@techtips6158]

Thank you so much, that project is awesome.

[@InnovateAsterisk]

Glad you like it!

[@victorcancelaipglobalipglo1351]

thank very much from Spain

[@InnovateAsterisk]

You are welcome!

[@xavi74]

This webrtc is the best I have seen and the easy of installation thank you very much for sharing the video. I would like to know how I can configure a pjsip trunk with a voip provider to add a DDI to make external calls? Thank you very much.

[@InnovateAsterisk]

This and more coming soon.

[@codeaxen]

hello thanks for this video was really greate. i though have one question. how do i make api call in my application for video and audio calls like watsapp ??

[@InnovateAsterisk]

It's quite important to remember this is not WhatsApp, even tho the UI makes it look a lot like it. There is an exposed public function on the page script layer called DialByLine with the following parameters: /** * 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 : ) */ function DialByLine(type, buddy, numToDial, CallerID, extraHeaders) Also try the Github issues page: github.com/InnovateAsterisk/Browser-Phone/issues

[@codeaxen]

@@InnovateAsterisk yes I totally agree with u but... my intention was to implement audio and video calls in my app using webRTC with astrick server am wondering how to make app calls in a web app.

[@mustafafathi9507]

First thing first, thank you very much about this great channel and great effort. Second thing second, i'm embedded software engineer and i wanna ask you if you have ability to help me to learn this amazing tech. may you give me any tutorials or videos to learn because here i'am just normal user and i want to learn to develop.

[@InnovateAsterisk]

Thanks for you feedback. I have a few videos planned for the future that may help with this.

[@mustafafathi9507]

@@InnovateAsterisk I hope ❤️

[@unacceptableonanon2655]

This is great content. Thank you!

[@InnovateAsterisk]

Glad you liked it!

[@gamezae7931]

Great content, i like it. Is it legal for commercial use ?

[@InnovateAsterisk]

It is GNU Lesser General Public License v3.0 Basically this means it can be used in a commercial project, yes. More here: github.com/InnovateAsterisk/Browser-Phone/blob/master/LICENSE "Permissions of this copyleft license are conditioned on making available complete source code of licensed works and modifications under the same license or the GNU GPLv3. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights. However, a larger work using the licensed work through interfaces provided by the licensed work may be distributed under different terms and without source code for the larger work."

[@avinashbabanagare59]

its awesome, amzing. Thanks to provide this great knowledge. Can you help to develop feature to dial mobile numbers also without using buddy feature ? Can we use this in intranet (without internet in local network) ?

[@InnovateAsterisk]

"Can you help to develop feature to dial mobile numbers also without using buddy feature ?" If you pull the latest code from Github, you will see there is now a dial option without first making a buddy. github.com/InnovateAsterisk/Browser-Phone It automatically creates a buddy for each incoming and outgoing call, but it's required fo the record keeping, and can easily be deleted. "Can we use this in intranet (without internet in local network)?" Yes, I believe this does work, however the STUN lookup will timeout (about half a second each time you setup a call). STUN lookups are mandatory on WebRTC - there isn't much you can do about this.

[@michelhevia]

Hi again: Hello : I have a question. Is there a way to activate Auto Answer By Call Info on this WebRTC? Best regards...

[@InnovateAsterisk]

The best way to approach this is to use the Web Hooks provided at most the the critical stages of a call. Take a look at the provided index.html page (github.com/InnovateAsterisk/Browser-Phone/blob/master/Phone/index.html), you will see some empty hooks that you could use to inspect the session as a comes in, and based on that, perform an answer action. I simple timeout action would work quite nicely.

[@leonardocalderon1839]

Very cool

[@abiolaesan9371]

Thank you

[@InnovateAsterisk]

You're welcome

[@michelhevia]

...and sorry for asking so much, I know almost nothing about programming or styles...;-). But, one more question: If I want to put a logo, where do you recommend that I place it. I tried putting it in the index.html but it shows for 1 second and disappears. Where do you suggest I place it?

[@InnovateAsterisk]

When you clone the project, you also get a file called responsive.html Take a look at that file. www.innovateasterisk.com/phone/responsive.html

[@michelhevia]

@@InnovateAsterisk Thanks!!!! ;-)

[@VoipeasyBR]

A great presentation, congratulations. I used it in a LAB with FreePBX 15.0.23 / Asterisk 16.26.1. The voice webrtc part worked perfectly. already video call only lasting 30 seconds, but I still haven't analyzed the reason. I'm currently focusing on the text messaging part. Because FreePBX already has the UCP module integrated with User Management through XMPP/Jabber. For freepbx UCP and conversejs the service is working fine on port 5222. Already via the IPHONE Browser is not working. If possible please help with this. Grateful.

[@InnovateAsterisk]

It may be tricky to get this working on iphone. There are a number challenges in the UI, permissions, and also relating to the default iphone behaviour, like network settings etc. For the moment I would not recommend using this on mobile devices.

[@Quickboss1]

HI Innovate asterisk, do you provide support services for any webrtc project?

[@InnovateAsterisk]

Try here: github.com/InnovateAsterisk/Browser-Phone/issues

[@docsledge8716]

Conrad - how do I disable en.json in phone.js and enable my german Translation? Thanks you for the awesome Asterisk Lessons. Cheers from DE

[@InnovateAsterisk]

There is language detection based on your computer's (and therefor browsers) language settings. However there is also an override: var Language = getDbItem("Language", "de"); You need to have or set a localstorage key of "Language" set to "de" github.com/InnovateAsterisk/Browser-Phone/blob/2d964d355b2c195ae881a8e7bbefe222e085256f/Phone/phone.js#L139

[@docsledge8716]

@@InnovateAsteriskGot it! Thank you for the brilliant support. Probably I might come back in order to compile german sound files. Have a great day!

[@docsledge8716]

Ok it´s me again with a short question, Conrad. I downloaded german sound files in .sln16 format. Could you tell me how to convert them to .wav via command-line in terminal?advance. Hope there will be more of your great videos.

[@InnovateAsterisk]

You can probably just download them. I saw this: www.asterisksounds.org/de/installieren I see it also describes the sox conversion. (Btw, the singed signed linear 16 bit is fine as a format for most situations, you may not need to convert it.) And then also language=de in the general section of the dial plan so that the various apps know to use the /de/ directory.

[@docsledge8716]

@@InnovateAsteriskThanks again...I didn´t know they do not have to be converted as in "make menuselect" w chose only .wav-files. Thumbs Up! :-)

[@user-uf3op7eg4e]

Shild support Bluetooth or headphone

[@InnovateAsterisk]

Yes, if your web browser can play back or use the Bluetooth device, the browser phone will list it as a usable device. I tested this with a few Bluetooth devices, and even a headset - works fine.

[@KendyJEROME]

Hello, I have a problem with SRTP "No SRTP module loaded, can't setup SRTP session"

[@InnovateAsterisk]

There was a missing dependancy in the installation, most probably related to OpenSSL.

[@abajanlife246]

How can we get a test copy of your browser phone, Github does not authenticate us to get a test copy??

[@InnovateAsterisk]

You can just play around with it here: www.innovateasterisk.com/phone/ Or download it from Github - there is no restrictions on Github.

[@JasonSmith-z6j]

I'm using chan_sip with realtime database for sip accounts, audio calls work great, but I don't see the button to make video calls. What could be reason for it? I have videosupport=yes, and all 3 video codecs enabled as mentioned in the guide.

[@InnovateAsterisk]

You can only call each other with video if the system picks up the Buddy as an extension it just uses a simple length check, i think the default is 6. So if the number you dial is less than 6, you should be able to use video - and it must be a buddy (not an address book contact)

[@technicalteamglobalsmartco6479]

can we use the browser phone on cloud VPS rather than the Raspberry Pi

[@InnovateAsterisk]

The reason the videos are based on Raspberry Pi is that it creates a predictable environment that from flashing the SD Card, to the end, will be exactly the same if you do it on your side. But... if you can muddle through the differences, then by all means go ahead. You will not able able to use Raspberry Pi OS on the VPS, but the closest OS will be Ubuntu. Also, the virtual CPU will be X_86 based, so there are a few things that you may not need to do, or would do differently. For example Asterisk directly supports and can automatically install the opus codec for you. Another issue to consider is that most VPS services like Amazon etc, will use a NATed inbound route. This may add complications to your SIP configuration. (Interestingly the WebSocket connection doesn't get affected by this as its TCP) Also, take a look at the Github project page for further information: github.com/InnovateAsterisk/Browser-Phone

[@ВаняИльин-ь7н]

Hello! I would like to ask you to do it again on ubuntu 18.04 20.04 Namely, there is a desire to look at the text manual for chan_sip

[@InnovateAsterisk]

Ubuntu and Raspbian (or Raspberry Pi OS as it's now called) are very similar, and stem from the same base Linux - Debian. You could even apt-get install asterisk, that would get Asterisk installed and then you can focus more on the WebRTC side rather than getting stuck on the OS.

[@williamgautier8442]

hello I followed your tutorial and it works on Raspbian OS but when I use Ubuntu for Raspberry Pi port 443 for the HTTPS protocol is not listening. Do you have a solution ? thank you.

[@InnovateAsterisk]

You may not be able to set a custom port for 443 unless you run your service as root. Also take a look to the new video WebRTC in the Cloud: www.innovateasterisk.com/s2e2-webrtc-in-the-cloud/

[@michelhevia]

Hi, I have the file es.json for Spanish translation. If you want it, we will send it to you wherever you indicate. Apart from this, I have a couple of doubts. 1-. I have that file es.json but I can't get it to load the language. Where should I modify or add or select the language? and 2-. In the Phone popup, there is a field that cannot be seen. It is the upper field where you can enter the dialing number. Is there a way to change the color or to increase the thickness so that it is seen that there you can write the number you want to dial? For the user it is not clear. Thanks for all and best regards...

[@InnovateAsterisk]

Excellent! thank you. Please go here: github.com/InnovateAsterisk/Browser-Phone/issues/15 and attach or copy-paste your file. If you already have a working copy running, and can't wait for the next release, just add the file to the lang folder, and add the code to the availableLang array: github.com/InnovateAsterisk/Browser-Phone/blob/master/Phone/phone.js#L86 This should pick up es from your PC settings, and use the language file. If your PC is not set to es in its own settings, or you want to force it, check here: github.com/InnovateAsterisk/Browser-Phone/blob/master/Phone/phone.js#L139 For the styling changes you simply need to know the ID of the text field. Its called "dialText" so, just make a small CSS file, and set the style as you want, but you probably need to use !important in the class settings.

[@michelhevia]

Hi: I have attached the file es.json where you indicate. It is like zip. And is Spanish from Spain. I have also activated the language in my system!!!. Perfect!!! ;-).

[@michelhevia]

...and the field of the telephone, perfect ... thank you !!!

[@avisonpack7392]

does not want to install all packages pops up 17 packages upgraded, 449 newly installed, 0 to remove and 252 not upgraded. Need to get 259 MB of archives. After unpacking 933 MB will be used. Abort. Po wciścnięciu polecenia ./configure wyskakuje blad configure: error: *** uuid support not found (this typically means the uuid development package is missing) root@raspberry:/home/pi/asterisk-13.36.0# Why? :( Please Help

[@InnovateAsterisk]

Oh, that's strange... this didn't come up when I demonstrated the install in the video. The issue with Linux is normally the development packages and this is supposed to be taken care of during the command: > contrib/scripts/install_prereq install If for some reason this wasn't installed you can try run: > sudo apt install uuid-dev

[@avisonpack7392]

@@InnovateAsterisk ​ I installed it on a Rasbian OS image on the vmare server, maybe that's why it didn't work? Unfortunately, physically I do not have raspberry. Thanks for the answer, maybe I will try on a regular debian 9, how would it look with these certificates? I just tried it before and something didn't work, Astersisk http sevrver only worked on port 80, and on http itself sound and vision probably won't work? Because now I don't know if I made a mistake somewhere yet.

[@avisonpack7392]

@@InnovateAsterisk ​ @Innovate Asterisk I installed it on a Rasbian OS image on the vmare server, maybe that's why it didn't work? Unfortunately, physically I do not have raspberry. Thanks for the answer, maybe I will try on a regular debian 9, how would it look with these certificates? I just tried it before and something didn't work, Astersisk http sevrver only worked on port 80, and on http itself sound and vision probably won't work? Because now I don't know if I made a mistake somewhere yet.

[@josemanuelromero4970]

Me funcionó en local, en la LAN, con certificados autofirmados. Pero con letsencrypt no me funciono, dice que hay un error de certificado. Sin embargo, funciona para apache y abrir las paginas webcon https

[@amitanand606]

Hi I used your browser phone .It is getting registered on my system but when try to register it with other system.It is not getting registered

[@InnovateAsterisk]

The Github issues page is active, its best to get answers there: github.com/InnovateAsterisk/Browser-Phone/issues. In order for me or anyone to help you, you will need to show the error logs. This is the only way we can see what's causing this issue.

[@mustafafathi9507]

Hello, i faced a certification problem when i tried to connect to this server as a client (not secured)

[@InnovateAsterisk]

Please make sure you follow the steps on generating the self-signed certificate. There is also more support and documentation here: github.com/InnovateAsterisk/Browser-Phone and github.com/InnovateAsterisk/Browser-Phone/issues

[@solucionesuno7925]

where are de records saved? can i save the records in the server storage?

[@InnovateAsterisk]

The default behaviour is to store the records on the device, in the internal storage of the Browser. You would have to save the records to your own server using your own methods.

[@jahidulsajib4837]

I have done so far. but webpage can not be loaded properly. just loading and loading.can anyone help me

[@InnovateAsterisk]

Take a look at the developer console, something would have failed to load. Please post technical questions to the Github issues page: github.com/InnovateAsterisk/Browser-Phone/issues

[@byyDun]

Hi, can I install It on Debian?

[@InnovateAsterisk]

Yes, no problem. Not all the commands will be exactly the same, but check out the other videos for WebRTC in the cloud

[@amitanand606]

Please help me out

[@mukulbarthwal2806]

lots of issue Appeared in video call

[@InnovateAsterisk]

Please post technical questions to the Github issues page: github.com/InnovateAsterisk/Browser-Phone/issues

[@dogwater2047]

i watched it its not working

[@InnovateAsterisk]

Please feel free to add an issue to the GitHub site: github.com/InnovateAsterisk/Browser-Phone/issues You will probably need describe the problem in a little more detail.

[@pankapykonn1883]

why does this deny to allow me type the command. contrib/scripts/install_prereq install

[@primoitt83]

Very cool