Building WebRTC Solutions with the Avaya WebRTC Collaboration Environment Snap-in
Joel Ezell Lead Architect, Collaboration Environment R&D Use Cases for Collaboration Environment 3.0 WebRTC – Outbound only
Click to call for support from customer-facing website
Click to call from enterprise directory web page
“Click to call me” URL in email
signature Click to Call Me
© Avaya, Inc. 2014, All Rights Reserved. 2 Recap: the Avaya Aura® Collaboration Environment WebRTC Architecture
Avaya - Proprietary. Use pursuant to your signed agreement or Avaya policy. 3 Avaya WebRTC Snap-in Architecture
= Customer Developed / Provided
DMZ Customer Facing = Avaya Developed Web Application = Either Customer Provided or Avaya Developed HTML 5
Collaboration HTTP Environment WebApp HTML / Reverse JavaScript Proxy Avaya Avaya WebRTC HTTP Signaling Avaya WebRTC JavaScript (JSL) Snap-In Standard WebRTC API ASBCE SIP STUN/ TURN Avaya WebRTC Avaya Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 4 Collaboration Environment
= Customer Developed / Provided
DMZ Customer Facing = Avaya Developed Web Application Collaboration Environment is a = Either Customer Provided highly available, highly scalable or Avaya Developed platform for deployment ofHTML 5 diverse “Snap-Ins” developed by Collaboration Avaya, Business Partners and HTTP Environment WebAppCustomers. HTML / Reverse JavaScript Proxy Avaya Avaya WebRTC HTTP Signaling Avaya WebRTC JavaScriptIncludes (JSL) SIP call control, J2EE Snap-In Standard WebRTCHTTP, API Email and SMSASBCE capabilities. SIP STUN/ TURN Avaya WebRTC Avaya Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 5 WebRTC Snap-in
= Customer Developed / Provided
DMZ Customer Facing = Avaya Developed Web Application = Either Customer Provided or Avaya Developed HTML 5
Translates HTTP signaling Collaboration to SIP signaling,HTTP enforces Environment WebApp HTML / Reverse JavaScript authorization,Proxy engages AMSAvaya Avaya WebRTC HTTP Signaling Avaya WebRTC JavaScript (JSL)to translate WebRTC media Snap-In Standard to SIP media WebRTC API ASBCE SIP STUN/ TURN Avaya WebRTC Avaya Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 6 WebRTC JavaScript Library (JSL)
= Customer Developed / Provided
DMZ Customer Facing = Avaya Developed Web Application = Either Customer Provided or Avaya Developed HTML 5 Downloaded from WebRTC Collaboration Snap-in and invoked by Web HTTP Environment WebApp HTML / ReverseApplication JavaScript. JavaScript InterfacesProxy to Avayastandard WebRTC Avaya WebRTC HTTP Signaling Avaya WebRTC JavaScript (JSL) browser JavaScript interface andSnap-In Standard signals with WebRTC Snap-In WebRTC API ASBCE using HTTP. SIP STUN/ TURN Avaya WebRTC Avaya Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 7 Avaya Media Server (AMS)
= Customer Developed / Provided
DMZ Customer Facing = Avaya Developed Web Application = Either Customer Provided or Avaya Developed HTML 5
Collaboration HTTP Environment WebApp HTML / Reverse JavaScript Proxy Avaya Avaya WebRTC HTTP Signaling Avaya WebRTC JavaScript (JSL) Snap-In Standard WebRTC API ASBCE SIP TerminatesSTUN/ ICE, STUN, TURN TURN, DTLS. Translates WebRTC media stream to Avaya WebRTC Avaya SIP media stream. Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 8 Avaya SBC for Enterprise
= Customer Developed / Provided
DMZ Customer Facing = Avaya Developed Web Application = Either Customer Provided or Avaya Developed HTML 5
Collaboration HTTP Environment WebApp HTML / Reverse JavaScript Proxy Avaya Avaya WebRTC HTTP Signaling Avaya WebRTC JavaScript (JSL) Snap-In Standard Secure edge component for WebRTC API ASBCE WebRTC. Includes STUN SIP STUN/ and TURN server as well as TURN optional HTTP Reverse Proxy Avaya WebRTC Avaya Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 9 Where does your code fit in?
Avaya - Proprietary. Use pursuant to your signed agreement or Avaya policy. 10 Where your code goes
= Customer Developed / Provided Customer 1 DMZ Facing Web = Avaya Developed Application = Either Customer Provided or Avaya Developed HTML 5 Your server-side code generates Collaborationan Authorization Token for each 2 HTTP Environmentcall and returns it to your WebApp HTML / Reverse JavaScript JavaScript code. Sample code Proxy Avaya Avaya WebRTC HTTP Signaling Avayaexists WebRTC for Java, .NET and PHP. JavaScript (JSL) Your JavaScript code Snap-In Standard invokes the Avaya WebRTC API ASBCE WebRTC JavaScript SIP LibrarySTUN/ API to pass the TURN Authorization Token and initiate the call. Avaya WebRTC Avaya Media Stream Media SIP Aura ® Server Media Stream
© Avaya, Inc. 2014, All Rights Reserved. 11 Security starts with your code. Why is that?
SIP Trust relationship Trust between Service Provider, Enterprise SBCs Service Internet Enterprise Contact SP asserts identity PSTN Provider SBC Center (ICLID), helps with SBC traffic influx
WebRTC Customer Facing Trust No trust between Web Application enterprise edge security and Trust browsers Collaboration Environment Need another Reverse Avaya Proxy / Contact way to assert Internet WebRTC identity, control STUN / Snap-In Center influx TURN © Avaya, Inc. 2014, All Rights Reserved. 12 Components of the Authorization Token
Globally Unique ID (GUID) Fixed String Timestamp in UTC Validity Window Caller Identity (Optional) Restricted Destination (Optional)
Collaboration Customer Facing Environment Web Application Avaya WebRTC Snap-In Creates & Decrypts & Encrypts Validates Token Token © Avaya, Inc. 2014, All Rights Reserved. 13 Fundamental Tenet: Never Create Authorization Token in the Browser The shared secret encryption key: – Keeps the solution secure – Creates trust between web applications and snap-in – Must NEVER cross the wire The creation and encryption of the authorization token must always be done in the web application server The encrypted token is then relayed by the browser
© Avaya, Inc. 2014, All Rights Reserved. 14 Let’s look at some code! var client; Declare var theCall; variables, client = new avayaWebRTC.Client(); instantiate Client object client.onConnectedCB = connectedCB; client.onDisconnectedCB = disconnectedCB; client.onNotificationCB = notificationCB; client.onCallConnectedCB = onCallConnectedCB; Set Callbacks client.onCallInitiatingCB = onCallInitiatingCB; client.onCallRingingCB = onCallRingingCB; client.onCallRemoteDisconnectedCB = onCallRemoteDisconnectedCB; client.onCallErrorCB = onCallErrorCB; client.onRemoteMediaConnectedCB = onRemoteMediaConnectedCB; client.webRTCHTTPAddress = serverURL; client.securityToken = token; client.username =
© Avaya, Inc. 2014, All Rights Reserved. 15 Call initiation / establishment
Create Call object onConnectedCB callback is invoked and launch call theCall = new avayaWebRTC.Call(client); theCall.ringingFileUrl =
onCallInitiatingCB callback is invoked onCallRingingCB callback is invoked after call is launched to called party and that party is alerting onRemoteMediaConnectedCB is invoked when receiving media from far end. Ringing file is stopped. onCallConnectedCB invoked on answer
© Avaya, Inc. 2014, All Rights Reserved. 16 Time to peek under the covers
A brief introduction to WebRTC protocols and call flows
Avaya - Proprietary. Use pursuant to your signed agreement or Avaya policy. 17 Key WebRTC Protocols STUN – Session Traversal Utilities for NAT – Allows an endpoint to discover if it is behind a NAT, and if so, discover the NAT mapping currently in use. – Used to test connectivity between the two endpoints on their various “candidate” addresses. ICE – Interactive Connectivity Establishment – Uses a technique called “hole punching” – Test packets are sent to discover which “candidates” are routable between a pair of endpoints TURN – Traversal Using Relays around NATs – Enables a server to relay packets between endpoints if ICE fails DTLS – Datagram Transport Layer Security – Used to establish SRTP key in the media plane directly between the 2 endpoints.
© Avaya, Inc. 2014, All Rights Reserved. 18 WebRTC Call Flow, Part 1
© Avaya, Inc. 2014, All Rights Reserved. 19 WebRTC Call Flow, Part 2
© Avaya, Inc. 2014, All Rights Reserved. 20 WebRTC Call Flow, Part 3
© Avaya, Inc. 2014, All Rights Reserved. 21 WebRTC Call Flow, Part 4
© Avaya, Inc. 2014, All Rights Reserved. 22 Demo – Customer Journey
Avaya - Proprietary. Use pursuant to your signed agreement or Avaya policy. 23 Enabling a Seamless Customer Journey
Collaboration WebAppliance Application Support Environment Web Site Context Store
Collaboration Environment Collaboration Environment WebRTC Collaboration Real Time Work Snap-In Designer Speech Assignment HTTP(S)
Internet SIP SIP Agent Desktop Web Application Session Manager
SIP/MSML SIP
WebRTC Media AMS 7.5** AvayaAMS 7.5** Media Contact Center Server Elite
SIP Media
© Avaya, Inc. 2014, All Rights Reserved. 24 Next Steps
Download SDK from http://devconnectprogram.com/site/global/products_resources /avaya_aura_collaboration_environment/avaya_snap_ins/web rtc/overview/index.gsp – Select latest release and go to “Downloads” Browse Sample Applications / code snippets Consult javascriptdoc for details on API Start building Real-Time Communications into your web applications!
© Avaya, Inc. 2014, All Rights Reserved. 25