WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

And I'm gonna hook up my garage doors to it and and open and close it. So my dad did it, and it it worked really easy. The app is called Ewe link, e

w e l I n k, some random Chinese app, which is probably great to pump pipe all of your information through. But,

my dad I was just talking to my dad, and he did it as well. And and there's these

really yeah. You did it. Like, that's why I I wanted to have you. Like, I saw this. Like, this is wicked. Like like, the guy just made this thing and and just did it. And, like, never mind best practices and the best way to approach things and and all this stuff. Like, you literally just made a chat JS, and then they just rolled it out in the browser for free. And that's when things like Slack and whatever just started adding video calling to their apps like it was no big deal because they can lean on on using WebRTC.

cheaply

Scott home and things like this, and we talked about these sonoff

Oh, congratulations.

Mhmm. Interesting. It's electronics. It's not really my my wheelhouse, but I know enough to be dangerous. So,

and then and are you married? Yep. I believe you're married. Married. Three kids.

switches where it's it's it's a really cheap, like, a $5 Wi Fi switch, and you have to code in your own you have to put in your own cord and everything like that. I love it, and I was recently looking for something to based torrent client that allows you to stream

the one I got either does 7 to 32

you can go on Amazon. You can find for for 15, 20, $25.

Yeah. Trying to get a job at Notion, but, apparently, they don't hire interns. Oh, really? get yourself a good web developer course of, you know, it's event driven architecture. Right? Yeah. And it's non blocking IO stuff. If I did this in Python and if all it was was a simple static file server, no way. There Wes there's response times would have been through the workflow, would have been It did a really great job at, but also had really great product market fit. People were fed up with Zoom. Security issues were there. People want something in their browser. Everyone was desperate looking for video calling. And I just launched at the perfect time and She's not there.

I specifically hook it up to to Google Home, and it works great.

like, installing that in your garage But those are really expensive.

You can find these little modules that you can power by USB or you can power it by

Wes, if, maybe somebody that's there's quite a few people listen to this podcast, so maybe somebody will,

volts AC or DC, which is amazing. So so many different situations you can plug this thing in.

and then when they say it, I push the button on my phone, and it turns the light on. And it just blows their mind

Just opening and closing the garage without them knowing, and they'll see freaking out. Like, oh my god. I was like, what's wrong, honey? I'm I'm in vacation. I'm in I'm in the Caribbeans.

And, There's a lot of nefarious things we could do. Wes actually do that with my kids. I tell them to say abracadabra, people making,

That's cool. A lot of integration stuff. I just imagine, college budget people are running this on the cheapest Heroku that I could find. Heroku, for those of you who don't know, is is just a web hosting platform like AWS, but cheaper and more user friendly. Yeah. Definitely more user friendly.

cheap Wi Fi modules that will open and close or or inch.

make my garage door smart.

advance through their careers like this. And your career is still very early on considering you're still a student, so it's amazing to to hear. I have a question about the screen sharing aspect of this. So it doesn't seem like it's all that complex. Is it just basically swapping the media? I mean, is there a whole lot to it other than that? It's, like, what what is the process for getting screen sharing working? Because that, to me, seems like something that would have been

Wow. Yeah. I think that's Node definitely

have both interesting

somewhat complex considering

Some stuff works in 1 browser, doesn't work in another. And when you're using all these experimental things like WebRTC, definitely 2 days. And I was on the front page for like 4 or 5 days. So I got a lot of people that just kind of saw us on GitHub.

trajectories into this stuff as well, I think. And, in general, it's always good to hear how people

the ramifications of sharing screens and all that thing. I am always shocked at how much you can do in the browser. Like, the fact that I could do picture in picture to me so you could literally change to a different desktop it. Prior to that, it's

this was a really naive approach, is I would essentially end the peer connection. So end the call, then create a new call with that screen sharing video with I've learned how to fix that. The hardest problem about all this is just cross browser compatibility.

useful for our audience to know because it is it's I don't know. Like, Wes and I

Node. It's pretty dang easy. The hardest part about it, I would say, other than the swapping streams kind of dynamically in the Scott. Because before, what I would do,

I remember there used to be a point in my life where I would look for a desktop app. But when I was younger, I was like, oh, I wish there was like a Google drive app. Yeah. Because to me it'd be faster and it would like, there's something faster about opening an app or like I used to use the Spotify app on my MacBook or the the Notion app on my MacBook, but now

Like, it the 1st time I showed ZipCall, someone in the call connected, and I was talking to my friend in the US. I was like, no way. I was like, as if I just couldn't stop laughing.

And if you want to try out Century yourself, head on over to century.io.

I do everything in the browser.

conference talks

So you gotta get to that moment really quickly.

and you can do well with it. And maybe there's another thing I want to say.

How did you learn to code? Oh my God. Did you go to Waterloo? How did you do this? How did you do that stuff?

It's so fast to develop

hand over fist money. Oh, there's, like, acquisition talks and stuff like this. It it really made me realize a lot of these, you know, crazy Silicon Valley founders,

Yeah. I haven't experimented with it. I'd love to build it in. But to be entirely honest, I really don't have the time these days Yeah. As far as school's kinda kicking my ass right now.

We make tutorials. So, like, imagine you could make a browser based screen recorder much like Figma JS, like, a browser based design app. I think parts of being hidden in npm install dependencies at all. It's just I I think probably the biggest one you have is you've got an express server

Let's move over to some sick picks. Sick Picks is a section of the show where we pick things that are sick. Do you have anything you'd like to sick pick? Yeah. So I'm gonna talk about Notion, upload that to other people who are trying to watch it, and that's how Torrance work. Because Torrance Yeah. There's no central service where the data lives. It's just

thing to tell people who are in the Node. And here here's just another perfect example.

and then just build it, make sure you ship because once you make something and you build something,

one of the first things that I did was when WebRTC came out and get user media is I figured out ZipCall,

DaVinci

Recording. Have you looked into any of the

Use the coupon code tasty treat, all lowercase, all one word, and you're gonna get 2 whole months for free. So check it out. That's more than enough time to experience, just how cool Sanity is and just how nice it is for your application. There is a reason why so many important popular companies trust their errors and exceptions with Sentry.

I have to find Node deck for my next internship. That's another requirement of kind of my school program. I Don't have as much time as I'd like to spend on ZipCall. That's for sure. But it's totally doable. If someone wants to, like, make a button and make a PR for that, I'll approve that, like, so fast.

I get these emails every day, and I know you you teach a lot of people how to code, which I think is is so awesome. That's something I think I'll probably do later in life. Wes. So I get all these emails like, wow, you're 19. You've worked in all these places.

within Sentry. And if that error pops back up again, you know what it's gonna do? It's gonna tell me that there was a regression and that I need to fix it. So I love tools like this. It really helps me understand exactly what's happening within my application.

That would be really cool. I'm just looking at this record RCC, and it does screen recording and everything but Safari,

I I I I'm not special. I'm not some genius. I just Google Wes, and I Node that you hear this story as far as the success of ZipCall,

in seed capital investments. So literally I was having venture firms every day calling me, reaching out in San Francisco and New York being like, Hey, we wanna give you $300,000 to make this commercial product. Hey, drop out of Scott, come come move here and come do this.

you look at them like, wow. You've really grown, and it's it's honestly just putting in the work. For sure.

a net benefit for the world. I totally agree with you there. We see it a lot. Like, I used to teach out of boot camp, and you see people being like, wow. Like, you must be really good at math, or you must be really special. I'm like, no. Literally just kept chugging at it. And then you see these people 5, 6 years later, and

recording APIs that ESLint out there? I've only done it with audio before, but is it possible to do that with video as well?

Yeah. I saw a library. It's called record RTC.

You don't need any of that. I'll tell you what you need. The first thing is you just need to Google. Right? Yeah. That's, like, level 1. Level 2 is find yourself just a nice online video course. Could be a great one from Wes. It could be something new to me, but And I couldn't find it. So I just started walking around the apartment. I just was, like, complaining.

such a good

not the most complex thing in the world. And there's a little bit of a learning curve, but it's very accessible these days with online learning. Like, I wish more people would get into software engineering. I think that would be

This is just the most ridiculous thing to me ever because I was like, this is just Bos side project. 3,000 lines of JavaScript that you threw together and just people offering you to get things done JS little lines as possible, which has its trade offs.

even with how quickly, you know, the Chrome v eight engine has progressed. The application themselves are also very performant now. Sky is really the limit.

Yeah. There's there's something just so mysterious about

And again, I really don't mean this to flex, but in the last month, I've probably had people offer me over $1,000,000

the core functionalities.

And there's a lot of luck in that. You know? Totally. I love that. Like, if anything, it's a lot like my my story where

which is unreal if you think about it because now you can like, Scott and I are both professional screen recorders in our jobs.

I have very few desktop applications.

and clicked my website, and people loved it. And it's just like, I literally just had this idea and went out and did it. It wasn't beautiful. The the code was awful, but I I just went out and did it. And I think that that's Web is really the future. It's funny you say that. Node and terminal, both my IDE and terminal are desktop apps, air quotes here, but they're both built in webtech,

which JS is just something about having something in your dock, making it feel like a real app. But like you said, it's all it's all webtech on underneath, which is cool.

how to detect the face on it, which is trivial Node. But back in the day, it was much harder using a library, and they overlaid glasses on it. And the people are like, wow. How did you figure that out? That you must be so smart. I'm like, no. Literally, I'm just hacking stuff together.

no. I don't know if that's true. DaVinci Resolve is available on Windows, Mac, and Tolinski. And I was thinking, like, maybe they're using Wes tech behind there to make that work. Well, applications are getting they're getting very sophisticated.

Head on over to syntax.fm

if you don't talk to me, shoot me an email. Got some ideas. Always down the chat.

And just so many of these are absolutely fascinating. I've been watching this YouTube channel for a little bit. And like I said, I'm I've never been into speedrunning before, and I find these to be just so entertaining and so interesting, especially from a web developer or developer perspective. So, check it out, summoning salt on YouTube.

salt. Now summoning salt

for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.

I have a sick pick for you today, and this is going to be a YouTube channel, which I I have a lot of YouTube channel picks and a lot of podcast picks of which I'll I'll have more. But I have a YouTube channel pick for

is

free decentralized browsing that doesn't track you, it's fast, and just works in a browser, Check it out, open up a GitHub issue. If you don't like something, let me know what you think.

Shameless plugs. Do you have anything you'd like to shamelessly plug to the audience?

I have some interesting stuff there. And

Well, thank you so much for coming on the show. That was very enjoyable to to dig into it. Hopefully, the audience will enjoy it as Wes. And, that's it. Thanks again. Of course. Thanks for having me on.

is my personal portfolio.

glitches within the application.

the history of speedrunning in various

For instance, the latest one they just released was on Ninja Gaiden, and it was 44 minutes long. And it was good. It was very good. And he does these all in a very excellent documentary format. There's the one about, punch out that I found to be excellent as well.

And, like, if you land on a certain subpixel between here and there, something goes with wrong with the math and you can glitch through 1 warp shaving off, you know, 0.1

I mean, obviously, or Facebook Messenger or Google Hangouts, they all have some they all either use an SFU or an MCU,

Ianramzy.com.

ZipCall ZipCall dot io. If you want But it's pretty crazy, like the entire back end JS that it's like Like, it's it's a real pain pain in the bum to to get that working.

video games. And what's so fascinating about this specifically is that it's not about

a channel that documents

a huge channel that I've been watching a lot of. They don't put out a ton of ton of content because their videos are quite a bit involved, and it's not a topic that I've ever been interested in. Let me tell you this. I I do play video games, but I'm not a gamer. You know, I play video games, but I'm not a gamer. And this channel is summoning milliseconds off your time, therefore, giving you a new world record. It's an absolutely fascinating look, and these videos are not short.

And if you wanna see more stuff from me, if you wanna see all my crappy coding projects, you know I'm really not that smart.

That's awesome. Yeah. So I'll link it. I know I didn't say what the name of it is because it's just this random circuit board with Wi Fi chips on it, but I'll link it up in the show notes.

the person I mean, sometimes it is, yes, about the person who is the best at the video game. But in some situations like Mario Brothers, there's all these interesting glitches that are programmatic

couple of Facebook.

RIM, like, the BlackBerry

Just getting going. You Node, doing that the life where, to see all of the errors and exceptions that your application faces all at once in a nice cataloged way for you to be able to tackle these issues. Now one of the coolest things that I like about Sentry is the fact that I can create a GitHub issue directly

Oh, that's awesome. So I'm I'm very curious about this comp sci background. I'm gonna ask you a few more questions about that. What year are you in in comp sci at Waterloo right now? So right now, I'm in my 2nd year. I'm just finishing off 2nd year right now. Right on. What kind of languages what are you even learning in Scott sci? 2nd year right now? So this year, I'm taking courses where we're doing some low level stuffs. We're doing a couple of things with hardware and logic gates. So we're doing some stuff with MIPS. So that's kinda like baby compilers.

comp size school. In Canada, that's where all the brains tend to go. I went to a school in Toronto, and everyone's like, oh, not going to Waterloo? I was like, wasn't wasn't quite smart enough. That's where Google is. That's Wes, famously,

Lived in Kingston for a little bit, but That's really all the signaling server does. That process is pretty quick.

kinda came out of and stuff like that. Like, your classmates are people who would, like, go work at, like, Google and things like that. Is that right? will want you to be an intern after hearing this.

Yeah. I got a lot of friends that work at Google and Amazon, you can check out all the games I Node on my website. It's just ianramsay.com.

Hey. I'm doing good.

now I'm I'm based in Waterloo. That's awesome. So Waterloo is pretty prestigious

Yeah. It's always good to have those ideas sitting in your back pocket. Yeah. So another reason why I wanted to have you on on the call was I went and looked at it, and it's awesome and it's it's open source. And I just was kinda just clicking through the Node, and I was like, there's no real

I'm not that person. I'm not saying I write garbage, but I very much value, And it's the exact same concept just instead of sending a video or, like, text information, I send binary.

or when you turn on captions because you have to tell the other person information about that. You no longer have a central server to relay messages through, so you have to send it via peer to peer. That's also done through that channel.

Yeah. Exactly.

Yeah. How? Like, right now, I'm working on creating another data channel. Not working. It's done. Just kind of refining a couple of things so that you can send files between 2 people really quickly over peer to peer.

it's like a 100 lines, 110 lines. And like 40 of that is just serving static files, software engineering, computer science, and, oh, I'm a programmer. What do you I I sit there and I write ones and zeros all day in in a dark room. It's like, that that's not at all what happens. You know? What I do, my friends at Facebook and Google do, something doesn't work. We copy paste what doesn't work into Google. We figure it out. We fix it, people say why the code we wrote wasn't good, we change it a little more, and they push it, and you get paid a lot of money to do it. It's

And WebTorrent is, but the other way around, which is speech to text, is not in Firefox yet.

and then you just send that puppy over, and the other person just has to set like some HTML video tag and still have, like, a UI element that floats on top of the floating video. I couldn't believe I had that much control as a JavaScript developer.

Like right now in ZipCall, there's a peer connection well, there's 1 peer connection, but inside that there's a data channel

I'm very much a person who likes simple things because I think the more complex and convoluted things get, they're harder to maintain. People don't understand them. It's harder to parse. It's slower to update.

video bundler here. It's almost entirely done in vanilla JavaScript. It looks like there's a little bit of jQuery in there. Regrettably.

Like it's great for prototyping and just Wes you just need a two line fix, it just works.

you know, the standard like HTTP requests

is the API for sending data from point to point. It's just a RTC peer connection

is a JavaScript

easy for, I think, pretty much anyone who's listening to this podcast can go ahead and clone this repo and and sort of read through the code in, I don't know, 4 hours or so and see how it works because there's not a whole lot of, like, magic

as it's being downloaded. And this is awesome because you could also like, I I've looked into it once before where I have a video course platform.

way to do it. Yeah. My one regret was that I didn't make the application in React. I used jQuery, pretty much I run that on the person who's calling, and I send it over the data connection via that peer to peer data channel I was talking about earlier where you send your text chats through.

right, yeah, it blew my mind that you could like, why is this online video course using a 100 megabits for time to upload? I'm so confused.

the people that are watching the video to also

But you kind of have some issues as far as like managing state that get kind of gross.

between

that allows you to send it, and then and then it's simply just setting a video source to a Stream object. That's right? Yeah. It's pretty crazy. You started coding,

Like, once you've got the STUN TURN server connections and everything, like, how do you literally send the data from from one to another?

that do the talking between the 2 people on the call. Is that right? Yeah. It's, I'm very proud of how simple it is. It's a little bit messy now because a lot of the UI got mixed in with the you once you get connected, you create a new pure object,

It's it's a decently elegant solution. Oh, so you can have multiple data channels

between different peers visiting the website. I I never did that because I I don't think that I wanna use my user's bandwidth for it. But, webcam or audio. And then WebRTC there's a library underneath.

you know, super maintainable and perfect and beautiful with all these large classes and everything.

Wes really it should just be like, you know, 1 and done, I think. So if someone wants to make a service that abstracts that way even better than it is now, I'd be a big fan. Who knows? Maybe I'll make it one of these days. Yeah.

script source that sucker in, and it works. Right? Like, there's not a whole lot of Yeah. Complicated stuff. And I I think for anyone trying to learn or or see how other people code, I think that's a a pretty awesome

Today's sponsor is Stackbit.

a single connection?

and, WebSockets

to be that source. It's not bad at all. Just getting just getting that WebRTC peer connection set up is a little bit annoying, but once it's there, you can just attach whatever you want.

which I probably shouldn't be doing. I probably should use, like, an s three bucket for that. But You can embed stuff, you can embed PDFs.

which is pretty baby of the entire application. Yeah. Totally. The entire back end is like 110 lines, so it's it's small. Right? Like, you could understand in an afternoon.

run under Prettier, which is a file format. I think it's, like, 900 lines, And same thing with screen sharing. It's not bad. You just call one line, you save it to an object, and then you just have to swap it in with a new video feed. Swapping it with the new video feed took me a little bit of Googling to figure out how to do that properly, but

I pay through the nose for Bandwidth for streaming my videos, and a lot of people have said, like, you can utilize And in a lot of my courses, we use GetUserMedia,

I went back into it, and I still was like, okay. I kinda get it, but then there's lots of diagrams with arrows, and

Wow. That's like, one thing that blew my mind because I for years, I thought WebRTC has for video, but it's for literally anything. Right? Like, any data that's converted to a stream

to go through that process because a WebSocket in my mind was just quicker than just constantly sending like, Yeah. We'll have to see.

my eyes start to glaze over. It's I think that there JS an incredible opportunity for making the whole signaling process of exchanging ICE candidates and, you Node and not traversal and all that stuff, I think it'd be done so much better. Like right now it's like 8 steps back and forth to start a WebRTC call. It's so many steps that I actually use a WebSocket Yeah. Captions things like making a draggable video element. Like it's really easy to have Sanity.

You know, give me give you some thoughts, but it's pretty simple to understand. And that Wes that's kind of when I code,

My roommate figured out in like an hour or 2, and he's by no means a web developer. So if you want to look at it, it's all commented decently well.

But I'm able to redo it in React one of these days, but my kinda chimp level understanding of it. I think chimp level understandings work very well on this show. That's kinda what we aim for. You know, you roll back the clock enough for all chimps. Right? Some of us know how to clickety clack on a keyboard.

can be sent over WebRT to see?

the API for accessing and it was really cool. And then they finally came to the browser where you could access the user's webcam, and WebRTC rolled out at the same time. And I tried to build an app, but I hit these roadblocks, which is trying to understand what, like, network traversal,

I took a course and we did Flash. They did TypeScript, which is

honestly learned nothing new, then did 4 months at Accenture where I did some JavaScript,

Not even that. The entire class is guys. So I'm like, what the hell? I've been baited. But at this point, it's like, alright. Whatever. It's gonna stick it out.

Did my 1st work term, did 4 months at Deloitte, a lot of Python, little machine learning, some AWS, some React JavaScript,

But I think one day, I just was working on it. It just made sense. And I asked my teacher, I was like, Hey, can I review all my assignments? He's like, Sure, man. Can I read all my assignments? I ended up actually winning the award for that class, which was pretty interesting.

went back to school for 4 months,

And 2 weeks later, with some googling and a lot of copying pasting,

quality sucks, but, I live there except for, like, my IDE and terminal.

elimination or anything like that. It wasn't until I started learning that it was doing this automatically and I started turning things off. And I was like, oh, wow. Like, you really need this stuff. Like, if you don't have echo cancellation, it's totally unusable.

I'm some I'm some 19 year old kid who just had an idea. Yeah.

programming class. We were doing Python, which was a good choice, but I took it because there's this girl that I liked, and I thought she was taking the class. So I'm like, alright. Here's the plan. We're gonna sign up for this class. We're gonna sit beside her. I had this whole whole thing with this mastermind thing. Classic. 1st day class.

I do think I'm clever though JS far as my ability to Google, but I think that's all anyone really needs. Totally. And that's just, I don't know, kind of the power of all of these libraries you don't go to Waterloo for what they teach you in, like, as far as useful programming language. Like, no one's teaching you, like, JavaScript or React.

Abstraction is a beautiful thing.

really frustrating for me at the beginning. Totally. It doesn't have to be. It's pretty easy to pick up. So that was grade 10, did a little Python.

blockchain and Python. That's the whole timeline.

Funny story, I took this introductory And that goes back to when I started doing a lot of this work from home. So I was at Accenture, kind of my last month there, and they're like, all right, you know, I have to come to the office working with friends on and you have to trade these, they're called ICE candidates back and forth. And an ICE candidate is essentially kind of like all that good stuff. Then the other half of it is that once you have 2 people sitting in a room waiting for the call, it acts as a signaling server. So you open up a WebSocket connection from each caller to the Heroku server, I gained a lot of users really quickly.

you know, iterate through, an expert on it, but I'm just gonna give my

like Node even iterate through anything, just for loops and if statements that just did not click.

but I kind of went from getting like fifties on a lot of assignments and doing really terribly, just like for loops and printing and, like, or even Reddit. Right? But when you go from having 3 stars jQuery is great for getting stuff done quickly.

So I started in high school. I was first introduced to it in grade 10.

There's, like, more more parameters that you can tune, and I I spent a lot of time experimenting with them as far as capping max frame rates, capping max bit rate, audio sampling, frequency, all that type of stuff. Yeah.

I don't think I saw anything under a 90 before, so I was just, like, appalled. I was like, what the heck? I was like, what's a for loop? Like, how do you print something? I couldn't understand this idea of stepping through code instructions.

its audio quality. Yeah. Like, I remember

when this came out, like, Skype had spent, I bet. I bet. How are you doing today, Scott? I'm going to sick pick some hardware stuff. So, we we did Scott and I did a show on

And I don't really know what changed,

years getting

audio cancellation and all this stuff implemented,

it was not all, you know, rainbows and sunshine. It was to 600 stars, that's a couple order of magnitude increase. And all these search algorithms are like, hey, I don't see something interesting going on. So this positive feedback loop starts to occur where because you got this quick influx of users, you know, I could push the front page and get even more users. And then Google works the exact same way JS far as it measures acceleration and change

Grade 11, for the actual video and there's another data channel for just sending miscellaneous commands like when Wes use the text chat

and how sophisticated a lot of these things are. How long have you been coding then?

on on their end.

They do not make it easy. As opposed to on Android, it just worked flawlessly. Like,

there's some security issues with WebRTC, at least there used to be. I'm no security researcher, but if you use it nefariously, you can figure out people's IP address.

Oh, yeah. Pretty well fully supported on Android JS long as you like, your browser JS, like, up to date. So if you use Chrome, no problems.

I think there's also an argument for

my favorite, most useless feature.

Yeah. I I think all of that is intentional

Like, literally, like, get displayed user media. It'll I think it will override them with whatever the browser specific version is. It'll do things like that. Because before Wes I made ZipCall, it was not working on Safari whatsoever. I had no clue how to get it working on Safari. I spent, like, days trying to, you know, read through console logs. Like, why is this failing? That's failing. Yeah. And I couldn't figure it out because it's the exact same code that worked perfectly on Chrome. And this JS when, you know, there wasn't all these fancy features. It's when it just was the most basic video chat,

Speech synthesis. I used it the other day.

like, apps

whatever worked on Chrome desktop worked on Chrome mobile.

And I think Apple JS a very privacy focused company, so maybe that's another kind of angle, but I don't know. And you have captions? How does that work? Captions are probably

that isn't in the native Bos browser. So Safari. Oh, yeah. Yeah.

in JavaScript No more waste of time searching for the headline within the CMS. And that that's actually a big frustration with a lot of CMS is JS that, like, you see the page

Yeah. Built into Chrome. I don't think it's built into other browsers. This one I Bos now. I was in Firefox? Yeah. Oh, I didn't know that. Yeah. I used it the other day in Firefox. I was surprised it was in there. Oh, okay. Well, maybe I'll have to make that work on Firefox because right now I block it, and I just say, oh, that person needs to use Chrome. But I do some really Node stuff. But Flash is deprecated. Don't worry about Flash guys. Yeah. Pretty useless. Do Scott. No. Not right now. No.

But those are pretty reasonable restrictions for most users. Most people on iPhone, I have the statistics to back it up, use Safari.

So let's say I'm on a call with my friend, Joe.

On Chrome, most people or sorry. On Android, most people use Chrome. So support is pretty good now. I wonder if the the reason why they do that is because they don't want he didn't think I could build video calling because I don't Node, it's pretty daunting from the surface because a lot of problems you need to tackle to make it even just usable, like, you know, echo reduction, auto scaling video Sanity, stuff that's not really trivial. Yeah. Well, clearly I won that bet. So And I I think I kind of coined this term. I wanna call it the grandma test. She's 80 years old, doesn't know how to use a computer. No way I could get her to download Zoom, change the audio input, and, oh, wait. Now I have to restart. Like, it's too much.

Yeah. I think you're right. I think that's that's exactly their play. There's also other things, like, you can't have more than 1 or 2 videos auto playing, I believe.

So you have to have your own video facing yourself, the other person. There's, like, play buttons and stuff that you have to hide.

like, 2 or 300 lines in chat. Js, the the client JavaScript.

But I just included adapter JS one Node, and I was like, oh, sweet. We got Bos support now. We got we got Safari support on desktop. Oh, so it does work on mobile now? my poor little college budget would have been blown a long time ago. I would have, like a couple million people JS far as, like, people who are subscribed in different subreddits saw it for a long time. That was kind of the big first key Wes I gained Like, this sucks. I'm like, whatever I do it. I try and call my other friend. He's like, all right, let's use Discord. I was like, what the heck? I was like, why do I have to download all these different platforms? Like, I just want something that works in the web that's like literally just meets my needs. That was the original culture. Something that I can use with my friends that's really simple and will just work.

to, like, sort of rival FaceTime. That's sort of why I thought they never they didn't do it for the longest time JS that they wanted to get a hold on FaceTime first before they let everybody go willy nilly and make their own

but it's not super well supported Yeah. You know, getting screen sharing, all this stuff. I use a library called adapter dot JS. Beautiful library. I have no clue what it does. I just know that it works, and it just

which just seems a little bit weird and convoluted, but I'll explain why I said I did it like this. So I use the built in browser text to speech. It's Wes just slap that bad boy in there. It'll make your calls.

If I want to see captions of what Joe JS saying, Joe has to be running Chrome,

zip call.

WebRTC And then from that, I got, as to how that works. I think it's really cool.

If you use Bos, the only caveat is you have to use Safari

The other Vercel, So

You gotta love JavaScript.

I used premade components. Oh, yeah. But the actual UI for the chat I made from scratch, you can look at all the the nasty CSS and then jQuery. It's all there. That's cool.

exist in this. Totally.

from my application on Sentry. I just click, hey. Link to GitHub issue, and I can create an issue. It links it directly to Sentry. Everybody can go ahead and see everybody's home all the time, and, Landon just turned 3 yesterday. So we had a big old party, and that was lot of fun. Just, yeah, trying to trying to get normal life back working.

Speech synthesis, in the cloud right now. Although, like, maybe we'll talk about that, but the video has to go from my computer, which I'm in the woods in Canada right now, over to Zoom, and then Zoom needs to relay that over to Scott and to you and things like that. And that gets really, really expensive at the end of the day if you need to run servers that are Scott in the middle. So the tech behind this is traverse the network and connect these 2 things, then the TURN server acts as as an in between,

directly from there. If I wanna, give it to an employee or another developer and say, hey. This is right up your alley. I can just assign it directly from Sentry. I don't have to pop back and forth between GitHub and Sentry whenever I encounter an issue. And then once that issue is complete, I can go ahead and and click resolved

exactly what the error is. You can link directly to the Sentry error itself. You can choose the assignee

which is text to speech,

Yes. I have a fun question here. The loading animation that you have when you're waiting for people to connect,

So it would, like, auto detect language, and then it would ask that person the language you want. It's amazing how much was crammed into this thing considering how simple and how how easy to Vercel all of this this code is. I mean, it's like you mentioned, Wes, it's not a lot of code here, and it's amazing how many features,

pretty much in real time Oh. As compared to the audio source. In fact, sometimes the captions will beep the video and audio. So it's it's quite a nice experience,

Did you did you design this thing? It looks awesome. So this is something I got a little bit of criticism on Reddit because I probably should've made this more open, but the actual landing pages, I didn't design myself. I use I forget the which I guess is good because it makes and it pretty much just shoots these ICE candidates back and forth using the STUN Vercel, and it's trying to find a path between the 2 people. So that's what the role of ICE is.

This episode is sponsored by our good friends over at Sanity, and I'm talking Sanity Scott I o. Now Sentry is the perfect place

But, yeah, the landing page, I didn't really I didn't make myself.

and I think that was the right way to do things.

One thing I I should correct myself, it's not in Firefox.

the artist Node, but they make really great templates.

Yeah. User media dot get display. Yeah. New speech recognition. It's beautiful. Yeah. Or just, like, you you Node, try and add 2 strings together and see. Good luck with that.

are they're pretty freaky. That's cool. They're pretty cool. I also made real time translation for that.

I also send captions through that. Reason why I do that is because if you run text to speech on the input JS you're receiving it, text to speech adds a delay of half a second to to Node second. Right? So by the time those captions appear and you're reading along, it's too slow. It's too delayed. It's really hard to keep up. But if you run that speech recognition on the other person's computer and then you send it over as Textdata, the Textdata will send much quicker than the video data will. The captions will actually arrive because Apple will block WebRTC

I think it's called the Wes speech API. That's what I use in in Chrome. It's really simple to use as well. It's just new speech recognition if you're looking for the API in your console.

it's really nice. Did you is that did you make that, or was that like a I found a GIF on the Internet because people were telling me they weren't sure what Wes going on the application. So I was like, I need a loader.

I don't know. It it it almost had, like, a lot of personality to it. So bravo for picking, something interesting there.

an awesome app. Yeah. Yeah. It's it's really cool. Plus, it's it's all in Wes tech. Right? Under the hood, it's just,

Notion Node so.

all of our sick picks, everything is is in Notion. It's just awesome,

HTML, CSS, and JavaScript.

It's it's what I use for pretty much all my notes these days. I don't have a Node app on my phone anymore.

they are a Silicon Valley startup and they're building really, really great note taking slash organizational Sanity over a data channel

A lot of people have heard of it. They recently raised new round of capital. I think they're valued at $2,000,000,000, but

app. It's kind of like a markdown editor, if any of you have written markdown before in like a GitHub read me or something like that. But it's like abstracted away and it's really, really elegant. Like you can just type Node, you can go like slash h three and I'll put it in the h three heavier slash h Node. And it's all in the cloud and it's just designed so beautifully.

We use Notion to do this podcast. I'm I'm looking at it right now with all of our notes, things that we wanna talk about to you, and Wes we we do all of our sponsors in Notion. We all of our calendars,

Yeah. Notion. I think it's pretty awesome.

But the problem is is that that doesn't always succeed. Like for instance, I was my friend was working at IBM and I was at Accenture. Two companies that both have like ridiculous security policies.

When that fails, you need to have some type of backup. In that case, that's when you use what's called a TURN Vercel. And that's just a very lightweight server that acts as a relay between 2 candidates.

Yeah. Not Vercel will never succeed there just because they have like peer to peer connections that are straight up blocked, at least on company internet.

So I'm not gonna claim to be a networking expert. I'm sure you have a lot of those that listen, so I have to be very careful with my words. I went to school for networking. I don't understand it, so I'm sure very few people actually do.

Oh, that's cool.

Okay. Okay. So maybe that's my safety net of all this gibberish. But the key players, as you mentioned, are stun and turn. So stun is for a process that's called NAT Vercel. That's getting people connected past their firewalls.

person in the call. Yeah. But it never actually decrypts anything. It just kind of passes it along. And then what is ice? they're no smarter than us. Mhmm. They got lucky. I got lucky in the sense that, sure. Yeah. I made a great product, had a great UI. It it served its Scott of lot of very lot of very big brained people there. Lot of people who are very a lot of smart people, man. Makes you feel bad sometimes.

It's almost like another

So ICE gets a little bit more complicated, and I'm by no means In our 1st term, we learned something called Doctor. Racket, which is based on Scheme. It's I'll I'll just finish the timeline real quick. Grade 12, we did Java, went to Waterloo for computer science. 1st year, we did some Racket, a little bit of c plus plus Didn't really learn how to code that much, but learned a lot about like memory and recursion, all the fundamentals.

a firewall where you can't

So for that, I use a service I pay for service from Twilio. It's like 40¢ a gigabyte. I think it's pretty expensive, but Twilio Wes the fastest one that I could find, and And if you don't get rid of that kind of background fuzz just from people's microphones Wes they get gets introduced to the network or whatever, Vercel

But it stands for Internet connectivity establishment, To my understanding, yeah. Like, you can send you can send files over it, so I don't see why you couldn't send anything. The big advantage is the real time aspect of it. It's really great. Yeah. Like, one app that I use for totally legitimate reasons is WebTorrent.

that's kinda why I chose. And it's also very simple. So the video, if both of you are behind

That makes a lot of sense. Man, that you explained it a lot better because I read, I don't know, 50 articles about it when this first came out. And then in preparation for this podcast,

sort of takes in the video and hot potatoes it over to the other people on the call. Is that right? Yeah. Exactly. It just acts as a simple relay.

a path between 2 users. The thing is you have to try it a couple of times to find a path that actually works. And this entire process is pretty complicated, at least when you're first getting started. To do this, you need something that's called a signaling server. So before you can actually establish the call, you both need to connect to some centralized server. For me, it's just some node server that I have deployed on Heroku

It's a pretty cool tool to work with your jamstack

made it to the front of r/webrtc,

which is pretty nifty. We want you to go on over to stackbit.com.

Check it out. They've got a whole bunch of different examples

Man, like, how did those 100,000 people find you? So I think I started the 1st place I went to was I went to Reddit, and I just kinda blitzed Reddit. I just kinda was like, alright. Whatever. What's the easiest way for me to get this out? I don't have a lot of time. I'm still working full time. So I said, alright, so pick the top 20 subreddits. I think this will do well. And then I posted it. Half of them, it got downloaded to nothing because it's like, stop self promotion or whatever. It wasn't even until they self promo. I just was like, hey, I made this really cool thing to video chat with my friends, check it out if you want. That was kind of pretty much what I said. Like I made it to the front of r/ JavaScript, I made it to the front of r/entrepreneur, made it to the front of r/ entrepreneur,

and then you see the CMS, but you don't know, like, where do I edit that and and, like, how does it work? So what Stackbit will do is it'll hook up with your existing CMS,

maybe 20,000 users in 2 days from Reddit. Wow.

was a really cool tool. It works with your existing CMS. It works with your existing Jamstack website, Contentful, Sanity, Datto, Netlify, Forestry,

And it's it's implemented in JavaScript where you can just do peer to peer connections really simply. Maybe it's not even a library. Maybe it's just Yarn this RTC connection. It could be. Yeah. Criteria is ridiculously powerful. I don't think a lot of people realize that. They can do a lot of really interesting stuff. For instance,

website. They've coined the term the best way to jamstack.

So I I love seeing different things. So WebTorrent is the client,

and then like, And yeah. And then it leans on on, like, browser APIs. So it was incredibly

So sort of a a couple

But because I linked on the actual Zipkaw website to GitHub, what was great is that a lot of those people will then convert it to go to GitHub and start it. Like, right now, I think it has 2,000 stars on GitHub.

that are available to you. This might just be the tool that you need for your next Jamstack website. Thanks so much to Stackbit for sponsoring.

I think ZipCall has had well over a 100,000 users at this point. Really? Yeah, it's pretty nuts, blows my mind. Total luck with timing and all that, but and all of this is running on a $7 a month Roku server that's less powerful than your iPhone, and it's operating at, like, 20% capacity.

interesting things it does with the jam stack is it does inline editing. So Stackbit integrates with your CMS to enable on page editing.

and it'll give you a UI where you can just edit it as if you are on or if you're right on the website, which is pretty cool. They also allow you to do things like preview and share changes before they go live. You can test on different devices. It works with Gatsby. So Stackbit

r/roku,

yeah, we did Doctor. Racket. Then 2nd term we did C, So the 1st day I launched it, which I'm I remember I told my roommate, my friend was to get a 1,000 people to use this. If I can get a 1,000 people, I'm ecstatic.

not exactly super relevant these days in my opinion. But, yeah, we spent so much time doing Doctor Racket. It's pretty hellish. I don't think a lot of people liked it, but

then 3rd term to start 2nd year we did C plus plus but there's really not a lot of coding at Wadoop. Like I spend a very small amount of my time coding. Most of it's just doing math. Really? Which is kind of disappointing, but yeah, it's very theoretical. That's that's really interesting. So the the coding skills that you do have, is that just picked up in your spare time? So the hacking on stuff like the SIP call project we're gonna talk about? Yeah. A lot of it's from, I'd say, going to hackathons,

stuff. What's also really nice about Peru is that they have a very strong co op program, so they help you land internships

And we're doing a little bit of c plus plus I believe, for some algorithm stuff, but that's Ianramsy.com at companies.

functional programming. If you know what that is, it's I think if there's 1 thing that I hope people can take away from this is

stun, turn

wanted to build an actual really great solution, you'd have a global cluster of these that are all very local to users computers, they need to be very fast, they need to be able to be very performant because they're streaming, you know, high bandwidth video. It's not cheap. And if I built my own version of that with, you know, the number of users that ZipCall is getting today, What that allowed me to do from there is I then skyrocketed to the front page of GitHub. I was the number 1 I don't know if you know this, but there's actually a trending page on GitHub that a lot of people check Yeah. Oh, yeah. Apparently. And it also shows up in kinda like that sidebar when you log in, like, oh, like, explore these repositories.

came out, this was probably 7 years ago, I went whole hog on it, and I thought this is so cool that you can finally access the webcam. Like, you were probably, like, 11 years old when I was trying to do this in Flash,

using WebRTC,

servers? Like, do you do you know what those are? What are STUN and TURN servers? Like, what are they for?

I'm very curious about it because when Get User Media and WebRTC Second 1 is Stackbit. We'll talk about them partway through the episode.

And to get 2 people connected, you have to go through a process that's called NAT traversal. Yeah. That doesn't always succeed, but majority of the time it does. And that's essentially how you create a really great peer to peer connection.

from you to them. That that's right. Right? Yeah. That's right on. So I use WebRTC,

Yeah. Because, like like, that's what Zoom uses right now. There is some benefits to that because, like, I'm recording

and I connect people together through a process that's called an ICE candidate exchange. And then majority of the time it will succeed. So the process kind of looks like there's my IP address, there's your IP address. In between us, there's firewalls, there's different internet service providers, there's whatever country restrictions.

If you

which allows you to connect directly to the person on the call from your computer to their computer, and then there's a direct line

credit card companies would have been knocked at my door. AWS would have been like, hello.

So I was like, what's the simplest thing I could kind of go for? And that would be sending an email, having her click Node ESLint, it just automatically joins, automatically selects the right input, automatically scales video, does everything that, a sensible video chat should. And that was kind of how it started.

this kind of central server that's relaying video between everyone. So if you look at a traditional solution from Zoom

is SFU is a selective forwarding unit. I forgot what the MCU stands for, but essentially it just acts as a central source where all the data flows into and flows out of.

And then from there, I think the 2nd kind of important part of it is the peer to peer aspect of things. How there's not And the the big thing that I got lucky with I'm primarily Python, I would say. I prefer Python slightly over JavaScript,

which

stars to 40,000 stars, that probably won't get you to the front page of GitHub, We made a bunch of little stupid Flash games.

It's acceleration. So if you go from 20,000

How did your server deal with this immediate influx? Now granted, I I I would imagine it's not doing a crazy amount of stuff, but did you notice any sort of issues with the influx of users? That sudden jump, did you have to scale up or anything, or or was it mostly okay?

how many users you have.

in number of hits, not necessarily just the total number of volume.

It's pretty crazy because most of my friends don't have anything more than 5. You know, 5 is like, oh, wow, you built something awesome. Like, you know what, you hacked it on it. Like 5 of those like 3 of those people that started were just your friends. 2000,

it's a good bit more than that.

And I think kind of an important lesson from that is to get to the front of these trending pages, it's not really about velocity. Like, it's not how quickly you're gaining users or sorry. It's not

That was the number Node repo for, I think 3 days,

If there's 1 thing I learned was

And once and this is something I think actually helped out a lot JS once 2 callers are connected, they disconnect from the Vercel, like, completely.

and you have a call on, the Scott of the echo cancellation and that sort of infinite feedback, all of that stuff, that's done by the browser. But you also said you have, like, auto scaling video. Does the browser do that as well? You do that through WebRTC.

So do you wanna talk about some of the features now, Wes, specifically? I'm just curious about, like, the browser

Yeah. Pretty crazy.

So not quite the browser, but, yes, it's through WebRTC.

very powerful when it comes to things like this. Very powerful.

Wow. So that's yeah. That's a pretty pretty sweet lesson.

it starts to take a toll. Sure. Sure. If you have, like, a large AWS instance that has a lot of bandwidth, and a compute, no problem. But, yeah, made something made decent video chat with a 100,000 users. I don't claim to be a genius. I don't claim to be an incredible developer.

But because it is a node with all that async magic, So I just Node GIFs, and then I just spent, like, 10 minutes in Photoshop removing the background. Awesome. Yeah. No. That that was really nice touch. I thought it was, or whatever course you wanna do. Just pick a project, something you want to make for me, it was video call. I want to make video calling

but I decided to do the back end in Node and Express, which ended up being a godsend because But they picked really sensible defaults. And even though I ESLint, like, a week experimenting with it, trying to change stuff, they do a lot of things right. It's kind of funny. I made this entire thing, and I didn't even realize I had echo cancellation or noise background

it actually managed to scale pretty well. I don't think it ever hit more than 70% usage. Response time was always under a second.

the server doesn't have a notion that these people are on a on a video call right now, which is something that really helps. If you have 6,000 people on a call, having 6,000 open WebSocket connections, The garage door won't stop opening and closing. I don't know anything about that.

bakes in things like echo cancellation. So if you don't have headphones on

And how how does that work? Like because WebRTC doesn't know about video streams, does it? Yeah. It does. It's it's ridiculously easy. You literally just pack it pass in a JSON object that's, like, auto scale equals true.

terrible.

I ended up doing like 20,000 in 2 days, so I beat that by a good bit.

and you just pretty much just send data back and forth for about 3 or 4 seconds So I start I start going through this class. I was lucky for whatever reason. I always did really well in high school. I knew how to check the right boxes. So I was used to, you know, getting, like, 97s, 98s, all those ridiculously inflated numbers that high schools give out these days. But I was doing really terribly in this class. Like, my first assignment, I think I got a 50.

I think in 1 hour, I did like 5,000 5 or 6,000 people, which is that's a lot for HD video calls. So the server serves really 2 main functions. The first JS serving static files like your CSS, your JavaScript, yeah, it's super accessible. They do a really great job at it. Yeah. I would say it rivals like a Zoom or a FaceTime or anything like that as far as

saying like, hey. This is my IP address. Here's some ICE candidates. Try these out. Let me know if they work. The person goes, okay. These ICE candidates didn't work. You know, here's my WebRTC settings. Let's try these ones. And let's go back and forth a couple of times till it works.

and Wes Bos. Welcome to Syntaxes, the podcast with the tastiest web development treats out there. Today, we've got a guest on the podcast who made this really cool app called

and

so we just spent 10 minutes trying to get Zoom working.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here JS Scott Tolinski

And then this guy just built sort of a a clone of it in the browser

which And I don't say that to claim I'm some genius programmer. I claim to say I say that because Node is it is so addictive and it is so energizing to be like, wow. I made this. And you just Node off to your friends.

Oh, yeah. It's abstracted away beautifully.

Unfortunately, when you work there for 4 months, you tend to pick up a lot just from working with all these people. So I've had 2 co ops now, and that's been really great. That's where I learned a lot of my skills. Oh, yeah. Yeah. It seems like you have a lot of relevant

I have my opinions about blockchain,

co ops and everything like that. I mean, you'd be surprised. Most of my friends at Facebook are doing PHP, so it's not all glamorous there. That's true. Where what school did you, did you study at? I went to Ryerson in Toronto, and I did, hey, I did the information technology management course, which is now called business technology management. It's a business degree focused on tech, and I majored in I forget. I did a lot of telecom, which is why I when I saw this thing that you built, I immediately was like, damn, this is cool because

pretty, pretty nice tech stack. Just finished up 4 ones at Accenture where we did a lot of work with blockchain,

experience when I was looking at your your site, some interesting companies and work experience there. Yeah. Yeah. I've been lucky. I

but yeah, I mean, like, a decentralized health platform with that. So that's pretty neat. I'm very lucky that I haven't had to work with, like, .net or, like, PHP or something like that yet. It's it's funny. I'm, like, what, 10 years out of co op right now. So I went to another school in Canada, and we had co ops as well.

But

I went to school for this stuff, and it's super complicated. And then I looked at the source code of it, and I was like, this is really not all that out there anymore. It's it's pretty simple with with Webtech.

the Waterloo kids always got the really good co ops at Accenture and Deloitte and Google and Facebook.

We were the ones that took the .net

My roommate was like, if you're so annoyed with this, like, why don't you just build it? I was like, you know what, screw it. Maybe I will. So he kind of had this bet that I work I first worked at Deloitte through Waterloo's co op program. That was awesome. I got to work on a super cool team, got to build some machine learning models, a lot of data scraping, a little bit of React, So there's the people that like to do things correctly and, you know, make sure everything is, kinda actual chat logic. Yeah. So So I think the actual main JavaScript file commented

Alright. So let's get into talking about this. So the the website that you built is called ZipCall Scott io. Essentially, what it is is it's a peer to peer video calling application that uses web tech and allows you to do things like a Zoom call. There's a whole bunch of features in it. Do you wanna, like, give us a quick rundown of what it is and and why you built it? For sure. So I guess I can kinda start with the why first.

and everything's starting to shut down from COVID and I wanted to talk to my friends. I wanted to call them. I was like, okay, how do I do this? So one of them was like, alright, you need to download Skype, you need to sign in. And I was like, alright, I download Skype. He started with, like, a Microsoft account that want, like, a phone number. I'm like, are you kidding me? makes WebRTC work, like, 50% better.

but, yeah, I Node it really just to use for myself, and I wanted something that was browser based. That was number Node requirement because I grew up with my grandmother.

But let's let's say welcome welcome, Ian. How are you doing?

I'm studying computer science there, and I'm 19th. Grew up in the US.

I'm not too bad. Not too bad. School's starting to ramp back up again, but from home now, doing good. Oh, that's good. So where are you from, and, what school do you go to? So right now, I'm living in Waterloo, which is it's in Canada.

with just JavaScript, and it's it's peer to peer. We'll talk all about it. It's really, really cool. But today, we are sponsored by 2 awesome companies. First 1 is Sentry.