Presentation at ClueCon 2019 - Chicago, IL, USA 🇺🇸

1. WebRTC Cloud Phone with Asterisk, sipML5 & Janus Alessandro Polidori - @ale_polidori Chicago, IL, USA August 8th 2019

2. Web Everywhere travels health customer service shopping pay tv hotels

3. eCommerce ?

5. getSupport() ?

6. knowledge base email live chat facebook messenger automatic bot

7. We will call you within: LESS THAN 1 MINUTE !

9. ???

10. NEW INTERACTIONS Web - Video Calls - Smartphone GSM

12. What components ?

13. 1. Backend PBX 2. Frontend Web

16. 1. Backend

17. 1. Backend PBX

18. 1. Backend PBX

19. 1. Backend PBX

20. 1. Backend PBX

21. 1. Backend PBX { REST-API }WebSocket

22. 1. Backend PBX { REST-API }WebSocket

23. Rest-API Doc Developer Doc bit.ly/nethcti-devdoc bit.ly/nethcti-api

25. REAL-TIME COMMUNICATION To the WEB JAVASCRIPT Media Engine

26. APIs getUserMedia RTCPeerConnection RTCDataChannel

27. NATIVE SUPPORT No Plugins OpenSource APPLICATIONS Audio - Video - Data - P2P

28. S I G N A L I N G SDP: media describe SIP over WebSocket Server needed

29. N E T W O R K STUN TURN ICE

30. WHY ? High costs VoIP deep knowledge Additional plugins

32. Used by Google Hangouts - Discord Facebook Messenger Amazon Chime - TokBox Android iOS Web SDK

33. webrtcindex.com • Video Conferencing • Telephony • Customer Service • Healthcare • Uniﬁed Communications • Gaming

34. … and Browser Support ? caniuse.com

36. supported partialnot supported

37. Native debug

38. InternetPSTN

39. JS InternetPSTN

40. JS InternetPSTN Signaling WebSocket / HTTPS SRTP Media UDP

41. 2. Frontend Web sipML5

42. SIP over WebSocket (signaling) Audio - Video - IM - Screen Sharing OnSIP platform backend JsSIP fork

43. HTML <!doctype html> <html> <head></head> <body> <video autoplay id="video"></video> <script src="sip-client.js"></script> </body> </html>

44. HTML <!doctype html> <html> <head></head> <body> <video autoplay id="video"></video> <script src="sip-client.js"></script> </body> </html>

45. let configuration = { uri: '3000@nethesis.it', transportOptions: { wsServers: [ 'wss://nethesis.it:8089/ws' ] }, authorizationUser: '3000', password: '1234' }; let phone = new SIP.UA(configuration); phone.on('registered', e => {...}); phone.on('invite', e => {...}); phone.on('...', e => {...}); phone.start(); 1 User Agent 2 Video Call 3 Answer Call 4 Hangup

46. let configuration = { uri: '3000@nethesis.it', transportOptions: { wsServers: [ 'wss://nethesis.it:8089/ws' ] }, authorizationUser: '3000', password: '1234' }; let phone = new SIP.UA(configuration); phone.on('registered', e => {...}); phone.on('invite', e => {...}); phone.on('...', e => {...}); phone.start(); 1 User Agent 2 Video Call 3 Answer Call 4 Hangup

47. 3 Answer Call 4 Hangup 2 Video Call 1 User Agent let session = phone.invite('34012@nethesis.it'); session.on('progress', e => {...}); session.on('failed', e => {...}); session.on('trackAdded', () => { let pc = session.sessionDescriptionHandler .peerConnection; let remoteStream = new MediaStream(); pc.getReceivers().forEach(receiver => { remoteStream.addTrack(receiver.track); }); remoteStreamVideo.srcObject = remoteStream; remoteStreamVideo.play(); // and add local one });

48. 3 Answer Call 4 Hangup 2 Video Call 1 User Agent let session = phone.invite('34012@nethesis.it'); session.on('progress', e => {...}); session.on('failed', e => {...}); session.on('trackAdded', () => { let pc = session.sessionDescriptionHandler .peerConnection; let remoteStream = new MediaStream(); pc.getReceivers().forEach(receiver => { remoteStream.addTrack(receiver.track); }); remoteStreamVideo.srcObject = remoteStream; remoteStreamVideo.play(); // and add local one });

49. 2 Video Call 4 Hangup 1 User Agent 3 Answer Call phone.on('invite', session => { session.on('progress', e => {...}); session.on('failed', e => {...}); session.on('trackAdded', () => { let pc = session .sessionDescriptionHandler .peerConnection; let remoteStream = new MediaStream(); pc.getReceivers().forEach(receiver => { remoteStream.addTrack(receiver.track); }); remoteStreamVideo.srcObject = remoteStream; remoteStreamVideo.play(); // and add local one }); });

50. 2 Video Call 4 Hangup 1 User Agent 3 Answer Call phone.on('invite', session => { session.on('progress', e => {...}); session.on('failed', e => {...}); session.on('trackAdded', () => { let pc = session .sessionDescriptionHandler .peerConnection; let remoteStream = new MediaStream(); pc.getReceivers().forEach(receiver => { remoteStream.addTrack(receiver.track); }); remoteStreamVideo.srcObject = remoteStream; remoteStreamVideo.play(); // and add local one }); });

51. 3 Answer Call 1 User Agent 2 Video Call 4 Hangup let hangup = e => { rtcSession.terminate(); };

52. Implementation #2

53. sipML5 Google I/O 2012 Signals: SIP over WebSocket Audio - Video - IM - Screen Sharing Desktop & Mobile

54. 1Initialization 2SIP Stack Creation 3Events Listener 4Extension registration 5Video call SIPml.init(successCb, errorCb); function engineReadyCb(e) { createSipStack(); } function engineErrorCb(e) { console.error(e.stack); }

55. 3Events Listener 4Extension registration 5Video call 1Initialization 2SIP Stack Creation let sipStack = new SIPml.Stack({ realm: 'nethesis.it', impu: 'sip:3000@nethesis.it', password: '1234', display_name: 'ale_polidori', websocket_proxy_url: 'wss://nethesis.it:8089/ws', events_listener: { events: '*', listener: sipEventsListener } }); sipStack.start();

56. 2SIP Stack Creation 4Extension registration 5Video call 1Initialization 3Events Listener function sipEventsListener (e) { if (e.type === 'i_new_call') { ringing.play(); e.newSession.setConfiguration({ video_local: document.getElementById(localId), video_remote: document.getElementById(remoteId), audio_remote: document.getElementById(audioId), events_listener: { events: '*', listener: callEventsListener } }); } }

57. 2SIP Stack Creation 3Events Listener 5Video call 1Initialization 4Extension registration let registerSession = sipStack.newSession( 'register', { events_listener: { events: '*', listener: registerEventsListener } }); registerSession.register();

58. 2SIP Stack Creation 3Events Listener 4Extension registration 1Initialization 5Video Call let callSession = sipStack.newSession( 'call-audiovideo', { video_local: document.getElementById(localId), video_remote: document.getElementById(remoteId), audio_remote: document.getElementById(audioId), events_listener: { events: '*', listener: callEventsListener } } ); callSession.call('00393401234567'); calling.play();

59. Implementation #3

60. Meetecho Company WebRTC Gateway Plugins: SIP, VideoConf, Screen Sharing, IM Transports: HTTP, WebSocket, RabbitMQ Monitoring

61. 1 Initialization 2 Video Call 3 Answer Call 4 Hangup Janus.init({ debug: 'all', callback: function () { console.log('Janus initialized'); // session creation... } });

62. 3 Answer Call 4 Hangup 2 Session creation 1 User Agent function createSession() { let janus = new Janus({ server: 'https://nethesis.it/janus', success: function () { // attach SIP plugin... }, error: function (err) { console.error(err.stack); }, destroyed: function () { console.log('janus destroyed !'); } }); }

63. 3 Answer Call 4 Hangup 2 Session creation 1 User Agent function createSession() { let janus = new Janus({ server: 'https://nethesis.it/janus', success: function () { // attach SIP plugin... }, error: function (err) { console.error(err.stack); }, destroyed: function () { console.log('janus destroyed !'); } }); }

64. 2 Video Call 4 Hangup 1 User Agent 3 Attach SIP Plugin function attachSipPlugin() { janus.attach({ plugin: 'janus.plugin.sip', success: function (sipHandle) {...}, error: function (err) {...}, onmessage: function (msg, jsep) { if (msg.result.event === 'incomingcall') { ringing.play(); } }, onlocalstream: function (stream) { Janus.attachMediaStream(localStreamVideo, stream); }, onremotestream: function (stream) { var videoTracks = stream.getVideoTracks(); Janus.attachMediaStream( remoteStreamVideo, new MediaStream(videoTracks) ); }, oncleanup: function () {...} }); }

65. 2 Video Call 4 Hangup 1 User Agent 3 Attach SIP Plugin function attachSipPlugin() { janus.attach({ plugin: 'janus.plugin.sip', success: function (sipHandle) {...}, error: function (err) {...}, onmessage: function (msg, jsep) { if (msg.result.event === 'incomingcall') { ringing.play(); } }, onlocalstream: function (stream) { Janus.attachMediaStream(localStreamVideo, stream); }, onremotestream: function (stream) { var videoTracks = stream.getVideoTracks(); Janus.attachMediaStream( remoteStreamVideo, new MediaStream(videoTracks) ); }, oncleanup: function () {...} }); }

66. 3 Answer Call 1 User Agent 2 Video Call 4 Video Call sipHandle.createOffer({ media: { audioSend: true, audioRecv: true, videoSend: video, videoRecv: video }, success: function (jsep) { var body = { request: 'call', uri: 'sip:3401234567@nethesis.it' }; sipcall.send({ 'message': body, 'jsep': jsep }); counterpartNum = to; }, error: function (err) {...} });

67. 3 Answer Call 1 User Agent 2 Video Call 4 Video Call sipHandle.createOffer({ media: { audioSend: true, audioRecv: true, videoSend: video, videoRecv: video }, success: function (jsep) { var body = { request: 'call', uri: 'sip:3401234567@nethesis.it' }; sipcall.send({ 'message': body, 'jsep': jsep }); counterpartNum = to; }, error: function (err) {...} });

68. DEMO alepolidori.github.com/janus-webrtc-phone • SERVER • CLIENT NethServer VoIP PBX on DigitalOcean

69. links ON bit.ly/cluecon-2019

70. TAKEAWAYS SERVER PBX NethVoice NethServer PBX CLIENT JS SIP.js sipML5 Janus-Gateway DEMO alepolidori.github.com/webrtc-phone

71. Alessandro Polidori Sr. Software Engineer @ale_polidori

72. ClueCon Weekly March 2019 bit.ly/ccweekly-alep

73. Thank you ! @ale_polidori alessandro.polidori@nethesis.it alessandropolidori

Presentation at ClueCon 2019 - Chicago, IL, USA 🇺🇸

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Presentation at ClueCon 2019 - Chicago, IL, USA 🇺🇸

Similar to Presentation at ClueCon 2019 - Chicago, IL, USA 🇺🇸 (20)

Recently uploaded

Recently uploaded (20)

Presentation at ClueCon 2019 - Chicago, IL, USA 🇺🇸