Building WebRTC Solutions with the Avaya WebRTC Collaboration Environment Snap-in. Joel Ezell Lead Architect, Collaboration Environment R&D

(1)

Building WebRTC Solutions with the Avaya

WebRTC Collaboration Environment Snap-in

Joel Ezell

(2)

Use Cases for Collaboration Environment 3.0

WebRTC – Outbound only



Click to call from

enterprise directory

web page

Click to Call Me



“Click to call me”

URL in email

signature



Click to call for support

from customer-facing

website

(3)

Recap: the Avaya Aura® Collaboration

Environment WebRTC Architecture

(4)

Avaya WebRTC Snap-in Architecture

Avaya

Media

Server

WebRTC

Media Stream

Collaboration

Environment

Collaboration

Environment

HTML 5

Customer Facing

Web Application

Standard

WebRTC API

Avaya WebRTC

JavaScript (JSL)

WebApp HTML /

JavaScript

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Avaya WebRTC

Snap-In

Avaya

Aura ®

= Customer Developed / Provided

= Avaya Developed

= Either Customer Provided or Avaya Developed

(5)

Collaboration Environment

Avaya

Media

Server

WebRTC

Media Stream

HTML 5

Customer Facing

Web Application

Standard

WebRTC API

Avaya WebRTC

JavaScript (JSL)

WebApp HTML /

JavaScript

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Avaya

Aura ®

= Avaya Developed

Collaboration

Environment

Collaboration

Environment

Avaya WebRTC

Snap-In

Collaboration Environment is a

highly available, highly scalable

platform for deployment of

diverse “Snap-Ins” developed by

Avaya, Business Partners and

Customers.

Includes SIP call control, J2EE

HTTP, Email and SMS

(6)

WebRTC Snap-in

Avaya

Media

Server

WebRTC

Media Stream

HTML 5

Customer Facing

Web Application

Standard

WebRTC API

Avaya WebRTC

JavaScript (JSL)

WebApp HTML /

JavaScript

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Avaya

Aura ®

= Avaya Developed

Collaboration

Environment

Collaboration

Environment

Translates HTTP signaling

to SIP signaling, enforces

authorization, engages AMS

to translate WebRTC media

to SIP media

Avaya WebRTC

Snap-In

(7)

WebRTC JavaScript Library (JSL)

Avaya

Media

Server

WebRTC

Media Stream

HTML 5

Customer Facing

Web Application

Standard

WebRTC API

WebApp HTML /

JavaScript

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Avaya

Aura ®

= Avaya Developed

Collaboration

Environment

Collaboration

Environment

Avaya WebRTC

Snap-In

Avaya WebRTC

JavaScript (JSL)

Downloaded from WebRTC

Snap-in and invoked by Web

Application JavaScript.

Interfaces to standard WebRTC

browser JavaScript interface and

signals with WebRTC Snap-In

using HTTP.

(8)

Avaya Media Server (AMS)

WebRTC

Media Stream

HTML 5

Customer Facing

Web Application

Standard

WebRTC API

Avaya WebRTC

JavaScript (JSL)

WebApp HTML /

JavaScript

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Avaya

Aura ®

= Avaya Developed

Collaboration

Environment

Collaboration

Environment

Avaya WebRTC

Snap-In

Avaya

Media

Server

Terminates ICE, STUN,

TURN, DTLS. Translates

WebRTC media stream to

SIP media stream.

(9)

Avaya SBC for Enterprise

WebRTC

Media Stream

HTML 5

Customer Facing

Web Application

Standard

WebRTC API

Avaya WebRTC

JavaScript (JSL)

WebApp HTML /

JavaScript

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

Avaya

Aura ®

= Avaya Developed

Collaboration

Environment

Collaboration

Environment

Avaya WebRTC

Snap-In

Avaya

Media

Server

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Secure edge component for

WebRTC. Includes STUN

and TURN server as well as

optional HTTP Reverse

(10)

Avaya - Proprietary. Use pursuant to your signed agreement or Avaya policy. ₁₀

(11)

Where your code goes

Avaya

Media

Server

WebRTC

Media Stream

Collaboration

Environment

Collaboration

Environment

HTML 5

Standard

WebRTC API

Avaya WebRTC

JavaScript (JSL)

Avaya

HTTP Signaling

SIP

Media Stream

SIP

DMZ

ASBCE

STUN/

TURN

HTTP

Reverse

Proxy

Avaya WebRTC

Snap-In

Avaya

Aura ®

= Avaya Developed

Customer

Facing Web

Application

WebApp HTML /

JavaScript

Your server-side code generates

an Authorization Token for each

call and returns it to your

JavaScript code. Sample code

exists for Java, .NET and PHP.

Your JavaScript code

invokes the Avaya

WebRTC JavaScript

Library API to pass the

Authorization Token and

initiate the call.

1

(12)

Security starts with your code. Why is that?

Customer Facing

Web Application

Reverse

Proxy /

STUN /

TURN

Collaboration

Environment

Collaboration

Environment

Avaya

WebRTC

Snap-In

PSTN

Contact

Center

Contact

Center

Enterprise

SBC

Contact

Center

Contact

Center

Internet

Service

Provider

SBC

Trust



Trust relationship

between Service

Provider,

Enterprise SBCs



SP asserts identity

(ICLID), helps with

traffic influx



No trust between

enterprise edge

security and

browsers



Need another

way to assert

identity, control

influx

SIP

WebRTC

Trust

(13)

Components of the Authorization Token



Globally Unique ID (GUID)



Fixed String



Timestamp in UTC



Validity Window



Caller Identity (Optional)



Restricted Destination (Optional)

Collaboration

Environment

Collaboration

Environment

Avaya

WebRTC

Customer Facing

Web Application

(14)

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

(15)

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;

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>;

Declare

variables,

instantiate Client

object

(16)

Call initiation / establishment

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();



onConnectedCB callback is invoked



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

Create Call object

and launch call

(17)

Time to peek under the covers

A brief introduction to

(18)

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.

(19)

(20)

(21)

(22)

(23)

(24)

Collaboration Environment

SIP SIP/MSML

Session Manager

AMS 7.5**

Avaya Media

Server

Contact Center

Elite

Web Application

HTTP(S)

Internet

SIP

Appliance Support

Web Site

Collaboration

Designer

Collaboration

Environment

Context

Store

Collaboration

Environment

Work

Assignment

SIP

Agent Desktop

Web Application

Real Time

Speech

WebRTC Media SIP Media

WebRTC

Snap-In

(25)

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!

(26)