at&t’s enhanced webrt solution - at&t developer · 1. sign up at developer.att.com 2....

24
© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change. Mention of a specific company or entity is not an endorsement by AT&T. Dharmik Mehta AT&T’s Enhanced WebRTC Solution Senior Product Marketing Manager, Device Operations & Developer Services Mark Campbell Director of New Tech Product Dev, IT Architecture & Engineering

Upload: others

Post on 21-May-2020

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Dharmik Mehta

AT&T’s Enhanced WebRTC Solution

Senior Product Marketing Manager, Device Operations & Developer Services

Mark CampbellDirector of New Tech Product Dev, IT Architecture & Engineering

Page 2: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

WebRTC is an evolving standard that enables web browsers with Real-Time Communications via simple Javascript APIs.

What is WebRTC

Media ChannelAudio and Video media exchange

between endpoints

Data Channel Exchange

streaming data between peers

Page 3: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Tech Support

Embed call button for personalized Tech support

In App Calling

Add click-to-call feature to your Social App

Gaming

Integrate conference to strategize on team games

Interesting Use Cases

Page 4: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Media ChannelAudio and Video media exchange

between endpoints

Data Channel Exchange

streaming data between peers

Your Web Application Powered by AT&T Enhanced WebRTC

Why AT&T’s Enhanced WebRTC?

Signaling ChannelPeer Connection

between endpoints (browser, server)

Complete Implementation Solution

Page 5: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Why AT&T’s Enhanced WebRTC?

Virtual Number Account ID

Your Web Application Powered by AT&T Enhanced WebRTC

Complete Identity Solution

AT&T Mobile Number

Page 6: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Basic Calling• Make/Receive• Audio/Video• Hold/Resume

Conferencing• Audio/Video• Add/Remove

Participant• End conference

Advanced Calling• Move • Transfer• 2nd Call/Switch

Why AT&T’s Enhanced WebRTC?

Your Web Application Powered by AT&T Enhanced WebRTC

Complete Calling Solution

Calls To & From: E911 Mobile# & VTN

Page 7: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Communication Apps

• App development platform

• Plugins NOT required

WebRTC App Dev platforms

• Login with Mobile#

• Seamless Move Feature

Key Differentiators

Page 8: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Enhanced WebRTC in Action

Page 9: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Internet Browser

Web Application

Developer Layer

AT&T API Platform

AT&T Node.js DHS

AT&T Supplied Components

Developer Components

AT&T Enhanced WebRTC SDK

HTML / JavaScript

Web Tier

Legend

How Does it Work?

JavaScript API

App RequestConfig

Signaling

Token/E911

MediaToken/E911 OAuth Auth Code (Optional)

Config

Page 10: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Browser-to-Browser Calling

AT&T API Platform

User A User B

Page 11: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Move Call to Mobile

AT&T API Platform

User A User B

AT&T Mobile Network

User A

Page 12: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Browser-to-PSTN Calling

AT&T API Platform Public Switched Telephone Network (PSTN)

User AUser B

Any US-based number

Page 13: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

With a free account:

• QuickStart Guides for SDK and RESTful APIs

• Sample App w/ code snippets (JS, Ruby on Rails, Java and PHP)

• Detailed docs for SDK, RESTful APIs, Error Codes and FAQs

• Free, award-winning Developer Support

• SDK download which includes:• ewebrtc-sdk.min.js (175K)

• JSDocs and installable Sample App with step-by-step Tutorial

• Reference implementation of DHS in Node.js (for OAuth & E911 APIs)

What’s in the Box?

Page 14: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

1. Sign up at developer.att.com

2. Create an app (Key & Secret)

3. Download SDK package*

4. Install Node.js and SDK

5. Configure Domain, Key and Secret

6. Install and start the DHS

7. Verify localhost and port

8. Launch Node.js Sample App

9. Load Sample App in browser

SDK QuickStart

* SDK is optional but strongly recommended

Page 15: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

1. Check for compatible browser … hasWebRTC

2. Configure domain and API endpoint … configure

3. Instantiate the Phone object … getPhone

4. Register error & event callbacks – e.g. … call:connected

5. Get user consent and auth_code … HTTP GET …

6. Create access token … createAccessToken

7. Create E911 ID … createE911Id

8. Start a session … login

9. Place a call … dial

Adding Code to Your App Using SDK

Page 16: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Check for compatible browser

ATT.rtc.configure({ewebrtc_domain: 'domain.com', // For [email protected]_endpoint: 'https://api.att.com'

});

Configure domain and API endpoint

bWebRTCSupportExists = ('Not Supported' !== ATT.browser.hasWebRTC());

if (!bWebRTCSupportExists) {throw unsupportedBrowserError();

}

Validate that the user’s browser is compatible with WebRTC

Associate the app with the domain you’ve registered for Account ID users

Page 17: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Instantiate the Phone Object

phone = ATT.rtc.Phone.getPhone();

Register Error and Event Callbacks

phone.on('error', onError);phone.on('call:connecting', onCallConnecting);phone.on('call:connected', onCallConnected);phone.on('call:held', onCallHeld);phone.on('call:canceled', onCallCanceled);// etc. for all events your app needs to handle

SDK contains just one class and 29 methods

Create functions to handle errors & event callbacks (35 in all,) wire to UI elements

Page 18: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

function loginEnhancedWebRTC(token, e911Id) {

phone.login({

token: token,

e911Id: e911Id ? e911Id.e911Locations.addressIdentifier : null

});

}

Get User Consent and auth_codeExtract auth_code from OAuth API HTTP redirect response

// Invoke AT&T OAuth Authorize (shown in Node.js)

router.get('/authorize', function (req, res){var authorize_url = api_endpoint + authorize_uri + '?' +

'client_id=' + app_key + '&' + 'scope=' + app_scope;res.redirect(authorize_url);

});

// Extract authorization code from response

router.get('/callback', function (req, res){var auth_code = req.query.code;

});

Page 19: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Create Access TokenUse AT&T OAuth server to create an access token; Mobile Number users must consent

ATT.rtc.dhs.createAccessToken({app_scope: 'MOBILE_NUMBER',auth_code: 'auth_code_from_user_consent',success: success,error: error

});

Page 20: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Create e911 IDe911 requires Mobile Phone and Virtual Number users to provide their address

ATT.rtc.dhs.createE911Id({token: 'access_token_from_createAccessToken_call',address: {

first_name: 'John', last_name: 'Doe',house_number: '1111', street: 'ABC Street',city: 'Seattle', state: 'WA',zip: '98001'is_confirmed: 'false'

},success: success,error: error

});

Page 21: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

function loginEnhancedWebRTC(token, e911Id) {phone.login({

token: token,e911Id: e911Id ? e911Id.e911Locations.addressIdentifier : null

});}

// App is ready to receive events like 'onIncomingCall'

Start a SessionUse token and E911 ID to start a session, and then long-polling for events begins

Page 22: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

Place a Call

function dialCall(callee, mediaType, localMedia, remoteMedia) {if (phone.isCallInProgress()) {

phone.addCall(callee, mediaType, localMedia, remoteMedia);} else {

phone.dial({destination: callee,mediaType: mediaType,localMedia: localMedia,remoteMedia: remoteMedia

});}

}

Use a simple function which accepts a called party ID, media type and HTMLVideoElements

Page 23: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

George Wittenbols - Chief Innovation Officer

Closed Beta Developer

Page 24: AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an app (Key & Secret) 3. Download SDK package* 4. Install Node.js and SDK 5. Configure

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All

other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change.

Mention of a specific company or entity is not an endorsement by AT&T.

• More info – developer.att.com/webrtc

• Visit WebRTC Demos @ Expo Booth• 3 Awesome Demos, 20 Awesome Prizes

• LG - G Tabs, G3 Phones and G Watches

• Customized “You Kick Ass” action figures

• Networking event at “The View”• Meet the leaders and prize announcements

• Next Session: • WebRTC – What It Is and Why You Should Care – Jason Unrein

Q&A