 It's always Janus so that works out. So thanks for being here and thank you to you away. It's a pleasure okay Thanks for coming and I'm going to explain how you can make a SIP phone into your browser to make audio and video calls and We are going to use web RTC technologies with asterisk and two different libraries One is CPMl5 and one is Janus gateway I'm Alessandro Polidori, and I'm a senior software engineer at Nethesis. That is an Italian open source company Here are some of my contacts Okay, first of all, let's start speaking something about web RTC As the word suggests it enable a communication between browsers in a real-time peer-to-peer fashion And it's not a single technology But a set of different technologies It is composed by three fundamental APIs that are get-user media RTC peer connection and RTC data channel The first is used to access your media devices. The second does some operations that says the data negotiation And the third does the real-time communication the data transfer Other API exists, but it's not important for this talk So some real-time protocols are used some for the data transmission and other for the signal here and in particular we we need some signal to negotiate and establish a Session before the data transmission and the most used protocol in this field is the SIP protocol We can achieve the security to have encryption and message Authenticity using the circumversion of the protocol SDP is used to describe the session before the data transmission and other protocols are used to overcome some network problems Related to the nut for example, Stan is used to get your public IP address outside your local area network and The term does the media relay of old traffic. So it requires a lot of bandwidth Okay, this is the overall architecture of the system Okay, and we can see from this picture that are that there are many components and The two most important are the web application and the server PBX But we're interested only on the web application because we want to make a SIP phone into the browser to make audio video calls Okay, codec are another fundamental part in the audio section the most used are opus and g7 11 and In the video section are the h.264 and VP 8 VP 9 is not completely supported by the browsers and AV 1 seems to be the future We at net as is have Made a force which was system call net voice and net CTI on top of it That is a web application with the integrated web RTC phone to make the calls During the years we have made the two different implementation in production on some thousands of customers And now we are going to see the implementation that uses Cip ML 5 Cip ML 5 is a JavaScript library and Heat has been the first implementation of an HTML 5 CIP client. It was presented at Google IEO in 2012 and Its characteristics are that it's 100% for JavaScript. It realizes a media stack of course based on web RTC It uses a CIP protocol over web socket for the signaling and With it you can make Audio video calls, but not only you can realize also an instant messaging or scree sharing and so on and It supports both desktop and mobile platforms Okay, this is the overall architecture that we have used realizing the Cip phone with 7 ml 5 the HTML 5 client realizes both SDP and the CIP stack that we have previously seen and The SDP described the session for example the what which audio codec will be used and Cip Realize that all the CIP stack that communicates over web socket transport and After the session has been established all the media data transmission is Exchanged using Some protocols and using web RTC technologies all of these components Communicate with net voice pbx Okay, now we are going to see how to implement a CIP phone using Cip ML 5 with Only four steps. So First of all, you have to initialize the engine in this case There is the global JavaScript object called Cip ML and we call the unit method then we start the CIP stack At this point we can register the phone extension into the server pbx Calling the new session API and at the end we can make a new audio and video call Okay, some more code, let's see it in more detail First of all, of course is the inclusion of the JavaScript library only one file Then we initialize the engine. So we call the unit function passing to it two parameters two callbacks one to manage the success of the operation and one for the failure and If it go if all goes well we are going to create the CIP stack there to start the CIP stack and the parameters needed are The server address that can be on the cloud and you can realize for example a cloud phone or Also on premise Then we pass the CIP extension URI that is composed by the protocol CIP the extension identifier and the server address the password extension pay attention to it because We can find the some scripts that try to register extension with some simple passwords and then make Phone calls to some payment number. So it's very important to choose it carefully The display name is the name that has been shown in the display of the phone when incoming call arrives and the the WebSocket URL WebSocket URL contains a customized port 89 that obviously has to be reachable by the client and WebSocket secure protocol. So all the traffic is encrypted We can attach an event listener to manage all the related events and call the start on the just created CIP CIP stack At this point we register the phone extension Okay, calling the new session API on the just created CIP stack and passing to it the world register and Other event listeners to manage their related events and At the final we called the register Function here it is at this point If all goes well, we can make a new phone call Calling the new session function on the just created CIP stack and passing to it some parameters that are only the HTML Elements so all uses web standards and at the end we can make new phone call That's it Okay, during the years we have decided to switch the implementation of the CIP phone using a Janus gateway. Okay We're going to see this implementation Janus is a general purpose gateway made by mythical company And it's a web RTC gateway Okay, it uses the JSON standard for the format for messages exchange its architecture is made by a plug-in We have used only the CIP plug-in, but other plug-in exists Of course it provides some interfaces for communication and other tools for monitoring that are very very important in production This picture We can see the differences from that of CPM L5 because previously CPM L5 communicated directly with asterisk but now the Janus client communicates with Janus gateway component that is a backend component Which in turn communicates with asterisks using the CIP protocol and all of this traffic is proxy passed by Apache web server and all traffic is encrypted of course The advantage of this architecture is that now we don't worry anymore about the changing that can arise from the Development devolving of the web RTC technology because Janus takes care of it Okay, now we are going to see how to implement the CIP phone using Janus So also in this case four steps are needed the initialization of the engine Now the JavaScript global object is called Janus We create a session, attach a CIP plug-in Only CIP plug-in is used but other plug-in exists and at the end we can make a new call creating a new offer Okay, let's go deeper to see more details The inclusion of the library we need only two libraries one is Janus of course and another one is the an adapter That resolves all web RTC differences between different browsers We initialize the engine calling the init method passing to it the debug level and a callback function And then we create a new session Notice that now the server address uses the standard HTTPS port So you don't need to open another port on the server all using web standards And then we pass other callbacks as parameters And at this point we can attach the CIP plug-in to have a plug-in handler to make a new phone call In this slide I deliberately cut off the code to generate confusion So other other callbacks as past as parameters And at the end, if all goes well, we can make a new phone call Invoking the create offer function on the just created the CIP phone On the just created plug-in CIP handler Okay, and we can specify the call the destination of the call That's it Okay, now some some few words about the server PB expert because in this case Are another fundamental part to to make the old components functioning? Okay In this talk I've used the net server VoIP PBX That is based on asterisk free pbx project and net server linux distribution That is a completely open source available on github It has also a community of enthusiastic people that you can find it on community.netserver.org You can participate in the project in whatever manner you want and the enterprise version of the Net voice the switchboard system is called net voice And the net cti on top of it that is a web application with web rtc phone To give you an environment to start playing with web rtc I've created a virtual box machine that you can easily run using vagrant I I give you a link at the in the Next slide. Okay to to know how you can easily run your private pbx at your home Okay, now I would like to show you an open source demo of an html 5 SIP client to to better understand what we have seen until now. Okay, so To recap Two steps are needed. We are going to Run a server pbx And for this you can You you have to done only Three operation clone the github repository skip into it and run vagrant up at this point you have your server pbx completely configured And we are going to open the web rtc demo at this url Then we can insert some default values Okay, that you can find on github The parameters are the server address the display name Extension identifier and the password. Okay then I'm I'm going to Log in to click the login button to register the phone extension into the server pbx And at this point we can make a phone call of course. Okay clicking the call button And we we will see A remote and local video. Okay All is on my local machine of course for simplicity Okay, this is One session. Okay. I've already inserted the data and running my own private server pbx on my local machine So we specify the server address the display name extension and password. So in this session I'm going to insert the extension 200 and login to the server pbx At this point the phone extension is registered and completely working In another session I insert the extension 201 and login And at this point I can make a new call to the extension 200 Audio and video Okay Here I click the answer button and I have a new audio video call Obviously, this is the Remote part and other are my local part Is the same image of course because all is in local machine Okay, okay come back to presentation for a few slides Okay, this slide is to show you only To to understand that with webRTC you can make a real product for your customer So this is the net cti made by nethaziz To make new audio video call with webRTC It abstracts many devices into one single user using a customized layer of rest api That is independent from the specific version of the asterisk Okay, as you as I promised you this is Two links the first contains all the related important related links of this talk And the second is a very interesting webRTC blog Made by tacky levent levy. Okay. It's very interesting And if you want to Discuss something about webRTC some development of a server or whatever Everything else. Uh, this is uh, these are all Some of my contacts and I would I will I will be very happy to talk with you. Thank you Does anybody have a question? Hey, uh, probably a stupid question, but Um, uh, Janus is not using Ice or stoner of turn. Is that correct? Yeah, Janus can use highs and stun server in in depends on your network topology For example in this case, I have my local machine So I configure Janus to operate in in a nut in a nut mode But if you if you are connected to the internet, uh, you are behind a nut For example, you configure Janus differently And it can connect to some stun server to have your public IP address outside your local area network to make all function Uh, of course in some cases you can have some problems. Okay in the depends on your network topology And you can use also a turn server. Okay to relay all the media traffic Of course in this case, uh, the turn server requires a lot of bandwidth because it relay all the audio and video Very important for bandwidth video traffic Okay Can you can have different configurations of Janus gateway? So, uh, for curious about the cpml 5 the project now who is still by uh, the bongo pro Project or how it's Maintained these days because it was started by dubango telecom. That is a french company. Then also google promoted it in about 2012 I don't know very well the details of what is the maintainer But is present on github and I think that um, I think some google developers works on it I don't know very well But probably also dubango works on it Thank you. Thank you all