Asterisk WebRTC frontier: make client SIP Phone with sipML5 - Janus Gateway
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| 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 | 10.5446/44148 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2019180 / 561
1
9
10
15
18
19
23
24
27
29
31
33
34
35
38
39
40
43
47
49
52
53
54
55
58
59
60
63
65
67
69
70
78
80
82
87
93
95
97
102
103
104
107
110
111
114
116
118
120
122
123
126
127
131
133
136
137
139
141
142
148
153
155
157
159
163
164
168
169
170
171
172
173
174
181
183
185
187
188
193
196
197
198
199
200
201
205
207
208
209
211
213
214
218
221
223
224
226
230
232
234
235
236
244
248
250
251
252
253
255
256
257
262
263
264
268
269
271
274
275
276
278
280
281
283
284
288
289
290
293
294
296
297
300
301
304
309
311
312
313
314
315
317
318
321
322
327
332
333
334
335
336
337
338
339
340
343
345
346
352
353
355
356
357
359
360
362
369
370
373
374
375
376
377
378
383
384
387
388
389
390
391
393
394
395
396
406
408
409
412
413
414
415
419
420
425
426
431
432
433
434
435
436
438
439
440
441
445
446
447
448
453
455
457
459
466
467
471
473
474
475
476
479
480
484
485
486
489
491
492
496
499
500
502
505
507
508
512
515
517
518
529
531
533
534
535
536
539
540
546
550
551
552
553
554
555
557
558
559
560
561
00:00
Client (computing)Session Initiation ProtocolGateway (telecommunications)CodeWeb browserSystem callLibrary (computing)Gateway (telecommunications)Session Initiation ProtocolLine (geometry)Open sourceSoftware engineeringComputer animation
00:37
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
03:00
Client (computing)Physical systemSystem callDifferent (Kate Ryan album)ImplementationSession Initiation ProtocolProduct (business)Web applicationComputer-generated imageryWeb 2.0Inheritance (object-oriented programming)WeightComputer animation
03:24
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
05:32
Function (mathematics)Stack (abstract data type)Operator (mathematics)Session Initiation ProtocolParameter (computer programming)Functional (mathematics)
05:50
Stack (abstract data type)Host Identity ProtocolStack (abstract data type)Parameter (computer programming)IP addressPoint cloudSource code
06:08
VoltmeterExtension (kinesiology)Server (computing)Session Initiation ProtocolCommunications protocolPasswordIP addressNumberElectronic visual displaySystem callSource code
06:34
Uniform resource locatorElectronic visual displaySystem callEvent horizonInformation securityCommunications protocolClient (computing)Source code
06:56
Stack (abstract data type)Image registrationExtension (kinesiology)Event horizonPoint (geometry)Session Initiation ProtocolStack (abstract data type)Functional (mathematics)Event horizonWordExtension (kinesiology)Source codeComputer animation
07:28
Event horizonParameter (computer programming)System callFunctional (mathematics)Web 2.0Stack (abstract data type)Standard deviationPoint (geometry)Element (mathematics)Source code
07:53
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
09:16
Session Initiation ProtocolPlug-in (computing)Link (knot theory)Session Initiation ProtocolObject (grammar)Mobile WebCASE <Informatik>Plug-in (computing)Computer animation
09:32
Client (computing)Library (computing)ExistenceSystem callLibrary (computing)Different (Kate Ryan album)Inclusion mapWeb browserLevel (video gaming)Computer animation
10:01
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
10:28
Session Initiation ProtocolPlug-in (computing)Link (knot theory)System callGeneric programmingFunctional (mathematics)CodePlug-in (computing)Electric generatorParameter (computer programming)
11:05
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
12:01
Client (computing)Open sourceDemo (music)Slide ruleSession Initiation ProtocolVirtual machineIntegrated development environmentLink (knot theory)Ferry CorstenCuboidVirtualizationComputer animation
12:38
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
16:20
Menu (computing)Drum memorySession Initiation ProtocolMehrplatzsystemAbstractionLink (knot theory)Revision controlRepresentational state transfer2 (number)Product (business)Event horizonVideoconferencingSystem callSoftware developerServer (computing)BlogSlide ruleComputer animation
17:17
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
20:04
Point cloudComputer animation
Transcript: English(auto-generated)
00:05
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.
00:26
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.
00:43
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.
01:03
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.
01:23
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.
01:43
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.
02:04
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.
02:25
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.
02:40
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.
03:00
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.
03:23
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.
03:43
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.
04:03
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.
04:26
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.
04:44
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.
05:01
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.
05:22
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,
05:40
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,
06:00
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
06:28
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.
06:43
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,
07:01
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.
07:23
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.
07:47
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.
08:02
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.
08:21
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.
08:42
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.
09:01
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.
09:22
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.
09:44
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.
10:01
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,
10:21
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.
10:45
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.
11:04
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.
11:24
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.
11:42
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.
12:02
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.
12:25
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.
12:41
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.
13:00
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.
13:24
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.
13:45
All is on my local machine, of course, for simplicity. OK, this is one session.
14:59
I've already inserted the data and running my own private server PBX on my local machine.
15:06
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.
15:24
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.
15:41
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.
16:03
OK, come back to presentation for a few slides.
16:33
OK, this slide is to show you only to understand that with WebRTC, you can make a real product for your customers.
16:42
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.
17:03
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,
17:24
everything else, these are all some of my contacts, and I will be very happy to talk with you. Thank you.
17:48
Does anybody have a question? Probably a stupid question, but Janus is not using ISE or standard return, is that correct?
18:04
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,
18:28
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.
18:41
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.
19:04
OK, you can have different configurations of Janus Gateway. So, curious about the CPML5, the project now,
19:23
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,
19:43
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.