This document discusses enabling real-time communication capabilities on the web through JavaScript and WebRTC. It introduces several JavaScript libraries like SIP.js and sipML5 that provide WebRTC capabilities and can integrate with SIP backends to enable audio and video calling functionality in web applications. The document also discusses WebRTC gateways like Janus that can connect WebRTC to other protocols and provides examples of initializing libraries and placing WebRTC calls through them to build real-time communication features into web apps.

1. Javascript WebRTC
JS Audio & Video Phone Calls from WebAPP
@ale_polidori - JSConf.be 2019

2. Phone-Calls

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 Call - Smartphone GSM

12. Real-Time Communication
to the Web

13. Javascript
media engine

14. getUserMedia
RTCPeerConnection
RTCDataChannel
APIs

15. Native support
no Plugin - Open Source

16. Any application
Audio - Video - Data
Peer-to-Peer

17. Signaling
SDP media describe
needs signals
SIP over WebSocket
server needed

18. Network
Stun, Turn, ICE

19. Why ?
high costs of fees
voip experts
install plugins

20. webrtcindex.com
video Conferencing
telephony
customer Service
healthcare
unified Communications
gaming

21. Google Hangouts
Facebook Messenger
Discord
Amazon Chime
TokBox
Used by

22. Android iOS Web SDK

23. caniuse.com

27. Backend NethVoice
SIP
SDP

28. Backend

29. sipML5

30. SIP.js

31. Signals: SIP over WebSocket
Audio - Video - IM - Screen Sharing
OnSIP platform backend
JsSIP fork
SIP.js

32. SIP.js
sipjs.js
Backend
HTTPS

33. SIP.js create User Agent (the phone)

34. SIP.js make Video Call

35. SIP.js Answer a Call

36. SIP.js Hangup a Call

38. sipML5

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

40. sipML5
Javascript SIP
Javascript SDP
WebRTC
Backend
WebSocket
SRTP / SRTCP / ICE
WebSocket

41. 1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

42. 1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

43. 1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

44. 1. Engine initialization
2. Start SIP Stack
3. Extension registration
4. Start Audio/Video call

45. go deeper

46. sipML5 the Library

47. sipML5 Engine Initialization

48. sipML5 start Sip Stack

49. sipML5 Sip Stack Start

50. sipML5 Sip Stack Start

51. sipML5 Sip Stack Start

52. sipML5 sip stack start

53. sipML5 Sip Stack Start

54. sipML5 Extension Registration

55. sipML5 make Video Call

57. Janus

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

59. Janus
janus.js
Backend
HTTPS

60. 1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

61. 1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

62. 1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

63. 1. Engine initialization
2. Create a session
3. Link SIP plugin
4. Start Audio/Video call

64. go deeper

65. Janus the Library

66. Janus Engine Initialization

67. Janus Create a Session

68. Janus SIP Plugin
Handle to interact with plugin

69. Janus Make Video Call
Call Destination: sip URI
● proto
● number to call
● server backend

70. DEMO

71. https://alepolidori.github.com/webrtc-phone

73. Who is ?
Alessandro Polidori
Sr. Software Engineer at
@ale_polidori

74. learn more
https://bit.ly/jsconfbe19

75. Thank you !
Alessandro Polidori
@ale_polidori