Real-Time Web with Node.js Real-Time Web with Node.js

Creating a WebRTC Application

Kyle Simpson
You Don't Know JS
Check out a free preview of the full Real-Time Web with Node.js course:
The "Creating a WebRTC Application" Lesson is part of the full, Real-Time Web with Node.js course featured in this preview video. Here's what you'd learn in this lesson:

The final exercise is a WebRTC application. Kyle walks through setting up the initial handshake facilitated by Socket.io on the server. Then Kyle scripts each client to communicate to each other through a RTCPeerConnection.

Get Unlimited Access Now

Transcript from the "Creating a WebRTC Application" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: In our last few minutes together, I'm going to walk you through exercise 11. So, you can close down 10.html. I already provided for you 11.html and 11.server. Both of them need to have a couple of little additions to them. Let's do the server first. The first thing the server needs to have added to it, is that we need to listen.

[00:00:33] Sorry. We need to listen for the messages that are going to come in from, so let's see what that message is gonna be called. I'm gonna do .emit where's that emit message? Okay, it's gonna be called signal. So I'm gonna be receiving a signal message from a client and I need to broadcast that back to the other guy.

[00:00:52] All right. So all I really need to do is say socket.on signal. I'm going to receive a message from the client and I need to broadcast it to the other connected client. That's it. I don't need to do anything about knowing what the kind of message is or whatever.

[00:01:21] I'm just a dumb relay client. I'm just sending the messages back and forth. Let me check one thing just to make sure that broadcast is gonna be the correct way to do it.
>> Kyle Simpson: Yep, that's it. Socket.broadcast.emit signal. Okay. I've already written the other code that handles establishing a direct connection.

[00:01:51] So that they're in the same channel together there's some extra complexity there you don't need to worry about. But this is all that we really need to do is listen for the signal event and broadcast that message back to the other guy. That's really all we need to do on the server side.

[00:02:04] On the client side, the only thing that I want you, that I was gonna have you do by yourself, but I'll just kind of walk you through. Is we've got all these things set up that, these are all just kind of general utilities for sending information like sending the offer and sending the answer.

[00:02:20] This is the code that a client or a call or a receiver will use but really all we need to implement right down here is the flow control and we're gonna a sequence, so it's easy to express but we need to implement the flow control for the caller and the flow control for the receiver.

[00:02:39] Okay so let me open up 11.HTML which I already have implemented in the solutions folder.
>> Kyle Simpson: All right, so the first step that we need to do Is we need to obtain the media stream. This is a program where we're gonna exchange webcams between two browsers. We need to obtain the media stream, so I'm going to say a ASQ getMediaStream.

[00:03:17] Then once we've gotten the media stream the next step, we need to send an offer.
>> Kyle Simpson: Is it .then or, .seq [COUGH]. So we're going to send the offer off to and that's going to signal it down to the Web socket server, and then the next step is to receive the remote SDP as the answer back.

[00:03:49] So that's getting our answer back. And finally, we will call pipe(done) to indicate that we're done with that particular stream. So that's what the caller does. He gets the media stream. He then sends an offer and he gets a remote stp, and then he's done. Now the receiver has the same steps, but he's gonna do things in a slightly different order.

[00:04:12] So the receiver needs to say ASQ dot.
>> Kyle Simpson: And we're gonna do two things at once. The gate allows us to do two things in parallel. We need to receive the RemoteSDP and we need to get the media stream. So ASQ().gate() allows us to do two or more things at once.

[00:04:35] So let's get the media stream from the user.
>> Kyle Simpson: And let's also get the remote STP in which we're waiting on from the caller.
>> Kyle Simpson: And then once we have both a media stream and an STP then we are going to send an answer. And finally we will be done.

[00:05:07] Okay, so they both do basically the same task but they do them in slightly different order. And this is all fundamentally an asynchronous set of things. So without an asynchronous flow control library to help make this look somewhat reasonable that stuff can get kind of complicated. But what I wanna illustrate to you again is the value of having a flow control library that allows you to express it in a nice clean way.

[00:05:33]
>> Kyle Simpson: So you getMediaStream, sendOffer, getRemoteSDP back and then we're done. Get a media stream, get a remote STP, send the answer, and then we're done. All right, so that is our HTML and our server. Let's see how it works. I'm gonna start up 11.server.js. I'm gonna call local host.

[00:06:00] For an 8006/11 and I'm going to call local host for 8006/11. Now both of them are prompted me to ask me for my webcam. That's because we're attempting to establish a peer to peer connection. So I'm gonna say allow on that side. And I'm going to come over here and say allow on this side.

[00:06:25] And now they are establishing a connection between each other. Hopefully my live demo isn't going to fail on us. Should be showing us our camera. Let me refresh, don't you love live demos.
>> Kyle Simpson: Come on.
>> Kyle Simpson: I might have mistyped something. So let me just make sure I'm not missing something in terms of typing.

[00:07:01] I'll stop it here and instantiate it from the known good files.
>> Kyle Simpson: Hopefully this demo doesn't break.
>> Kyle Simpson: Okay.
>> Kyle Simpson: Great, forgotten how to tell it's, okay. Let's skip Chrome for a minute, let's see if I can make it work in Firefox.
>> Kyle Simpson: Come on how can both browsers fail.

[00:08:10]
>> Speaker 2: You might have had the other one open in Firefox, trying to connect to it.
>> Kyle Simpson: It could be.
>> Speaker 2: [INAUDIBLE]
>> Kyle Simpson: The beauties of live demos. All right, start the server one more time. We'll give it one more chance.
>> Kyle Simpson: It's not prompting for the media stream.

[00:08:53]
>> Kyle Simpson: There we go. So now I'm transmitting these back and forth now obviously you can't really see how the transmission going back and forth is different but if this was between you and I you could see the difference.