We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Asterisk WebRTC frontier: make client SIP Phone with sipML5 - Janus Gateway

00:00

Formal Metadata

Title
Asterisk WebRTC frontier: make client SIP Phone with sipML5 - Janus Gateway
Subtitle
Analyzing a real project on production (www.nethvoice.it) we will look at two different implementations of a SIP Phone WebRTC of NethCTI Web App. We will see great code examples, WebRTC technologies and a real demo of an audio/video call
Title of Series
Number of Parts
561
Author
License
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
We will analyze the steps to make audio & video communications (as SIP Phone WebRTC) into your WebApp, exploiting Asterisk WebRTC techology. The talk shows pros e cons of two different implementations: one using sipML5 library and one with Janus Gateway. Asterisk WebRTC technology open huge scenarios of applications for unified communications. In this session we will look at that technology to make a SIP Phone WebRTC directly integrated into your web browser to provide a real-time audio & video communication WebApp that serves hundreds of contemporary calls. We will consider two different solutions, sipML5 and Janus Gateway, showing pros and cons of both solutions.
10
58
80
111
137
Thumbnail
15:21
159
Thumbnail
18:51
168
Thumbnail
26:18
213
221
Thumbnail
15:22
234
Thumbnail
49:51
248
Thumbnail
23:06
256
268
283
Thumbnail
28:38
313
Thumbnail
1:00:10
318
Thumbnail
21:35
343
345
Thumbnail
36:13
353
Thumbnail
18:44
369
370
373
Thumbnail
44:37
396
Thumbnail
28:21
413
Thumbnail
16:24
439
455
Thumbnail
25:10
529
Thumbnail
15:36
535
Thumbnail
28:04
552
Client (computing)Session Initiation ProtocolGateway (telecommunications)CodeWeb browserSystem callLibrary (computing)Gateway (telecommunications)Session Initiation ProtocolLine (geometry)Open sourceSoftware engineeringComputer animation
SoftwareGoogolComponent-based software engineeringDigital mediaInformation and communications technologyReal numberTouchscreenWeb browserPiGroup actionVideoconferencingCommunications protocolEncryptionMessage passingAuthenticationArchitectureInternetworkingCodecData compressionReduction of orderBand matrixRaw image formatBit ratePhysical systemWeb applicationIP addressLocal area networkTerm (mathematics)Communications protocolWeb browserMessage passingRevision controlReal-time operating systemTelecommunicationSheaf (mathematics)MereologyComputer architectureSession Initiation ProtocolDigital mediaBand matrixSet (mathematics)Peer-to-peerTable (information)System callDifferent (Kate Ryan album)VideoconferencingSoftware engineeringWordData transmissionConnectivity (graph theory)Open sourceServer (computing)AuthenticationInformation securityCodecSoftwareField (computer science)EncryptionComputer animation
Client (computing)Physical systemSystem callDifferent (Kate Ryan album)ImplementationSession Initiation ProtocolProduct (business)Web applicationComputer-generated imageryWeb 2.0Inheritance (object-oriented programming)WeightComputer animation
Client (computing)Session Initiation ProtocolOpen sourceTelecommunicationPlug-in (computing)Digital mediaStack (abstract data type)Transport Layer SecurityUDP <Protokoll>VideoconferencingTouchscreenSystem callMobile WebGoogolArchitectureImage registrationExtension (kinesiology)Scripting languageSession Initiation ProtocolComputer fileConnectivity (graph theory)Form (programming)Inclusion mapTouchscreenExtension (kinesiology)Client (computing)Server (computing)Stack (abstract data type)WeightLibrary (computing)Instant MessagingComputer architectureImplementationCASE <Informatik>Mobile WebCodeCodecoutputObject (grammar)VideoconferencingSystem callCharacteristic polynomialDigital mediaPoint (geometry)Data transmissionComputing platformCommunications protocolInformation and communications technologyComputer animation
Function (mathematics)Stack (abstract data type)Operator (mathematics)Session Initiation ProtocolParameter (computer programming)Functional (mathematics)
Stack (abstract data type)Host Identity ProtocolStack (abstract data type)Parameter (computer programming)IP addressPoint cloudSource code
VoltmeterExtension (kinesiology)Server (computing)Session Initiation ProtocolCommunications protocolPasswordIP addressNumberElectronic visual displaySystem callSource code
Uniform resource locatorElectronic visual displaySystem callEvent horizonInformation securityCommunications protocolClient (computing)Source code
Stack (abstract data type)Image registrationExtension (kinesiology)Event horizonPoint (geometry)Session Initiation ProtocolStack (abstract data type)Functional (mathematics)Event horizonWordExtension (kinesiology)Source codeComputer animation
Event horizonParameter (computer programming)System callFunctional (mathematics)Web 2.0Stack (abstract data type)Standard deviationPoint (geometry)Element (mathematics)Source code
Gateway (telecommunications)Message passingArchitecturePlug-in (computing)Session Initiation ProtocolInterface (computing)Proxy serverClient (computing)Gateway (telecommunications)Session Initiation ProtocolImplementationComputer architectureCommunications protocolTelecommunicationInterface (computing)Connectivity (graph theory)Standard deviationWeb 2.0Message passingPlug-in (computing)Client (computing)MathematicsFile formatDifferent (Kate Ryan album)Information and communications technologyComputer fileOperating systemProduct (business)Software developerServer (computing)Computer animation
Session Initiation ProtocolPlug-in (computing)Link (knot theory)Session Initiation ProtocolObject (grammar)Mobile WebCASE <Informatik>Plug-in (computing)Computer animation
Client (computing)Library (computing)ExistenceSystem callLibrary (computing)Different (Kate Ryan album)Inclusion mapWeb browserLevel (video gaming)Computer animation
Function (mathematics)Video game consoleError messageServer (computing)Plug-in (computing)Level (video gaming)Functional (mathematics)Standard deviationSession Initiation ProtocolPoint (geometry)Parameter (computer programming)IP addressServer (computing)Web 2.0Computer animation
Session Initiation ProtocolPlug-in (computing)Link (knot theory)System callGeneric programmingFunctional (mathematics)CodePlug-in (computing)Electric generatorParameter (computer programming)
InternettelefonieServer (computing)FreewareOpen sourceEnterprise architectureRevision controlConnectivity (graph theory)Word.NET FrameworkServer (computing)CASE <Informatik>Expert systemInternettelefonieMereologyWeb applicationProjective planeDistribution (mathematics)WeightOpen sourceFreewareEnterprise architectureOptical disc driveRevision controlPhysical systemMoment <Mathematik>Open setComputer animation
Client (computing)Open sourceDemo (music)Slide ruleSession Initiation ProtocolVirtual machineIntegrated development environmentLink (knot theory)Ferry CorstenCuboidVirtualizationComputer animation
Session Initiation ProtocolServer (computing)Address spaceExecution unitDialectProgrammable read-only memoryPasswordDrum memoryPointer (computer programming)MIDIDemo (music)IdentifiabilityVideoconferencingIP addressLoginUniform resource locatorElectronic visual displayExtension (kinesiology)Local ringPresentation of a groupDefault (computer science)Operator (mathematics)Medical imagingPasswordVirtual machineSlide ruleRepository (publishing)Table (information)Point (geometry)Parameter (computer programming)System callServer (computing)MereologyBit rateWeb 2.0Mobile appCloningComputer animation
Menu (computing)Drum memorySession Initiation ProtocolMehrplatzsystemAbstractionLink (knot theory)Revision controlRepresentational state transfer2 (number)Product (business)Event horizonVideoconferencingSystem callSoftware developerServer (computing)BlogSlide ruleComputer animation
IP addressSoftware maintenanceVideoconferencingCASE <Informatik>Category of beingLocal area networkServer (computing)Asynchronous Transfer ModeSoftware developerBand matrixDigital mediaNetwork topologyDifferent (Kate Ryan album)InternetworkingTelecommunicationString (computer science)Gateway (telecommunications)Configuration spaceProjective planeFunctional (mathematics)Virtual machineIsing-ModellStandard deviationComputer animation
Point cloudComputer animation
Transcript: English(auto-generated)
All with Janus. See how that works out. So thanks for being here. Thank you. 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 WebRTC technologies with Asterisk and two different libraries. One is SIP-ML5 and one is Janus Gateway. I'm Alessandro Pollidori and I'm a Senior Software Engineer at Netasys that is an Italian open source company.
Here are some of my contacts. Okay. First of all, let's start speaking something about WebRTC. As the word suggests, it enables 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 GetUserMedia, RTCPeerConnection and RTCDataChannel. The first is used to access your media devices. The second does some operations such as the data negotiation. And the third does the real-time communication, the data transfer.
Other APIs exist, but it's not important for this talk. So, some real-time protocols are used, some for the data transmission and others for the signaler. And in particular, 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 second version 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 NAT.
For example, STAN is used to get your public IP address outside your local area network. And the TAM does the media relay of all traffic, so it requires a lot of bandwidth. This is the overall architecture of the system. And we can see from this picture 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 all the video calls.
Okay, codecs are another fundamental part. In the audio section, the most used are Opus and G711. And in the video section are the H.264 and VP8. VP9 is not completely supported by the browsers, and AV1 seems to be the future.
We at Netasys have made a phone switch voice system called NetVoice and NetCTI on top of it. That is a web application with the integrated WebRTC phone to make the calls. During the years, we have made two different implementations in production on some thousands of customers. And now we are going to see the implementation that uses SIP-ML5.
SIP-ML5 is a JavaScript library, and it has been the first implementation of an HTML5 SIP client. It was presented at Google I.U. in 2012, and its characteristics are that it's 100% full JavaScript. It realizes a media stack, of course, based on WebRTC.
It uses SIP protocol over WebSocket for the signaling. And with it, you can make audio-video calls, but not only. You can realize also any instant messaging or screen-sharing and so on. And it supports both desktop and mobile platforms.
Okay, this is the overall architecture that we have used realizing the SIP phone with SIP-ML5. The HTML5 client realizes both SDP and SIP stack that we have previously seen. And the SDP describes the session, for example, which audio codec will be used.
And SIP realizes all the SIP stack that communicates over WebSocket transport. And after the session has been established, all the media data transmission is exchanged using some protocols and using WebRTC technologies.
All of these components communicate with NetVoice PBX. Okay, now we are going to see how to implement SIP phone using SIP-ML5 with only four steps. So, first of all, you have to initialize the engine.
In this case, there is the global JavaScript object called SIP-ML, and we call the init method. Then we start the SIP stack. At this point, we can register the phone extension to the server PBX, calling the new session API, and at the end, we can make a new audio-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 init function, passing to it two parameters,
two callbacks, one to manage the success of the operation and one for the failure. And if it all goes well, we are going to create the SIP stack, to start the SIP 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 SIP extension URI that is composed by the protocol SIP, the extension identifier, and the server address, the password of the extension. Pay attention to it, because we can find the Sanskrits that try to register an extension with some simple passwords
and 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 an incoming call arrives. And the WebSocket URL.
WebSocket URL contains a customized port, 889, that obviously has to be reachable by the client, and the 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 SIP stack. At this point, we register the phone extension, calling the new session API on the just created SIP stack, and passing to it the word register and other event listeners to manage their related events.
And at the final, we call 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 SIP 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 a new phone call. That's it. OK, during the years, we have decided to switch the implementation of the SIP phone using a JANUS gateway.
We're going to see this implementation. JANUS is a general purpose gateway made by Mythico company, and it's a WebRTC gateway. It uses the JSON standard format for messages exchange. Its architecture is made by a plug-in. We have used only the SIP plug-in, but other plug-ins exist, 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 CPL5, because previously CPL5 communicated directly with Asterisk.
But now, the JANUS client communicates with JANUS gateway component that is a backend component which in turn communicates with Asterisk using the SIP 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 changes that can arise from the development, devolving of the WebRTC technology, because JANUS takes care of it. OK, now we are going to see how to implement the SIP 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 C plug-in, only C plug-in is used, but the other plug-in exists. And at the end, we can make a new call, creating a new offer.
OK, 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 an adapter that resolves all WebRTC 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 we pass other callbacks as parameters. And at this point, we can attach the C 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 callbacks as passed 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 plug-in C plug-in handler. And we can specify the destination of the call.
That's it. OK, now some few words about the server PB expert, because in this case, another fundamental part to make all components functioning. In this talk, I've used the net server VoIP PBX.
That is based on Asterisk, FreePBX project, and net server Linux distribution. That is completely open source, available on GitHub. It has also a community of enthusiastic people that you can find on community.netserver.org.
You can participate in the project in whatever manner you want. And the enterprise version of the NetVoice, the switchboard system, is called NetVoice. And the NetCTI on top of it, it is a web application with WebRTC phone.
To give you an environment to start playing with WebRTC, I've created a virtualbox machine that you can easily run using Vagrant. I'll give you a link in the next slide to know how you can easily run your private PBX at your home.
OK, now I would like to show you an open source demo of an HTML5 SIP client to better understand what we have seen until now. OK, so to recap, two steps are needed.
We are going to run a server PBX. And for this, you have done only three operations. Clone the GitHub repository, skip into it, and run Vagrant app. At this point, you have your server PBX completely configured.
And we are going to open the WebRTC demo at this URL. Then we can insert some default values that you can find on GitHub. The parameters are the server address, the display name, extension identifier, and the password.
Then I'm going to log in, to click the log in button to register the phone extension into the server PBX. And at this point, we can make a phone call, of course. Clicking the call button. And we will see a remote and local video.
All is on my local machine, of course, for simplicity. OK, this is one session.
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 log into the server PBX. At this point, the phone extension is registered and completely working.
In another session, I insert the extension 201 and log in. And at this point, I can make a new call to the extension 200, audio and video.
OK, 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. It's the same image, of course, because all is on local machine.
OK, come back to presentation for a few slides.
OK, this slide is to show you only to understand that with WebRTC, you can make a real product for your customers.
So this is the NetCTI made by Netasys 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. OK, as I promised you, this is two links.
The first contains all the important related links of this talk. And the second is a very interesting WebRTC blog made by Taki Leventlevi. OK, it's very interesting. And if you want to discuss something about WebRTC, some development of a server or whatever,
everything else, these are all some of my contacts, and I will be very happy to talk with you. Thank you.
Does anybody have a question? Probably a stupid question, but Janus is not using ISE or standard return, is that correct?
Yeah, Janus can use ISE and standard server. It depends on your network topology. For example, in this case, I have my local machine, so I configured Janus to operate in a NAT mode. But if you are connected to the internet, you are behind a NAT, for example,
you configure Janus differently, and it can connect to some standard server to have your public IP address outside your local area network to make all functions.
Of course, in some cases, you can have some problems. OK, it depends on your network topology. And you can use also a TAN server to relay all the media traffic. Of course, in this case, the TAN server requires a lot of bandwidth because it relays all the audio and video, very important for bandwidth, video traffic.
OK, you can have different configurations of Janus Gateway. So, curious about the CPML5, the project now,
who is still by Dubango project or how it's maintained these days? 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 it's present on GitHub, and I think some Google developers work on it. I don't know very well, but probably also Dubango works on it. Thank you.