 Lisa Larson Kelly, also Lisa Marie NYC on Twitter and learn from Lisa, it's my website blog. And I have been working with real-time communication and video for, oh, 10 years or so. And I'm really excited to be here today to talk to you guys about real-time communication for everyone because that's sort of been a barrier in the past. And I will warn you, I don't have quite as many effects as Erin did, but I do have a few. So. So, you know, I mainly do consulting and training. And I've had my share of startup ideas over the course of the past 10 years. And most of them have failed big time because, for various reasons, this one particular was licensing reasons. The server to get the real-time communication and webcam stuff working was using the F word, which we won't talk about. And it just, it costs too much to run it. So these things don't work. So that's why I'm so excited that WebRTC is open source. It's for everybody. You don't have to rely on proprietary software to do amazing things. So that's really my goal today, is to get you interested and excited about WebRTC and how many of you have heard of it? Good, all right. And how many have actually tried to do anything with it? Yeah, like three or four, right? And you probably got started and saw, oh, what is this, any server? What, what? Big brick wall, right? So that's really what I wanna do, is get all of you familiar with WebRTC. What is it? What can it do? And so you can go back to your client, your boss, or just, you know, to explain it and then dive in deeper to it if you want to. So starting at the beginning, WebRTC is awesome, but basically what it is, is a JavaScript API that lets you share video, voice, and data peer to peer without any plugins in the browser. So you might think, oh wow, I can make Skype, right? I can do Skype in the browser, Skype in the next Skype killer. Please, it's definitely more than that. I want you to think bigger, think Amazon made a button, right? If anyone is familiar with that, it's a little button on the Kindle fire. You press the button and a customer service rep pops up in video right on the screen. And they can't take over the device, but they can draw on your screen and point you to the menus that you need, things like that. And that's also on the new phone as well. So it uses WebRTC technologies in it, along with a bunch of other stuff. Think machine to machine communication also. This isn't just browser to browser. Google Chromecast uses WebRTC technologies in communicating between the phone and your TV. So there's all sorts of things like that you can do. And of course, yes, you can also build Skype type applications, but you can bake them right into your apps, right into the website. So I'm gonna show you this totally free custom chat room thing. Jump out of here, Chrome. And I've got it running here in Chrome on my Mac. And it is up here in slash Lisa. And you could go there right now, but it'd be nice to the Wi-Fi. So I'm gonna drag that over. You can see me there. There's the loveliest aspect ratios are huge. There we go. Make it fit to the page. And look, somebody's there. So I have it running in Chrome, and then also over here on a Nexus 7 as well, and that's on the Wi-Fi. And it just works, right? So it's, yeah, it's very cool. And it's, this particular one is, it's a totally free service. Anybody can use it. You can grab your own room, totally free. I'm sure they have, you know, upsells and so on to, you know, for your company or whatever. And there's, a ton of these companies are popping up all over the place. Wow. All right, I'm jumping out of here now. Okay. Thanks for playing. All right, cool. So, so that's just one example of what you can do. So it's clear that this is really happening. There isn't just this mythical thing that everybody, oh, there's WebRTC, someday this spec's gonna be ready. People are building things on it right now, and companies are building, you know, startups and all sorts of things are happening. So, it is going to be everywhere. Cause it really allows you to, like I said, just bake it right into other things that you're building. So it's gonna be in every aspect. It could be, you know, on devices, on, it could be on a refrigerator, like all sorts of things, right? So it's, in ways that we haven't even, probably even thought about yet. And maybe you're thinking about it right now. But, there's always a but. It doesn't work in IE or Safari right now. So, but you know, don't worry, I'll get you there. There is momentum building, as I said. People are doing this. It's going, when the internet wants something, right? It happens, right? We make it happen. So, right now this is the state of things. We have browser support in Firefox, in Chrome, and also in Opera. Apple has joined the working group for the spec, but they haven't really, they didn't make a big deal out of it. They didn't really say much about it when they joined it back in February. So there's, they're moving toward it. Something's, something's gonna happen there. And then there's Microsoft. Microsoft is an interesting case. They are currently not supporting it, but they are very involved in another group, which I'll talk about in a second, that is building a shim. So that it will, it will, you know, it will work. So, there's movement there as well. There's also this company called Temesis that has just recently, I think in the past week or two, created a plugin for IE. So it fully supports WebRTC using their plugin. And to keep up to date with all the changes, because it changes a lot, is WebRTCReady.com is a great resource to find out where things are working and where there's not, where they're not today. So, I mentioned Microsoft. There's the official working group that's working on the spec, and we've got, you know, Cisco and Apple and Microsoft, or well, Microsoft's in there, but also Google is working really hard on that official spec. It's really been driven by the telecommunications people. They want this stuff to work with legacy systems. So, I mean, that's the beauty about WebRTC is you can actually make a phone call to a landline from your browser using WebRTC. Just you need to interface with all those old systems, right? So, they've kind of structured the spec to be able to do that, which is great, but for web developers, it really sucks. It's not as efficient as it could be, and so there has been a group that has been driven by a company called Hook Flash, and they see a better way of doing things, but they're just not getting as far as they want in the working group itself. So, they have created a community group, and they're working on a shim. This is the thing that Microsoft and Google are also working on, and it's, the beauty of that is that it is object oriented, which is nice, and you'll see why. This is a kind of example of what we're dealing with in the spec right now. This WebRTC hacks, if you're .com, is a great resource for keeping up with what's happening, and they've got tutorials and the great resource, but they have this utility they created, which doesn't look great on this aspect ratio. It's hard to see, but the SDP is sort of the point of contention here, because it's a session description protocol, and it's a big XML document, basically, and it has things like v equals zero, a equals, like not helpful stuff, not very easy to deal with, but this is the legacy stuff. So, they've created this little utility where you can mouse over any of these things, and it tells you what it is. So, God forbid you ever have to dive into this. You have this as a resource. So, that's kind of what we're dealing with right now. Cool, so as I said, it's object-oriented, so it's gonna be much, much easier for us to develop using this shim, than it would to be diving into all that other stuff. All right, enough politics. Let's look at what the APIs are and what they do. So, WebRTC consists of three APIs, MediaStream, RTC Data Channel, and RTC Peer Connection. And MediaStream handles the webcam and mic. You may be familiar with that already, playing around with that. RTC Data Channel allows peers to connect and share arbitrary data. And then RTC Peer Connection is really that engine of WebRTC, gets the connections made, the peer connections, handles all of that stuff, bandwidth management, all sorts of things inside there. So, let's look at each one really quickly. The MediaStream is basically just get user media. And once you have a MediaStream, you can play it locally in an object, like a video or audio tag, right? Or you can send it out to connected peers. You send that out through an RTC Peer Connection. All right, so here is an example of that. I'm just gonna put together one quick example of each here. All right, I need a volunteer for this one. Who's gonna come up? Volunteer? Come on. Because I can't demo this ad, do it at the same time. Come right in front of my webcam here. All right, I don't know if anyone has seen this before, but it's pretty cool. Wait, loading video images, oh wait. And this is something when you're designing for WebRTC, see that little tiny thing way up there, deny and allow, you're probably gonna wanna gray out the whole screen and big arrows pointing to it, because it's so easy to miss that. You have to allow access to the camera before anything happens. And in Firefox, it's in a different place. All right, so there you are. So I'm gonna start this. So it's reading your face data now. And let's see, Kim Kardashian, nice, right? So yes, just say something, open your mouth. Hello, go, go, go. That was pretty awesome. So you can really, it can combine this stuff with other APIs and do some really fun things. Here we go, Bieber, nice. All right, cool, all right, thanks. Yay, weird stuff happens. All right, cool. So yeah, you can have a lot of fun with this stuff. So that's that one. And then we have, not quite as fun, but just as powerful, the RTC data channel. As I said, it's fast and efficient sharing of data. It's encrypted. It has all sorts of things like congestion control built into it. And it's good for multiplayer games, text chat, of course, sharing files. There's actually an app that you can, it just has a big box and you can drag a file from your file system right into your browser onto the box and you share it peer to peer with somebody else. It gives you a link and you can share that. So there's really cool stuff like that you can do with it. It's basically the same API as WebSockets. So it's pretty easy to get started if you've worked with WebSockets at all. It's the main difference is that it is peer to peer, so it can be more efficient than WebSockets. An example for that one. So this was a Chrome experiment that Google did a while back using the data channel. And it's basically a multiplayer game. So you can play a friend, play a bear. If you have someone that you wanna play with, which I don't necessarily wanna do right now, you can, it'll give you a link. You can share that link with a friend and then you can both be playing the game together. And I'll just play a bear right now, but it's pretty cool. Put your video up there and everything. Somebody, there's always somebody who wants to do this. Nice. So you can play this game together and yeah. Oh, all right. So you get the picture. I'm terrible. Oh, see, how many times I practice it? I'm not, just can't get it. All right, so there's all sorts of things like that you can do rather than just build a Skype killer. So the third API in WebRTC is RTC peer connection. And like I said, this is the engine that drives everything and like any vehicle, there's a lot going on under the hood here. All sorts of things that, thank goodness, we don't have to deal with that are abstracted for us like connecting to servers, multiplexing, video codecs, echo cancellation is in there. All sorts of things that are abstracted in the API. So just to give you sort of API level view of the flow of a peer connection. The first thing that you would do is use the MediaStream API to get the local media. Grab the webcam and mic. Then you set up a signaling channel. This is the first time I'm mentioning signaling channel. Signaling channel will help you negotiate the, or make it possible to negotiate a peer connection. So it's the thing that told me that there was somebody waiting for me to join the game. That's the signaling channel. So once that's initiated and we're both in the same place, then we can set up that peer connection, right? And then we attach the media to the connection and then we exchange those session descriptions, that SDP thing, the XML that I showed you. We exchange that and that basically will tell, we tell each other what type of media we can accept, if we have bandwidth restrictions, what browser we're on, all that information that we need and also the path, any other paths that we need to finalize that connection. And then we're connected. So there are some elements, I mentioned the signaling channel. There are some elements also that need to come into play to make it all possible. The, oops, there is actually, I mentioned that there was ability to connect to landline phones. You can also connect to SIP clients, jingle clients, laptops, you know, mobile phones, all sorts of things that are possible in the environment for WebRTC. So looking at the architecture, in a perfect world, you would have one browser connected directly to another browser with no plugins or anything in between. It can work this way if you're on the same land, basically. But in the real world, we do need a little bit of help to get through that. So to get our two peers connected directly, we need a server that can introduce them and that would be a signaling server. This could be hosted on the same server where your web pages are being hosted or you could use a service or you could host it somewhere else. So that will help you perform a handshake. The server will introduce those two peers and then get out of the way. So they're connected. And that's great, except when it doesn't work, which I'll get to in a minute. So for signaling, you can use anything for signaling. It is not specified in the WebRTC spec. So you could do anything from, you know, send the connection information through chat, email, smoke signals, it doesn't matter. A lot of people will use WebSockets or you can use XMPP, you can use Google's Channel API, all sorts of different options for signaling for that initial signaling. There's even a Ruby signaling server that uses the Ruby event machine. It's open source and you could implement that if you wanted to. So why do we need servers? I said that sometimes it doesn't work. It was supposed to be peer to peer. But, you know, a lot of times we'll have firewalls, lockdown internal networks, quality problems, all sorts of things that are gonna get in the way, right? So we actually do need servers. So this is where the fun acronyms of WebRTC come into play. We got stun, turn and ice. So let's see how these strange things will work together to get us all connected. So just to simplify things, we have Jane and John, right? Jane's behind a firewall. She has no idea what her external IP address is, right? So she just knows her internal IP. So she sends that to John and of course John can't connect via that because it's like sending a letter without an address or, you know, without a city and state. So he can't connect. So what we need is a stun server. And it's basically like what'smyip.com if you ever use that. It just tells you what your external IP address is and you can grab that, you can send it to the peer and he would do the same thing and then they're connected. So the stun server will do that. It will make that introduction and then get out of the way and this is called hole punching. But it doesn't always get through the roadblocks. You know, sometimes there's high security networks, there's mobile carriers that get in the way. Sometimes stun just isn't enough. And in those cases, we will turn to a turn server and that is traversal using relays over NAT. So as its name implies, it is a relay server. Again, not truly peer-to-peer, but it will get around those roadblocks and get people connected. So it will, you know, just relay the data through. But WebRTC wasn't really built to handle this kind of handshaking where you're trying a server, it fails and then you gotta try again. So that's why we have this thing called ICE Interactive Connectivity Establishment. And this is just a way to adapt, to go through, iterate through an array of connection options until it finds one that connects and then connect. Otherwise we would have to, if we didn't have ICE built into the API, we would have to start a whole new session to try to connect in a different way. So it will go through, iterate through and find one and connect. So that's happening kind of, that's everything on the back end, those are the servers. So how do you get started with all of this stuff? I did have a lot of trouble in the beginning, you know, coming from the whole Flash world and I was doing the same kinds of things, but I saw that all this WebRTC thing, I really wanna figure this out and this is really cool that I could do this and not have to pay licensing fees. So I dove into it and it was hard. I mean it was just, everything out there was written by these telecommunications engineers, you know, so I really had to break it down and there's a lot more out there now than there was, which is great. So all you really need is your core programming skills, right, HTML, CSS, JavaScript, Ruby. You just need an HTML editor, a webcam and microphone of course to test everything. And the latest build of Chrome or Firefox and I highly recommend using Chrome because they have something called WebRTC internals, it's a tool that gives you all sorts of diagnostics while you're troubleshooting and building WebRTC apps, it can really come in handy. So Chrome. And then you don't have to reinvent the wheel, you could start out with one of the services that are out there. If you just want to use WebRTC, of course there are some ready to use services like the one that I just showed you and many others popping up. And if you want to build something, if you want to build something, get like a white label thing with modules that you can put together, there are plenty of those available as well and also all the hosting. So you don't have to worry about stone or turn, you could sign up for a service and they just give you the URLs and you put them in your array and you don't have to deal with any of that stuff. OpenTalk is one, TOK. They've got a whole user community and everything around that. A lot of enterprise customers, video, RTCIO is similar. And Xearsys is also a hosting company. They're also in Fluxus, if you've ever worked with streaming with Fluxus in the past, this is their WebRTC, they've got a whole new WebRTC arm for hosting. So they're great to work with. And if you'd rather not deal with all that and you really want to dive in yourself, you can do that too. There are open source, stun and turn servers that you can host yourself, you can use those. There are node modules for building those things and all sorts of signaling solutions that you can configure however you need to. Some pre-built frameworks that you'll want to look at. I highly recommend starting with framework. Sure, you know plenty of reasons why to do that. I recommend Simple WebRTC is a great one. But again, there's a lot. And then if you do need to work with plain telephone networks, if you got to integrate with those, there are frameworks to start off with there too. So I like Simple WebRTC. Simple WebRTC will let you build a multi-person chat room with all the features of, it's a modular thing so you can put in features. For example, they have a module for hangouts has where the person who's speaking, the picture gets bigger, that kind of thing. That's just a plugin and a module that you can include. And this code right here will build a multi-person chat room in Simple WebRTC. Very cool. And of course it's all open source and you can pick it apart and add to it and customize it as much as you want. This is what it looks like, kind of bare bones, not styled or anything. And this was actually a test that I did. I was building it for my, this is an example in my Pluralsight course and I was putting it together and testing it and I needed someone to test it with. So in the center there is my husband who was in the other room at the time. And then I was like, oh, I need somebody else. I texted my sister, she lives in Indiana and I was like, I'll be around. And she said, oh yeah, my husband and, Mark and I are at Buffalo Wild Wings right now. We both have our laptops with us and we have cocktails. What are you up to? Sister Strange, but so she, they both logged in under the Wi-Fi at Buffalo Wild Wings and popped up on the screen and it worked great. I was really surprised and happily surprised that that worked. So it's easy to do. So all right, so we got to look at the politics behind the spec, what's happening there, where it works right now, where it doesn't, kind of a view of where it will be working soon. Got an overview of the API and what it can do, the server pieces and all of that. So now what? Where do you go from here if you really want to dive in? I put together a list of resources on my site and this URL here that includes things like the simplest API examples. Sam Dutton had put together some great ones. If you really want to look at the API, it's all laid out for you. And these really simple examples. And of course, there's tutorials. HTML5 Rocks has some good ones. I've got links to all of those. And there's also appRTCappspot.com. That is, if you go to that URL, it just pops up a multi-person chat room instantly and gives you a URL that you can share with somebody, randomly generated. And they have open source code for that that you can grab. So I point to that. And if you want to see some kind of cutting edge experimental stuff, I definitely recommend checking out Muaz Khan's site, WebRTCexperiment.com. He's doing some amazing stuff, including recording streams and a lot of different experiments. So I definitely check that out. And there are actually two books that have been published on this already. And WebRTCbook.com, that one is in its third edition. I guess it's great what you can do with electronic publishing now. And then I think O'Reilly just released one as well. So, and then of course, I also have a Pluralsight course on WebRTC and of the fundamentals of WebRTC. But if you bookmark that link, I'll always keep that updated with the latest stuff. I'll also have this presentation up there too. So just to give you an idea of the potential of where this is going, there was a study that predicts 6.2 billion WebRTC enabled endpoints by 2018. And that is everything from mobile phones, tablets, devices, your microwave, all sorts of things that will be able to communicate using WebRTC. So it's really an exciting time. And segments like financial services, healthcare insurance are really interested in this for customer service purposes mostly. So, somebody who comes up with a great idea to integrate with their systems is gonna be doing well. So in a recent industry survey, the biggest perceived barrier to adopting and getting started with WebRTC was a lack of awareness in the community. So I hope we are handling that today at least. And the second and third you see are support by Microsoft and Apple. People are really concerned about that. And this study was actually done back in November. So I think that probably would shift at least on the Microsoft end down a little bit. I think it can be pretty confident that that's happening soon. So this is actually me doing Spartan Race a couple of weeks ago. And so I feel like, this is how I feel when I work with WebRTC. Like I got over, you get over the obstacles and I can't guarantee that you'll feel this way when you build your first app, but you might. So I hope you feel a little bit less intimidated by WebRTC, you kind of got the lay of the land and more fired up about what you might be able to do with it. And I would love to see what you do with it. Please share with me any of your experiments or like I'm available for questions. I've probably already ran up against some of the obstacles that you probably will. So feel free to reach out to me anytime on Twitter or my blog. And also, of course, my Pluralsight course is available and I think I can say that later on, if you stick around, Pluralsight is giving away full year of Pluralsight, which is pretty awesome. So check that out. But yeah, please feel free to get in touch and I don't know if I have time for questions. I got two minutes for questions, so that's it. Thank you.