webrtc and web design
DESCRIPTION
Another version of the WebRTC overview, with materials on designing WebRTC into enterprise and edu sites for community, tech support, customer service, and social media.TRANSCRIPT
![Page 1: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/1.jpg)
How WebRTC Will Impact Web Design
![Page 2: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/2.jpg)
2
> Web Real-Time Communications
> New standard that allows browser to be endpoint for communications
> “Allows developers to add real-time voice calls, video chats and file sharing to their web apps without the need for plug-ins.” –TechCrunch
> Javascript, open sourced by Google
WebRTCWhat It Is, Exactly
![Page 3: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/3.jpg)
3 Communications at Web SpeedNothing short of a communications revolution
![Page 4: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/4.jpg)
4
> A softphone in a browser
> Complexity reduction
> Real-time everywhere
> $2 trillion industry re-invented
> Skype, but better, based on standards
The Vision of WebRTCApproaching reality at Web speed
![Page 5: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/5.jpg)
5 Browser SupportHeading Towards Adoption
Chrome• Desktop: Full support• Mobile: Coming soon
Firefox / Firefox Mobile• Desktop: Full support and interop with
Chrome• Mobile: Announced (Android)
Safari• Apple focused on Face Time walled garden
and H.264• Third party plugin: e.g. webrtc4all • iOS is closed and prevents third party
browsers from accessing certain functions
Opera• Mobile: Available (Android)
IE• Via ChromeFrame plugin• Microsoft chose a proprietary path
![Page 6: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/6.jpg)
6
Features• Codecs• Encryption• NAT traversal• Bandwidth
mgmt
Signaling• SIP• XMPP• Proprietary
How Does It Work?Simple, its (almost) all in the browser
WebSocketsWebSockets
![Page 7: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/7.jpg)
7 Basic DiagramPutting the pieces together
![Page 8: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/8.jpg)
8
> Voice• Opus (royalty free, open
source)
> Video• Google and Mozilla and W3C
favor VP8 (patent free and open source)
• Microsoft, Cisco, Apple favor H.264 (requires a license)
> Microsoft• Remember RTAudio and
RTVideo?
Ongoing Fight over Codecs and PatentsWebRTC attempts to set a new standard for open source and royalty free codecs
![Page 9: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/9.jpg)
9
> Email, such as Outlook, Zimbra
> CRM, such as Salesforce
> Not just voice/video, but screen-sharing, right in the app
> Communications-enablement becomes the standard for web apps, especially at work
Communications-Enabling Web AppsAdding Voice, Video, Screen Share, and Chat capabilities
![Page 10: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/10.jpg)
10
Unite Zimbra first version• Initiate calls (click-to-call)• Presence integration• Unified messaging / call history• Conference management• Corporate address book• Calendar free / busy
Unite Zimbra second version• Voice / video in the browser• Screen sharing from the Zimbra
UI• Integrated chat / group chat
VMware Zimbra Communications Enabled WebRTC brings voice / video / screen sharing right into the Zimbra browser UI
![Page 11: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/11.jpg)
11
> Fresh Tilled Soil created Video Chat Widget for websites
> Twelephone-WebRTC-based service to use your Twitter handle as your phone #, but works only in browser
> BananaBread game: peer-to-peer, multiplayer WebRTC technology
> CubeSlam: play face-to-face with friends
Some Cool ExperimentsApplications in Social Media, eCommerce, Gaming, more!
![Page 12: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/12.jpg)
“A Million Touchpoints”: Changing the Function of Websites Forever
![Page 13: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/13.jpg)
13
> Websites become a key customer service function• Yes, a function
> Scores, on large sites, hundreds of endpoints where a call can—and will—originate
> Forget click-to-chat on sites, the website is the customer service, and sometimes sales, hub
Changing What Websites Can DoNever Further from Brochureware
![Page 14: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/14.jpg)
14
> WebRTC will be integrated the way social needs to be now
> Part of the evolution to website as applications
> Once it’s accepted, will need to plan for WebRTC as a key part of any serious enterprise or consumer-facing website
Changing Websites’ FunctionSites Become More Interactive In A Way Social Leads
![Page 15: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/15.jpg)
15
> eCommerce
> EDU sites
> eLearning: Any site can enable real-time learning with voice, chat, and video
> Social Media: With applications like Twelephone, social media becomes a true endpoint in the customer service chain
> Community
Impacts Many FunctionsWebRTC Creates Thousands of Touchpoints Across A Site
![Page 16: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/16.jpg)
Designing the WebRTC-Enabled Site
![Page 17: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/17.jpg)
17
> Add where it will benefit
> Think about how WebRTC can enhance the:• User experience• Lead generation and sales process• Customer support experience• Community
> Add in functionality in areas where it will have significant impact, given the internal needs to support real-time communications
Reasons to Add WebRTCImprove Functionality, UX, Stickiness
![Page 18: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/18.jpg)
18
> Need to be Designed Thoughtfully
> Where are we putting real-time on our site?• Where does it make sense, in terms of
functionality, to have voice? Chat? Video?• Tempting to be a kid in a candy store• Too many different functions, and it can
become cumbersome to manage
Questions to Ask at the Start of a ProjectDesigning WebRTC Into a Site Creates Great New Capabilities
![Page 19: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/19.jpg)
19
> Many orgs are still not handling social media correctly, and now WebRTC is social cubed
> Does this need to tie into the phone system?
> Who is responsible within the organization for managing the inbound and outbound communications?• PR?• Customer service?• Sales?• All of the above?• What gets routed where?
Is the Organization Ready?And how to get clients ready for WebRTC
![Page 20: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/20.jpg)
20
> Connect to phone system• SIP
> Social media
> Customer service• Call center• Email
> Ensure pieces are in place, backend will support it, and responsibilities identified before a project kicks off
Planning IntegrationMaking WebRTC Work with the Rest of Organizational Infrastructure
![Page 21: WebRTC and Web Design](https://reader035.vdocument.in/reader035/viewer/2022062418/554b9f27b4c905ae618b4895/html5/thumbnails/21.jpg)
21
> Consumer adoption first lead the way, pushing the envelope and leading other applications
> Will start to drive enterprise demand
> Applications to customer service and social the greatest
> Consumer sites with service focus
> Organizations will need to know when, how to apply to be effective
What Next for WebRTC?Some predictions