Real-time Communication for Everyone with WebRTC

by Lisa Larson-Kelley

In this session, Lisa Larson-Kelley presents an introduction to WebRTC, a powerful open-source technology that enables real-time communication in modern web browsers without the need for plugins. Lisa, who has over ten years of experience in real-time communication, aims to make attendees familiar with WebRTC's core functionalities and encourage innovation in app development using this technology.

Key Points Discussed:
- What is WebRTC?
- A JavaScript API that allows peer-to-peer sharing of video, voice, and data directly in the browser.
- WebRTC eliminates reliance on proprietary software, offering an accessible platform for developers.

Real-world Applications of WebRTC:
- Enables applications like video customer service interactions, akin to a Skype experience in the browser.
- Technologies such as Google Chromecast leverage WebRTC for seamless communication between devices.
Interoperability and Browser Support:
- WebRTC is compatible with browsers such as Firefox, Chrome, and Opera, but limited in Internet Explorer or Safari as of now.
- Efforts are underway, including involvement from Cisco, Apple, Microsoft, and Google, to support the technology more broadly.
Core Components of WebRTC APIs:
- MediaStream: Handles media input like video and audio from the device’s webcam and microphone.
- RTC Data Channel: Facilitates the sharing of data between peers, ideal for multiplayer games and collaborative applications.
- RTC Peer Connection: Manages the establishment and maintenance of connections, handling complexities such as negotiating connections and echo cancellation.
Establishing Peer-to-Peer Connections:
- Requires a signaling server, often using protocols like WebSockets or XMPP to enable initial connections and manage issues like firewalls.
- Use of STUN and TURN servers to assist with establishing connections in restrictive network environments.
Getting Started with WebRTC:
- Basic programming skills in HTML, CSS, and JavaScript are needed, along with a webcam and microphone for testing.
- Resources like OpenTalk and prebuilt frameworks such as SimpleWebRTC simplify the development process, allowing developers to create custom applications more easily.

Conclusions:
- WebRTC is poised to revolutionize real-time web communication, with the potential for significant growth in various industries, including healthcare and finance.
- Lisa encourages developers to explore WebRTC’s capabilities, share experiences, and leverage community resources for support in building applications.
- By fostering innovation and experimentation, WebRTC can dramatically evolve how communication is facilitated on the web.

00:00:14.639 Hello, hello. I am Lisa Larson-Kelley, also known as @LisaMarieNYC on Twitter and LearnFromLisa on my website and blog. I have been working with real-time communication and video for about ten years now. I'm really excited to be here today to talk to you about real-time communication for everyone, as that has been somewhat of a barrier in the past.

00:00:38.160 I want to warn you that I don't have quite as many effects as Aaron did, but I do have a few. I primarily do consulting and training, and I’ve had my share of startup ideas over the past ten years. Most of them have failed for various reasons. One particular failure was due to licensing issues; the server we used for real-time communication required costly services.

00:01:10.080 So, these things often don’t work, which is why I’m so excited that WebRTC is open-source, making it accessible for everyone. You don't have to rely on proprietary software to do amazing things. My goal today is to get you interested and excited about WebRTC. How many of you have heard of it? Good. And how many have actually tried to do anything with it? Yes, a few of you.

00:01:41.280 You might have started and realized, 'Oh, I need a server,' which created a big brick wall, right? So, what I want to do is familiarize you with what WebRTC is and what it can do. That way, you can explain it to your clients or your bosses, and then dive even deeper if you wish.

00:02:18.560 To start, WebRTC is awesome! Essentially, it is a JavaScript API that lets you share video, voice, and data peer-to-peer without any plugins directly in the browser. You might think, 'Oh, wow! I can make Skype!' Yes, you can make something akin to Skype in the browser, but I want you to think bigger.

00:02:43.200 Consider how Amazon created a button for Kindle Fire. When you press the button, a customer service representative appears on screen in video format. They can't take over the device, but they can point and draw on the screen to guide you to the necessary menus. This technology relies on WebRTC and can be utilized in many exciting ways.

00:03:35.200 WebRTC isn't limited to browser-to-browser communication. For example, Google Chromecast employs WebRTC technologies to communicate between your phone and your TV. Obviously, you can build Skype-type applications, but you can integrate them directly into your applications or websites.

00:04:46.960 Let me show you a simple, totally free custom chat room. I have it running in Chrome on my Mac. I’m going to pull it up now. You could visit this room right now, but let’s be kind to the Wi-Fi. I've dragged it over, and there you can see me.

00:05:38.240 It's running in Chrome, and I also have it on a Nexus 7 tablet connected to Wi-Fi. As you can see, it just works. This is a completely free service, and anyone can use it to create their room. Many companies are emerging that provide similar free services.

00:06:45.640 This is just one example of what you can do. It’s clear that this is not a myth, as people are building real applications on WebRTC right now. Companies are starting, and a lot of innovation is happening as this technology becomes more widespread.

00:07:16.160 WebRTC allows you to integrate communication features into various aspects of technology, and it's poised to be included in devices like refrigerators, amongst others. However, I should mention that as of now, it doesn't work in Internet Explorer or Safari.

00:07:56.240 But there is momentum building. When the internet wants something, it usually happens. Right now, we do have browser support in Firefox, Chrome, and Opera. Apple has joined the working group for the spec, but they haven’t announced much.

00:08:20.560 Microsoft is currently not supporting WebRTC, but they are involved in another group working on a shim that will help it function properly. Recently, a company named Temesis created a plugin for Internet Explorer that adds WebRTC support. To stay updated on all changes, you can use a resource like iswebrtcreadyyet.com.

00:09:32.960 The official working group for the specification includes Cisco, Apple, Microsoft, and Google, as telecommunications companies push for it to work seamlessly with legacy systems. The beauty of WebRTC is that you can make phone calls from your browser using it, but for web developers, the structured designs can be challenging.

00:11:32.440 There is a community group led by a company called Hookflash that is working to design a better way to do things, and they’re also developing an object-oriented shim. I think you'll find it easier to work with compared to the traditional methods. As an example, let’s look at resources like webrtchacks.com, which can guide you through the industry’s evolution.

00:12:10.560 WebRTC APIs consist of three main components: MediaStream, RTC Data Channel, and RTC Peer Connection. MediaStream is responsible for handling the webcam and microphone. If you're familiar with capturing media, that aspect will likely resonate with you. The RTC Data Channel allows peers to share arbitrary data. Meanwhile, the RTC Peer Connection is the engine that connects everything together.

00:13:24.320 Let’s quickly look at each. The MediaStream API allows you to get a user’s media input, which can then be played locally in a video or audio tag, or sent to connected peers through an RTC Peer Connection. For an example, I’ll need a volunteer from the audience.

00:14:55.680 Here’s a cool little demo where it reads facial data. It’s quite interesting to combine different APIs for fun and functionality. Now let’s discuss the RTC Data Channel, which allows for fast and encrypted data sharing, with built-in congestion control. It works excellently for multiplayer game applications.

00:15:34.080 In the past, Google executed an experiment that emphasized peer-to-peer capabilities using the RTC Data Channel. The goal was to form sessions whereby users could share actions, for instance, playing a game together or sharing files. The beauty of WebRTC lies in its potential for collaboration without central server requirements.

00:16:41.920 Lastly, there’s the RTC Peer Connection. This major API abstracts much of the complexity involved in making connections. Behind the scenes, it handles tasks such as connecting to servers, multiplexing video codecs, and ensuring echo cancellation.

00:17:31.360 Here’s a brief overview of how peer-to-peer connections operate: first, you need to use the MediaStream API to access local media, such as the webcam or microphone. Next, a signaling channel is established to negotiate the peer connection. Once communication begins and both parties are connected, essential session descriptions (SDP), specifying connection information, are exchanged.

00:18:37.440 To establish successful connections, some key elements must be involved. While it's possible to connect to landline phones, SIP clients, laptops, and mobile phones, significant elements are required to facilitate seamless interaction.

00:19:05.680 In an ideal scenario, you would directly connect two web browsers without the need for any intermediary. However, in practice, a signaling server is often needed to facilitate initial connections, especially in complicated network configurations.

00:19:47.680 For signaling flexibility, any method can be employed, including WebSockets or even older protocols such as XMPP. Creative solutions and numerous options exist for your signaling needs. One can even find open-source signaling servers that utilize Ruby Event Machine.

00:20:36.880 However, barriers do exist. Occasionally, firewalls can block connections and affect quality. Thus, STUN, TURN, and ICE servers can help by creating pathways and facilitating peer-to-peer communications.

00:21:45.040 To illustrate this, consider a scenario where one peer cannot connect to another due to firewall issues. A STUN server acts analogously to ‘whatsmyip.com,’ helping peers to discover their external IPs.

00:22:10.720 If STUN fails due to a high-security network, a TURN server steps in to relay data, ensuring connection works as planned. Ultimately, ICE will pursue multiple connection possibilities to establish a successful communication line.

00:23:20.080 Setting up a robust WebRTC project can seem daunting, especially if you're transitioning from the Flash world. However, the library has expanded dramatically, with resources and community support available.

00:24:19.680 To dive into WebRTC, you'll need core programming skills in HTML, CSS, and JavaScript, as well as a functioning webcam and microphone for testing purposes. Most importantly, I highly recommend using the latest version of Chrome for its debugging and diagnostic tools.

00:25:43.200 You don't have to start from scratch. Many ready-to-use services allow you to utilize WebRTC effortlessly. OpenTalk and VideoRTC IO are excellent choices for hosting solutions, while Zirs specializes in streaming and hosting.

00:26:44.320 Without diving into server specifics, you can leverage prebuilt frameworks like SimpleWebRTC or peerRTC to expedite your project set-up. Frameworks enable you to structure multi-user chat functionality with modules and plug-in options.

00:27:58.280 Ultimately, all frameworks offer open-source options you can customize, leading to successful real-time applications. By experimenting and engaging in community forums, you might find helpful colleagues or mentors.

00:29:40.960 As we wrap up, I invite you to explore my resource list on my site, which includes simple API examples and tutorials. There’s even a multi-person chat room template available for immediate testing. Also, I recommend checking out MuasCon.com's experiments to gauge innovative uses of WebRTC.

00:30:56.640 Excitingly, industry studies predict massive growth, estimating 6.2 billion WebRTC-enabled endpoints by 2018 in sectors like healthcare, finance, and insurance. In closing, it is important that we shine a light on WebRTC and inspire more developers to explore its capabilities.

00:32:17.440 I hope this session motivates you to engage with WebRTC and think about all the possibilities it can open up. I encourage you to share any experiments or challenges you face. Please reach out to me on Twitter, via my blog, or through my Pluralsight course for ongoing learning and support.

00:33:13.760 Thank you for your attention! Now, I have a couple of minutes for questions.