Building WebRTC Solutions with the 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, Inc. 2014, All Rights Reserved. 2
Recap: the Aura Collaboration Environment WebRTC Architecture - Proprietary. Use pursuant to your signed agreement or policy. 3
WebRTC Snap-in Architecture = Customer Developed / Provided DMZ Customer Facing Web Application = Developed = Either Customer Provided or Developed HTML 5 WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API HTTP Reverse Proxy ASBCE STUN/ TURN HTTP Signaling Collaboration Environment WebRTC Snap-In WebRTC Media Server Aura, Inc. 2014, All Rights Reserved. 4
Collaboration Environment = Customer Developed / Provided DMZ Collaboration Environment is a highly available, highly scalable HTML 5 platform for deployment of diverse Snap-Ins developed by, Business Partners and Customers. WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API HTTP Reverse Proxy Includes call control, J2EE HTTP, Email and SMS ASBCE capabilities. STUN/ TURN Customer Facing Web Application HTTP Signaling = Developed Collaboration Environment WebRTC Snap-In = Either Customer Provided or Developed WebRTC Media Server Aura, Inc. 2014, All Rights Reserved. 5
WebRTC Snap-in = Customer Developed / Provided DMZ Customer Facing Web Application = Developed = Either Customer Provided or Developed HTML 5 WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API Translates HTTP signaling to signaling, HTTP enforces Reverse authorization, Proxy engages AMS to translate WebRTC media to media ASBCE STUN/ TURN HTTP Signaling Collaboration Environment WebRTC Snap-In WebRTC Media Server Aura, Inc. 2014, All Rights Reserved. 6
WebRTC JavaScript Library (JSL) WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API DMZ HTML 5 Customer Facing Web Application Downloaded from WebRTC Collaboration Snap-in and invoked by Web HTTP Environment Application JavaScript. Reverse Proxy Interfaces HTTP to standard Signaling WebRTC WebRTC browser JavaScript interface and Snap-In ASBCE signals with WebRTC Snap-In using HTTP. STUN/ TURN = Customer Developed / Provided = Developed = Either Customer Provided or Developed WebRTC Media Server Aura, Inc. 2014, All Rights Reserved. 7
Media Server (AMS) = Customer Developed / Provided DMZ Customer Facing Web Application = Developed = Either Customer Provided or Developed HTML 5 WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API HTTP Reverse Proxy ASBCE HTTP Signaling Terminates STUN/ ICE, STUN, TURN TURN, DTLS. Translates WebRTC media stream to media stream. WebRTC Collaboration Environment WebRTC Snap-In Media Server Aura, Inc. 2014, All Rights Reserved. 8
SBC for Enterprise = Customer Developed / Provided DMZ Customer Facing Web Application = Developed = Either Customer Provided or Developed HTML 5 WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API HTTP Reverse Proxy ASBCE STUN/ TURN HTTP Signaling WebRTC Collaboration Environment WebRTC Snap-In Secure edge component for WebRTC. Includes STUN and TURN server as well as optional HTTP Reverse Proxy Media Server Aura, Inc. 2014, All Rights Reserved. 9
Where does your code fit in? - Proprietary. Use pursuant to your signed agreement or policy. 10
Where your code goes WebApp HTML / JavaScript WebRTC JavaScript (JSL) Standard WebRTC API 2 DMZ HTTP Reverse Proxy HTML 5 Customer Facing Web Application HTTP Signaling Your JavaScript code invokes ASBCE the WebRTC JavaScript STUN/ Library API to pass the TURN Authorization Token and initiate the call. WebRTC 1 Your server-side code generates Collaboration an Authorization Token for each Environment call and returns it to your JavaScript code. Sample code exists WebRTC for Java,.NET and PHP. Snap-In Media Server = Customer Developed / Provided = Developed = Either Customer Provided or Developed Aura, Inc. 2014, All Rights Reserved. 11
Security starts with your code. Why is that? Trust relationship between Service Provider, Enterprise SBCs SP asserts identity (ICLID), helps with traffic influx PSTN Service Provider SBC Trust Internet Enterprise SBC Contact Center WebRTC No trust between enterprise edge security and browsers Need another way to assert identity, control influx Trust Internet Reverse Proxy / STUN / TURN Customer Facing Web Application Collaboration Environment WebRTC Snap-In Trust Contact Center, 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) Customer Facing Web Application Creates & Encrypts Token Decrypts & Validates Token Collaboration Environment WebRTC Snap-In, 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, Inc. 2014, All Rights Reserved. 14
Let s look at some code! var client; var thecall; client = new avayawebrtc.client(); 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 = <If username available for caller>; client.domain = <If caller domain available>; client.connect(); Declare variables, instantiate Client object Configure client and connect, Inc. 2014, All Rights Reserved. 15
Call initiation / establishment onconnectedcb callback is invoked Create Call object and launch call thecall = new avayawebrtc.call(client); thecall.ringingfileurl = <wav file played after call is launched>; thecall.destinationaddress = <called number>; thecall.contextid = <Context ID from context store>; thecall.initiate(); 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, Inc. 2014, All Rights Reserved. 16
Time to peek under the covers A brief introduction to WebRTC protocols and call flows - Proprietary. Use pursuant to your signed agreement or 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., Inc. 2014, All Rights Reserved. 18
WebRTC Call Flow, Part 1, Inc. 2014, All Rights Reserved. 19
WebRTC Call Flow, Part 2, Inc. 2014, All Rights Reserved. 20
WebRTC Call Flow, Part 3, Inc. 2014, All Rights Reserved. 21
WebRTC Call Flow, Part 4, Inc. 2014, All Rights Reserved. 22
Demo Customer Journey - Proprietary. Use pursuant to your signed agreement or policy. 23
Enabling a Seamless Customer Journey Web Appliance Application Support Web Site Collaboration Environment Context Store HTTP(S) Collaboration Environment WebRTC Snap-In Collaboration Designer Real Time Speech Collaboration Environment Work Assignment Internet Session Manager Agent Desktop Web Application WebRTC Media /MSML AMS 7.5** AMS 7.5** Media Server Contact Center Elite Media, 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!, Inc. 2014, All Rights Reserved. 25