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.
