WebRTC Change Communications Forever

Talks

Greg Baugues

@GregBaugues

#webrtc

#real-time-applications

#javascript

#communication

#twilio

WebRTC Change Communications Forever

by Greg Baugues

The video titled "WebRTC Change Communications Forever" features Greg Baugues, a developer evangelist at Twilio, who discusses the transformative potential of WebRTC (Web Real-Time Communication). Baugues highlights how WebRTC is revolutionizing voice, video, and data communications by enabling direct peer-to-peer communication within web browsers, shifting away from hardware dependency.

Key points covered in the video include:

- Historical Context: Baugues compares the evolution of communication technologies at Epcot, illustrating the legacy of tools like the printing press, telegraph, and telephone, concluding with the innovative leap introduced by personal computers.

- Definition of WebRTC: WebRTC allows for real-time communication in browsers without the need for plugins. It encompasses three primary JavaScript APIs:

- getUserMedia for camera and microphone access.

- RTCPeerConnection to establish direct connections.

- RTCDataChannel for unknown yet potential applications beyond video calls.
- Peer-to-Peer Connections: Unlike traditional models where data routes through servers, WebRTC enables fast and secure peer-to-peer connections, reducing latency and enhancing security since messages are encrypted and not routed by third parties.
- WebRTC’s Impact: Baugues asserts that WebRTC can disrupt various industries by empowering developers to create applications that revolutionize how we communicate. He cites applications beyond video conferencing, such as distributed CDN capabilities and peer-to-peer file sharing akin to BitTorrent.
- Adoption Challenges: While WebRTC is compatible with Chrome and Firefox, Baugues notes that challenges remain with Microsoft and Apple fully adopting it, emphasizing the need for developers to create applications that spur demand for wider adoption.
- Signaling and Connection Setup: Although WebRTC does not handle signaling, Baugues explains the process required to establish connections, using protocols like ICE (Interactive Connectivity Establishment) and STUN.
- Practical Applications: Baugues demonstrates backend code to create a simple communication app using Twilio, showcasing the ease of integrating WebRTC for both browser-to-browser and browser-to-telephone calls.

In conclusion, the video reinforces the notion that software, particularly through technologies like WebRTC, is significantly enhancing communication capabilities, making it easier for people to connect irrespective of hardware constraints. Baugues encourages developers to leverage these tools to innovate and improve societal communication on a larger scale.

00:00:17.160 Hello, everyone. My name is Greg, and I am a developer evangelist for Twilio. Out of curiosity, how many of you have heard of Twilio before? That’s awesome! And how many of you have actually used Twilio? That's great to hear! I'm thrilled to be here today at RailsConf in Chicago. It’s an incredible milestone for me to speak here, especially since I’ve only been working with Rails for about three years. I started with Twilio two months ago, and it has been a fantastic experience. Speaking at RailsConf in the city I love for a company that I admire feels like a big accomplishment.

00:01:15.400 If you came up to me afterward and asked, "Hey Greg, you just spoke at RailsConf in the city you love; what are you going to do next?" what do you think I would say? That's right, I'm heading to Disney World! I wish I could say I planned it that way, but my wife and I just happened to book our vacation to Disney World on the exact day after RailsConf. It worked out perfectly.

00:01:40.320 Growing up, I absolutely loved Disney World. To me, it truly was the happiest place on Earth. So much so that when I was in college, I took a semester off to pick up trash at the Magic Kingdom, earning $5.85 an hour. It was an amazing experience! However, back then, my favorite place was Epcot. I didn't care much for castles, but Epcot, which stands for Experimental Prototype Community of Tomorrow, captivated me. It was all about a vision of the future, inspiring us to think about what’s possible with technology and the ways in which technology can change our lives, generating new ideas and methods of communication.

00:02:13.320 The iconic golf ball at Epcot is actually a ride called Spaceship Earth. If you haven't been there before, when you get inside, you board a car and go through a 20-minute tribute to the history of communication. You see various scenes, including monks manually copying manuscripts. Those who are animatronics represent this historical milestone. You also see the evolution of the printing press during the Industrial Revolution and the advent of the telegraph, marking the first real-time communication over great distances. The telephone system was next—a revolution that allowed real-time voice communication. And, back in the mid to late '80s, the last scene depicted a boy in America talking via video screen to a girl in Japan. That was everyone’s idea of the future.

00:03:06.440 Epcot has always represented a vision of the future, and what I find fascinating is that the future does indeed arrive. Every decade or so, they shut down Spaceship Earth for updates. Recently, I learned they added a new scene showcasing what Disney considers an important contribution to human communication—the advent of the personal computer. They believe that this, along with the proliferation of software, impacts human communication as significantly as the telephone did. At Twilio, we wholeheartedly agree with that view. Our mission statement is to change communications forever. The longer version is to change communications forever by migrating the industry from legacy hardware to the future that is software.

00:03:46.760 Let’s clarify this shift a bit more. We’re seeing this trend everywhere; Mark Andreessen once said that software is eating the world. Numerous industries, previously tied to hardware, are now playgrounds for software developers like you. Consider the hosting industry, for example. Change hosting forever by migrating the industry from its legacy hardware to future software. Who might I be talking about? Exactly—Heroku and Amazon with AWS. It used to be that if you wanted to host a website, you needed technical expertise. Now, it’s as simple as creating a new server and clicking a button, without any knowledge of hardware. Digital Ocean is another company that's making waves in this space.

00:04:39.640 Now, let's discuss payments. Who's changing payments forever? Yes, Stripe! And PayPal, of course. Back in the day, to process credit cards, you had to purchase expensive hardware, which would be the same year after year. Today, companies like Square spend very little on hardware, to the point where they give it away. They’re software developers disrupting the payments industry.

00:05:01.880 What about transportation? Who's changing transportation forever? Right—Uber! Imagine being the owner of a company that makes traditional taxis. Five years ago, everything was stable; no need for drastic changes. Then, along comes Uber, a software company that doesn’t create hardware but completely disrupts the transportation industry. We software developers are uniquely positioned to make a significant impact on the world.

00:05:27.760 We're passionate about changing communications forever, moving from legacy hardware to this future of software. So how do we use software to empower everyone in this room to change communications? A new technology has emerged over the past three years that we believe will change how the world communicates: WebRTC. WebRTC provides real-time communication in the browser through open peer-to-peer protocols. By the way, who here has heard of WebRTC? I can tell you're all here, so it must be somewhat interesting!

00:06:12.760 WebRTC enables real-time communication within the browser. While real-time communication on the internet isn’t entirely new—think Skype over a decade ago, which also offered voice communication—what’s revolutionary about WebRTC is that it doesn’t require plugins. Before, real-time communication in the browser relied on plugins like Flash. Now, WebRTC offers a JavaScript API that gives developers access to features like video and audio without additional installations, making development much simpler.

00:07:18.919 Let’s break down what WebRTC is. WebRTC is an open set of protocols utilized through three main JavaScript APIs: getUserMedia, which captures the media; RTCPeerConnection, which establishes a connection for communication; and RTCDataChannel, which is very interesting. While most might associate WebRTC primarily with video or voice, the true potential of RTCDataChannel opens up numerous opportunities that haven’t been fully realized yet.

00:08:01.639 With RTCDataChannel, we’re not sending messages through a server; we’re establishing a direct connection between two browsers. This design allows data to be fast, because it’s not routed through an external server. In a situation where two users are both in Japan, WebRTC helps establish a direct connection, significantly reducing latency. This peer-to-peer communication is secure, as messages are encrypted and don’t transit through a third party.

00:08:43.320 Moreover, WebRTC is interoperable; users can connect across different applications without special software. If someone has a browser, they can utilize the applications built on WebRTC. However, while WebRTC is fantastic, it does introduce some complexities, such as not having built-in signaling capabilities, which means developers need to implement that aspect independently.

00:09:34.000 For those unfamiliar with network protocols, this can be a bit daunting. Setting up a signaling protocol is crucial for establishing reliable communication between two machines. WebRTC uses the Session Description Protocol (SDP) to facilitate this. It answers questions about establishing connections and determines information flow. Protocol standards such as ICE (Interactive Connectivity Establishment) help establish the actual network route between devices.

00:10:17.400 But WebRTC does not automatically handle complex scenarios involving NAT (Network Address Translation) or varying networking environments. This could complicate things, especially for beginners, since it’s crucial to understand how signaling protocols operate for effective connection establishment.

00:10:52.320 For developers looking to get started with WebRTC, I recommend visiting a library called SimpleWebRTC. It simplifies the complexities involved with implementing WebRTC. A signaling server built on Node.js is included, which eases common issues developers face, while standardizing different approaches across various browsers.

00:11:40.600 Twilio also offers a product called Twilio Client, which enables communication in the browser, leveraging WebRTC. Although it's not a full WebRTC solution, it facilitates significant aspects of WebRTC communication without needing to solve all its inherent problems. Twilio Client takes care of interoperability challenges by allowing developers to focus on user experience without worrying about underlying infrastructure issues.

00:12:29.760 Let’s dive into a quick demo using Twilio Client to illustrate how to build an app enabling browser-to-browser and browser-to-telephone communication. Please bear with me as I start this demo. In my Twilio dashboard, I’m creating a new app, which I’ll call ‘My RailsConf Phone.’ This app will require a URL where Twilio can retrieve instructions for any outbound calls.

00:13:07.680 Once I’ve created the application, Twilio provides a unique identifier, and I’m going to build this using Sinatra. It’s a super stripped-down web framework, ideal for this kind of quick application development. I’ll set up my routes dynamically and define my application’s responses clearly.

00:13:54.520 With Twilio’s capabilities, I need to send a capability token to Twilio to authorize my app’s interaction. I will set up capabilities and utilize the Twilio library to generate a proper authorization token. By setting necessary capabilities, I allow the client to make outgoing connections, and after obtaining my token, I proceed to construct the necessary frontend functionalities.

00:14:41.560 Arriving at the client’s end, I want to show you what the user interface looks like. It’s straightforward, consisting of basic HTML and JavaScript. Users enter their phone number, press a button, and Twilio sends that number along with the capability token to process the call.

00:15:25.640 When I initiate the call, Twilio verifies if I have permissions to operate that application. If everything checks out, Twilio uses the defined URL to find further instructions. Twilio then makes the call based on the number provided and my setup instructions.

00:16:05.740 So now, I need two numbers to make this call work. The ‘from’ number must be one purchased through Twilio or one registered to verify ownership. As I set my mobile number as the calling number, the ‘to’ number is the number I've inputted through the app.

00:16:51.360 When I hit call, Twilio sends a request to my server, which will respond with the necessary XML instructions. This instructs Twilio to dial from my defined number to the provided number, enabling seamless communication.

00:17:36.920 As I initiate the video, you may get a permission prompt from Chrome, asking if the application can access your microphone. With WebRTC, this prompt is visible because Chrome handles this natively rather than requiring Flash.

00:18:27.840 You will see that I can now communicate seamlessly from one end to the other. This straightforward app built in Sinatra shows you just how easily WebRTC can facilitate peer-to-peer communication.

00:19:12.480 Beyond basic calls, Twilio offers extensive capabilities, including call recording, transcript generation, and facilitating conference calls with multiple participants. For instance, a case study involves a finance company that built an entire call center leveraging Twilio capabilities, proving the efficiency of building robust applications.

00:19:56.320 We’re excited about WebRTC and how it democratizes communication technology. Previously, setting up a call center required a substantial investment—thousands of dollars spent on hardware and legal contracts. Now, with just an account on Twilio, anyone can create a call center using minimal resources—potentially for just a few dollars.

00:20:44.760 This change enables significant advancements in how communications are conducted today. We aim to inspire everyone here to engage with these tools and skills to positively impact the world. The more we communicate, the better society becomes. So, go ahead and explore WebRTC and Twilio Client to change the world!