Q&A: WebRTC

[00:00:00]
>> Yeah I can do it,
>> It was [CROSSTALK] the end.
>> That's right.
>> So what what else you got obviously?
>> Well, I could do something with simple-peer, I've to install it really quick.
>> Yeah I think we should see some peer to peer, it's okay.

[00:00:16]
>> Let's go ahead and do that. So I'm gonna use this module by Feros called simple-peer which is WebRTC peer to peer streams in the browser. You do need a bunch of other pieces though, we're gonna need a signalhub, and I forgot to ask that. Yeah, it's been a while since I've done one of these demos off the top of my head, so I think I'm gonna have to look at the, Some claps in the chat, very good.

[00:00:58]
[LAUGH] Okay, so with simple-peer. No, this is not the one that I actually use. I use a module that's on top of simple-peer that hooks into signal hub. I think it's called WebRTC stream. That's the one. Yeah, webrtc-stream. Swarm, webrtc-swarm, that's the one that we can use. Yeah, this is the one that you hook up to signal hubs.

[00:01:28]
You don't have to write your own initializer. Okay, so. It's more or less like the hello world for webrtc-swarm so nothing too sophisticated you can just read the example of the readme of this package and do the same yourself. But pretty much, if you set up webrtc-swarm, you can talk to a signal hub, which is a special kind of server.

[00:02:00]
I hope that mafintosh is still running a signal hub. Otherwise if they're running locally, it's sorry. hub.mafintosh.com, yes, great. It's still running fantastic. So, what we can do now is build their own little program. So, call it swarm.js. This is gonna be browser code that we're gonna run in the browser, because it's easiest way to get WebRTC.

[00:02:30]
That's not true actually, electrons bond is kind of easy and people do that, all right, So we've got to require WebRTC swarm, Requires signal hub. Signal hub is the only piece of infrastructure that sort of like a server because the peers have sort of a lobby. Where they're gonna exchange router hole punching information to go through nets, network address table, anyways.

[00:03:08]
>> That's like a requisite of WebRTC itself.
>> Yeah, yeah, it's something that's required, it's a server, but whatever. It's in the browser. That's pretty cool.
>> So it's just used in initialization.
>> Yeah, and it's only during the initial phases. So it's not like the server is gonna see any of the content and it's not like the server is gonna be mediating the connections.

[00:03:29]
>> Just gonna intiate connections.
>> Yeah, initiating the connection only.
>> Okay, so we need to come up with a name for our signalhub. I'll call it streams-day, I don't know. [LAUGH] Then we need to provide a list of signalhub. So you could actually provide more than one signalhub and this package is smart enough to kind of round robin them or I don't know what it does exactly internally.

[00:03:53]
But I'm gonna use the one that mafintosh runs who wrote signal hub. He works on the debt project. I use a lot of this modules. You've seen a lot of his modules today. In fact, like duplexerfy for example, Anyways, so the next thing we need to do is set up our swarm.

[00:04:15]
So we do that with the hub and then we also need to if we're not in the browser provider WebRTC implementation. But we are gonna be in the browser or electron or something, I'm not quite sure yet. So now we can listen for peer events in the peer that we get back as a duplex stream.

[00:04:39]
So we can do everything that we've already learned in the browser over WebRTC. In with this peer object. The thing about peer to peer though, is that you've actually got to have symmetric protocols and symmetric connections because which side is the server and which side is the client.

[00:05:00]
Which side is gonna initiate the data, and it's a little bit hard to complicated to think through. But, if you, have done this mental, exercise, then, you can build something that works, in this kinda architecture. So, what we can do now, that we've got, this, duplex stream, when it would do something fun, it could make an echo server, it would just be that, right?

[00:05:25]
We could also just, lift. Yeah, I'm just I'm feeling kind of lazy right now. So I'm just gonna lift at the loud example. So we're just gonna make a echo server that's loud, loud echo server require through, And we'll pipe our incoming connection to our to upper and then pipe it back out again.

[00:05:52]
All right, so, now we need a way of writing data into the other side of the connection and also reading data so that we can see what were being sent. Well, I guess we don't have to do that we can only, yeah. So, except all of these peers now are gonna be writing to upper in a loop because it's a symmetric connection.

[00:06:16]
So maybe that's not the best idea, what else could we do? I guess we can use this terrible hack to just see what people are sending us. Yeah, this will be fine. And then we need some sort of text box. I'm just gonna hack one of those out really fast.

[00:06:38]
This time I'm gonna Ctrl+Shift+R so that Chrome doesn't give me that horrible problem. So, I'll just create a document, create element, div and I'm gonna pin that to the dom by doing this. And then I'm gonna, have an update function which I call immediately cuz I always forget to do that, and then it's gonna look like that.

[00:07:05]
And then I'm gonna html.updates with the root element and DomString and a template with a div wrapper. Can I have a form with an on submit? Given, had a chance to play with template strings, they're really great. It's the only part of ES6 that I use. And I'll just use my favorite input type="test", name="msg" tag that I always use for everything.

[00:07:38]
Sure, and I'll even do the pre thing that we did in the other demo, why not? So have an output array. That'll work, I think. So now if we get data, we need to push it to output array in order to log it and then call update. And our onsubmit function now, Will send data to all of the peers that are connected.

[00:08:13]
So first of all, we're gonna need to keep track of all of our peers. So I'm gonna do that with an object. And if we get a new peer, gonna do. So, let me think here.
>> Peers id is the second.
>> Yeah, peer.id, so I can do peers, peer.id.

[00:08:35]
I'll go with this the second argument?
>> Yeah.
>> Okay, yeah, that works better. Okay = peer, and then there's a disconnect event or I could use the end of stream function. Why don't use that cuz I covered it, sure. So on end equals require and of stream cuz I don't like to think about all of the different ways that streams can end.

[00:08:56]
So, that stream ends then delete it from the list. This hacky function, why don't I do things properly? This is a class in everything. So to.function buf, enc, next. All right there I did it proper, whatever. Okay, and we need to require that. So am I even using three two anymore?

[00:09:23]
I don't think so. All right, so we require to two, we have our HTML garbage. And now finally we need to ev.prevent default in our on submit handler. We need to this dot elements that messaged value gets pushed to each one of the peers. So we need to loop over object.keys peers for each.

[00:09:45]
And that's gonna give us the ID is the key, so we need to do peers ID these are duplex stream so we can write to them, id write. That plus a new line, why not? Cuz new ones are nice and, Guess that's it. Yeah, this.reset that's nice. You hit enter, it's nice if like the text goes away.

[00:10:11]
You could also assign it but this is less typing, so this might work who knows? Try it here. Okay, so I'm gonna have, so I'm using budo which does browserify on your files automatically. It's 1 megabyte of JavaScript cuz there's so many dependencies underneath this thing. So if here I've got an incognito window and I've got a normal window so they are gonna talk to each other, hopefully, okay?

[00:10:47]
All right type error message of undefined. Let's see what I messed up. This.elements do you see what it is? I see it. This inside of object keys for each, I'm just gonna save that outside of here. There we go. I do that budo's gonna recompile it for me so I don't have to think about it, Ctrl+ Shift+R, Ctrl+Shift+R.

[00:11:33]
It's talking peer to peer. If all of you run this program, you will also join the same chatroom, even though it's running on your system, I'm gonna leave this running and I'm gonna push the get code. And if you run the program, you should start to show up on this as well.