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

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 ZipCall, and so we just spent 10 minutes trying to get Zoom working.

And then this guy just built sort of a a clone of it in the browser 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.

Second 1 is Stackbit. We'll talk about them partway through the episode.

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

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.

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

Lived in Kingston for a little bit, but

now I'm I'm based in Waterloo. That's awesome. So Waterloo is pretty prestigious 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, RIM, like, the BlackBerry 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?

Yeah. I got a lot of friends that work at Google and Amazon, couple of Facebook.

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.

I bet. I bet. How are you doing today, Scott?

Hey. I'm doing good.

Just getting going. You Node, doing that the life where, 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.

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.

And we're doing a little bit of c plus plus I believe, for some algorithm stuff, but that's it. Prior to that, it's 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.

In our 1st term, we learned something called Doctor. Racket, which is based on Scheme. It's functional programming. If you know what that is, it's 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 yeah, we did Doctor. Racket. Then 2nd term we did C, 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, working with friends on stuff. What's also really nice about Peru is that they have a very strong co op program, so they help you land internships at companies.

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

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

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, pretty, pretty nice tech stack. Just finished up 4 ones at Accenture where we did a lot of work with blockchain, which I have my opinions about blockchain, 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 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 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 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.

Oh, yeah. It's abstracted away beautifully.

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 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 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? 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.

And I couldn't find it. So I just started walking around the apartment. I just was, like, complaining.

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 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 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.

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.

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.

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 this kind of central server that's relaying video between everyone. So if you look at a traditional solution from Zoom or Facebook Messenger or Google Hangouts, they all have some they all either use an SFU or an MCU, which 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.

But those are really expensive.

If you 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, my poor little college budget would have been blown a long time ago. I would have, credit card companies would have been knocked at my door. AWS would have been like, hello.

Yeah. Because, like like, that's what Zoom uses right now. There is some benefits to that because, like, I'm recording 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 using WebRTC, 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

from you to them. That that's right. Right? Yeah. That's right on. So I use WebRTC, 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.

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.

I'm very curious about it because when Get User Media and WebRTC 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, 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, stun, turn servers? Like, do you do you know what those are? What are STUN and TURN servers? Like, what are they for?

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.

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.

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.

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.

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.

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 that's kinda why I chose. And it's also very simple. So the video, if both of you are behind

a firewall where you can't traverse the network and connect these 2 things, then the TURN server acts as as an in between, 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.

Oh, that's cool.

It's almost like another person in the call. Yeah. But it never actually decrypts anything. It just kind of passes it along. And then what is ice? So ICE gets a little bit more complicated, and I'm by no means an expert on it, but I'm just gonna give my 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.

But it stands for Internet connectivity establishment, and you have to trade these, they're called ICE candidates back and forth. And an ICE candidate is essentially kind of like 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 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.

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, 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

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 to go through that process because a WebSocket in my mind was just quicker than just constantly sending like, you know, the standard like HTTP requests 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.

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 bundler here. It's almost entirely done in vanilla JavaScript. It looks like there's a little bit of jQuery in there. Regrettably.

And yeah. And then it leans on on, like, browser APIs. So it was incredibly 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 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 and, WebSockets

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 kinda actual chat logic. Yeah. So So I think the actual main JavaScript file commented run under Prettier, which is a file format. I think it's, like, 900 lines, 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.

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.

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, 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.

So there's the people that like to do things correctly and, you know, make sure everything is, you know, super maintainable and perfect and beautiful with all these large classes and everything.

I'm not that person. I'm not saying I write garbage, but I very much value, to get things done JS little lines as possible, which has its trade offs.

But it's pretty crazy, like the entire back end JS that it's like it's like a 100 lines, 110 lines. And like 40 of that is just serving static files, which I probably shouldn't be doing. I probably should use, like, an s three bucket for that. But

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, started coding, 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

way to do it. Yeah. My one regret was that I didn't make the application in React. I used jQuery, which I guess is good because it makes things like making a draggable video element. Like it's really easy to have Sanity.

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

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

But I'm able to redo it in React one of these days, but jQuery is great for getting stuff done quickly.

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? And in a lot of my courses, we use GetUserMedia, the API for accessing webcam or audio. And then WebRTC is the API for sending data from point to point. It's just a RTC peer connection 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

you once you get connected, you create a new pure object, and then you just send that puppy over, and the other person just has to set like some HTML video tag 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.

Like right now in ZipCall, there's a peer connection well, there's 1 peer connection, but inside that there's a data channel for the actual video and there's another data channel for just sending miscellaneous commands like when Wes use the text chat Sanity over a data channel 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.

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

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.

And it's the exact same concept just instead of sending a video or, like, text information, I send binary.

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 can be sent over WebRT to see?

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.

And WebTorrent is a JavaScript based torrent client that allows you to stream video 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.

I pay through the nose for Bandwidth for streaming my videos, and a lot of people have said, like, you can utilize the people that are watching the video to also 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 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,

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.

Yeah. Exactly.

Today's sponsor is Stackbit.

It's a pretty cool tool to work with your jamstack website. They've coined the term the best way to jamstack.

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

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 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, Contentful, Sanity, Datto, Netlify, Forestry, 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 was a really cool tool. It works with your existing CMS. It works with your existing Jamstack website, 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 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.

So I I love seeing different things. So WebTorrent is the client, and then there's a library underneath.

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,

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.

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, made it to the front of r/webrtc, r/roku, 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 maybe 20,000 users in 2 days from Reddit. Wow.

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.

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.

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.

That was the number Node repo for, I think 3 days, 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.

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 how many users you have.

It's acceleration. So if you go from 20,000 stars to 40,000 stars, that probably won't get you to the front page of GitHub, or even Reddit. Right? But when you go from having 3 stars 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 in number of hits, not necessarily just the total number of volume.

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?

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.

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

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, 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, and you just pretty much just send data back and forth for about 3 or 4 seconds 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.

That's really all the signaling server does. That process is pretty quick.

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.

So 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, 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, 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.

And the the big thing that I got lucky with I'm primarily Python, I would say. I prefer Python slightly over JavaScript, but I decided to do the back end in Node and Express, which ended up being a godsend because 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 terrible.

But because it is a node with all that async magic, 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.

Yeah. Pretty crazy.

If there's 1 thing I learned was Node is very powerful when it comes to things like this. Very powerful.

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

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

bakes in things like echo cancellation. So if you don't have headphones on 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 not quite the browser, but, yes, it's through WebRTC.

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.

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.

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 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.

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 quality sucks, but, 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

its audio quality. Yeah. Like, I remember when this came out, like, Skype had spent, like, years getting audio cancellation and all this stuff implemented, 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.

Abstraction is a beautiful thing.

I think if there's 1 thing that I hope people can take away from this is I'm some I'm some 19 year old kid who just had an idea. Yeah.

And 2 weeks later, with some googling and a lot of copying pasting, 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.

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 and how sophisticated a lot of these things are. How long have you been coding then? So I started in high school. I was first introduced to it in grade 10.

Funny story, I took this introductory 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.

She's not there.

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.

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 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.

And I don't really know what changed, 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, you know, iterate through, like Node even iterate through anything, just for loops and if statements that just did not click.

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.

And I don't say that to claim I'm some genius programmer. I claim to say I say that because it was not all, you know, rainbows and sunshine. It was 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.

Grade 11, I took a course and we did Flash. They did TypeScript, which is you can check out all the games I Node on my website. It's just ianramsay.com.

We made a bunch of little stupid Flash games.

Flash is deprecated. Don't worry about Flash guys. Yeah. Pretty useless. Do Scott. No. Not right now. No.

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.

Did my 1st work term, did 4 months at Deloitte, a lot of Python, little machine learning, some AWS, some React JavaScript, went back to school for 4 months, honestly learned nothing new, then did 4 months at Accenture where I did some JavaScript, blockchain and Python. That's the whole timeline.

Wow. Yeah. I think that's Node definitely useful for our audience to know because it is it's I don't know. Like, Wes and I have both interesting trajectories into this stuff as well, I think. And, in general, it's always good to hear how people 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 somewhat complex considering

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 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.

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 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, 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.

Some stuff works in 1 browser, doesn't work in another. And when you're using all these experimental things like WebRTC, 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 makes WebRTC work, like, 50% better.

Wes just slap that bad boy in there. It'll make your calls.

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, 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? 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.

If you use Bos, the only caveat is you have to use Safari because Apple will block WebRTC that isn't in the native Bos browser. So Safari. Oh, yeah. Yeah.

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

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

people making, like, apps in JavaScript 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 WebRTC zip call.

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.

Like, it's it's a real pain pain in the bum to to get that working.

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.

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

Yeah. I I think all of that is intentional on on their end.

I think there's also an argument for 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.

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 my favorite, most useless feature.

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

If I want to see captions of what Joe JS saying, Joe has to be running Chrome, 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

Speech synthesis. I used it the other day.

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 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.

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 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, and I think that was the right way to do things.

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

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, exist in this. Totally.

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

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

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.

You gotta love JavaScript.

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.

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

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.

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,

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

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 the artist Node, but they make really great templates.

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

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.

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 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 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 exactly what the error is. You can link directly to the Sentry error itself. You can choose the assignee 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 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.

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

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.

Recording. Have you looked into any of the 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.

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.

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.

That would be really cool. I'm just looking at this record RCC, and it does screen recording and everything but Safari, which is unreal if you think about it because now you can like, Scott and I are both professional screen recorders in our jobs.

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 DaVinci 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.

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 I do everything in the browser.

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

I have very few desktop applications.

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.

It's so fast to develop 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.

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.

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? 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 get yourself a good web developer course 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 and then just build it, make sure you ship because once you make something and you build something, it is so addictive and it is so energizing to be like, wow. I made this. And you just Node off to your friends.

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.

So you gotta get to that moment really quickly.

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, and you can do well with it. And maybe there's another thing I want to say.

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 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.

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 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, 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 the core functionalities.

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 I gained a lot of users really quickly.

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 one of the first things that I did was when WebRTC came out and get user media is I figured out 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.

And then from that, I got, conference talks 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 such a good thing to tell people who are in the Node. And here here's just another perfect example.

Yeah. There's there's something just so mysterious about 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 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

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 you look at them like, wow. You've really grown, and it's it's honestly just putting in the work. For sure.

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,

Notion Node so.

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 they are a Silicon Valley startup and they're building really, really great note taking slash organizational 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.

You can embed stuff, you can embed PDFs.

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.

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

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, all of our sick picks, everything is is in Notion. It's just awesome, 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, HTML, CSS, and JavaScript.

Yeah. Trying to get a job at Notion, but, apparently, they don't hire interns. Oh, really?

Wes, if, maybe somebody that's there's quite a few people listen to this podcast, so maybe somebody will, will want you to be an intern after hearing this.

Yeah. We'll have to see.

I'm going to sick pick some hardware stuff. So, we we did Scott and I did a show on Scott home and things like this, and we talked about these sonoff 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 cheaply make my garage door smart.

And, my dad I was just talking to my dad, and he did it as well. And and there's these really cheap Wi Fi modules that will open and close or or inch.

Mhmm. Interesting. It's electronics. It's not really my my wheelhouse, but I know enough to be dangerous. So, you can go on Amazon. You can find for for 15, 20, $25.

You can find these little modules that you can power by USB or you can power it by the one I got either does 7 to 32 volts AC or DC, which is amazing. So so many different situations you can plug this thing in.

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, I specifically hook it up to to Google Home, and it works great.

That's cool. A lot of integration stuff. I just imagine, like, installing that in your garage and then and are you married? Yep. I believe you're married. Married. Three kids.

Oh, congratulations.

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.

The garage door won't stop opening and closing. I don't know anything about that.

There's a lot of nefarious things we could do. Wes actually do that with my kids. I tell them to say abracadabra, 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 as to how that works. I think it's really cool.

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.

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 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 salt. Now summoning salt is a channel that documents the history of speedrunning in various video games. And what's so fascinating about this specifically is that it's not about 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 glitches within the application.

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 milliseconds off your time, therefore, giving you a new world record. It's an absolutely fascinating look, and these videos are not short.

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 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.

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

I mean, obviously, ZipCall ZipCall dot io. If you want 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.

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.

Ianramsy.com is my personal portfolio.

Ianramzy.com.

I have some interesting stuff there. And if you don't talk to me, shoot me an email. Got some ideas. Always down the chat.

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.

Head on over to syntax.fm 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.