AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an...
Transcript of AT&T’s Enhanced WebRT Solution - AT&T Developer · 1. Sign up at developer.att.com 2. Create an...
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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?
© 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
© 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
© 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
© 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
© 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;
});
© 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
});
© 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
});
© 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
© 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
© 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
© 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