Real quick before we get going, we are launching a new video series called March Mad CSS. It's a CSS battle tournament with 16 of the world's best developers.

Josh Komu, Chris Coyer, Adam Wathan of Tailwind, Cassidy Williams, even Scott and I. Now we have a ton of prizes to give away. And if you want to win, go to madcss.com, and you're gonna fill out the bracket. So madcss.com, log in with your GitHub, and you're gonna pick who you think is going to win each of these. And whoever gets the highest score is going to win this amazing prize pack. Like this. Sick CSS jacket. You can also order this from the website as well. We got some pretty cool merch, some tees, stickers, and Node Jean. First, second, third prize. Go to mad CSS. Make your picks. You can share them with your friends. You'll probably win. Peace.

Welcome to Oh.

I'm gonna knock over my water.

Too much. Alright. Let's try that again.

Emphatic. Welcome to Syntax. There we go. I'll I'll do it for you. How about that?

Oh, yeah. I it's it's so funny. I I I I like to get I like to get big, and, that's not really conducive to having water. You know what, Wes? Have you ever spilled water all over your stuff before at your computer?

Yeah. It's part of the reason why I keep my laptop on a stand all the time because one time many times I've dumped water, especially on my keyboard. But, one time, one of our kids dumped the water on my wife's MacBook and just fried the whole thing. And luckily, our credit card insurance covered the entire thing, and they bought us a brand new one. But, man, yeah, I'm so scared of of that type of thing. I don't mind a keyboard getting getting drenched, but not a not a laptop.

I've never, yeah, I've never for for as as much as my nickname growing up was the king of spills, and I still do spill occasionally.

And I have never spilled liquid on my laptop. Not soup, not drink, not anything. And that is shocking. Yeah. Oh, yeah. And then my my computer JS also on risers, though. So if I did spill, it would have to be a pretty tremendous spill. There's, no app for that, but I did make an app to solve my video feed problems. And we're gonna be talking about Electron apps. We're gonna be talking about Tori apps, ElectroBun, desktop apps with Wes tech, and the choices that I made to get this app up and running in this episode of Syntax. What's up? My name is Scott Tolinski. I'm a developer from Denver, and with me JS always is Wes Bos. What's up, Wes?

I am stoked to hear about this because this is something we've been complaining about that we've wanted for so long, and just the tech behind how to do it. Like, I know you've taken several stabs at it. I vibe coded something similar at one point, and it's just, like, every there's lots of apps out there that do what this does, but just I we've tried them all, and they're all extremely frustrating. They're all very frustrating. And I yeah. So,

long story short, I built an app to solve my biggest needs of wanting a professional video recording app for my computer that doesn't do too much or not enough. Because the way most of these things work, there's a ton of them out there.

Screen capturing. And it's like, usually, you can record a screen, maybe a couple screens. You can maybe record your camera and audio.

But the ones that allow you to do the stuff that I needed to do, I e, choosing as many sources as I want, they then tried to do too much by shoving proprietary formats, crappy video editors, bad automatic features, stuff you don't need in addition to this. The way that I like to work is I like to record a whole bunch of sources, whether that is individual browser windows or screens or several different audio or, several different video sources all at once. And then I like to have all of those as independent individual files that I can just drop into my editor. You know what's crazy? There's there's, like, I could go through the list of all the apps that are in the same realm, but don't do this. But, like, ScreenFlow, you can have as many sources as you want, but then they they spit you out into their editor, and everything's in a dot ScreenFlow wrapper that you can't even get the files out of. Yeah. They're I I actually looked into it. I, like,

I I found their CLI and, like, tried to figure out how to get the files out. And they're they're literally storing them in, like, a SQLite database, and they're storing there's a they're storing everything in there, the the frame diffs, everything. So it's not even a, like, a file that you could get out of there. It's they're just they're storing raw blobs of data in there. And and ScreenFlow is by far as as much as I hate it and it seems to be abandoned right now, it is by far the best actual recorder, except, like, I I'll use it for, like, an hour we're recording with, like, Sanity, and then I gotta export my screen. That takes And then it takes hours. Forty five minutes, and then I gotta export my my camera. That's another forty five minutes. You know? And it's it's just too slow for that type of thing. Yeah. So that's another concern JS that a lot of these things, even after you record, one I used to use was,

called, oh, what was called? It was by, it was iShowU.

And the reason I liked iShowU is because it did essentially this. The only problem is is that the end of a session, it would then automatically do the processing. And that processing, you you'd be sitting there waiting, like, forty five minutes. So if you wanted to record multiple things in a row, maybe deal with the processing later, you're waiting all this time. So the requirements for me is that it had to record all of these sessions, all of these different screens and everything as individual sources that I could then use in my editor of choice.

It also needed to not have that processing time because, dang, I got better things to do with my life than to sit and wait for my computer to process video. Not only that, that processing time is largely unnecessary.

The reason why that exists is because, typically, these things are converting into a format like m p four, MOV, which, like, why? I didn't necessarily understand the need for that. So if you've ever used OBS to record, you'll know that it can record to MKV. And MKV, you don't have any processing time in that. Right? It's just recording to an MKV and then stitching it all together at the end or whatever, however It doesn't even stitch it. The MKV It doesn't. Yeah. File itself is,

meaning, you can just continually add to it. And then if if it were to go corrupt or break or something like that, you wouldn't you wouldn't actually use it. There's no, like, ending process as far as I know. Yes. You're simply just tacking

on. And that was another thing. So the ending process or corruption is another requirement I had. It was that if the app crashes for whatever reason, I cannot lose footage.

I I should be able to reopen the app and start recording again, and I cannot lose footage. So, those were, like, my main requirements. I've lost too much too many video recordings to OBS taking up so much memory that my video stutters, ScreenFlow or other things crashing or just straight up having to sit and wait. So those were my main requirements, and and this app tries to solve all of those things, really.

And I think it does so quite successfully because we record as MKV.

Again, if it crashes, you not only get you get each individual raw session file right Node. So they're currently stored as WebM as it's recording in individual segments. And I'll I'll talk about the technical decisions, for some of this stuff.

And then they're put together in an MKV afterwards. But, again, that doesn't take any processing time. In fact, the only processing time happens is stitching together the audio and turning it into a WAV. And I actually got around that at one point by using MKA

as the audio format, but, like, nothing supports MKA. Like, not even DaVinci supports MKA, so I had to to move. Yeah. Let let me ask a question there. So you're you're recording to WebM likely because it's like, I will talk about the tech, but because it's coming off the browser. Right? And that's what it's that's the what it supports. But then can you and you do have to convert it from WebM to MKV.

No? It's just stitching it together is really what it is. Yeah. That's processing. Is it not?

It it takes Really? You don't see it. Yeah. The the processing time fast.

Takes takes in in entirely in,

audio processing. Yeah. Awesome. And one more thing we should say here is that something that I've been trying to get into and trying to do for the last year or so is is instead of recording screens like, recording your screen is great. Right? But what's what's even better is recording if you want, you can record the apps themselves.

And that's great. Because if you tab away from something or if you don't show something for a second and you realize, I kinda wanted to show the browser or I wanted to show the terminal at the same time, but they weren't on the screen at the same time, they continually record, and you can just, like you can zoom them in and and whatever. You have all of the individual sources. It's kind of a sometimes it's nicer just to record your single screen and whatever you put on the screen gets recorded. But other times, especially, like, when I do TikTok videos or whatever, it's nice to have the individual tracks of every single

app, and then you don't have to worry about accidentally hiding something. Yeah. Yeah. And and what's so cool about this too is is, like, the fact that I'm not hiding anything in proprietary wrappers means that, like, at any given point, you can, like, if if it crashes or whatever, again, you can just open the framework and click reprocess. It's gonna, spit out whatever it is as the completed file. So if you don't have that end of session cleanup happen, there's no data loss, which is, like, which is big. So though those were the the choices. And when I first started this app, I started it in Tori, which is the, like, desktop app framework. We've talked about it on this show. Tori is interesting because it uses the built in OS web view.

So on macOS, that becomes WebKit web view, which I'll talk about why I moved off of Tori. It was because of that. But, also, it has Rust instead of, TypeScript or JavaScript for the app side of things. On the back end. Right? Like, your your UI is JavaScript in HTML, CSS, but your your actual back end logic or, like, is is Rust Vercel, like, Electron where that's it's Node code. Yeah. So I had initially started this with Tori, and I first initially ran into issues that totally sidelined me from working on it. Because at the time, I just didn't wanna convert it to Electron, and I was just annoyed by it, so I just quit. And that was that the WKWebView, did not support the dialogue for MediaRecorder, which is crazy because it supported the ability to use get user media.

But the dialogue that pops up that allows you to select the screens, that did not exist in WKWebView.

So it it would just be like, your permissions aren't set. It would just, like, fail on a permissions issue even if it wasn't a permissions issue. So, like, that drove me absolutely nuts. And then that that got fixed some at some point in Torrey, they did something to fix that. And I re I got past that point with Torrey at that point and was like, oh, okay. Great. I can now record all these screens. And I recorded, and Node matter what I did, Wes, the end results were coming out blurry. And it was so frustrating because it didn't look blurry in the preview, and it was just screen recordings.

So my video looked great, but the screen recordings were blurry. And I, like, couldn't figure out if it was something with my process or what. And it turns out Safari, like, doesn't give you the the retinal resolution of screen recordings.

So I I did all this work. I got all this, and I got, like and all of a sudden, it's like Safari is is screwing me again by not giving me high resolution screen recordings. And I will say there's a reason why I went with this type of Wes tech instead of, like, trying to do everything in a native way. And and some of that was JS that the Rust ecosystem for that wasn't mature enough, or Scott good enough. I I ran into all kinds of crazy file size issues and all sorts of stuff. And maybe it's it's a a skill issue there. But, like, get user media is great because, it has the ability to say, hey. Which which screens, which sources, all this stuff, click them, click them, click them. Those are the sources.

And then, basically, send those along as small small chunks of data to the server side for processing.

So there's nothing inherently wrong with using Git user media for this as opposed to, like, Apple, APIs or something. But Safari, man, just that that resolution thing killed me. And it was so actually annoying to figure out that that's what the issue was, to be honest. So at that point, I decided, you know what? Screw this. I am going to Electron. And may my gosh. That's the best decision ever.

Electron gets a lot of heat for reasons why I think people just like to hate on Chrome. One, that's a thing. People don't like Chrome. It does use memory. But, also, there's a lot of crappy Electron apps out there. So, oftentimes, people have been using an app that uses a lot of memory, and they're like, oh, it's electron.

Therefore, it sucks. But, like, I I think Versus Node has shown that an app can be electron and still be performant. You know? If Versus Code is slow, it's because of extensions, not because of Versus Code. Right? So, I moved to Electron, which was painful, and it was a process.

But after I got it into Electron, just about every that that was the thing that set this from being like, oh, this is just something that I I'm working on here and there to, oh, this is a thing this is a tool I can actually use and, get out there to to the world. There's also a new thing called ElectroBun, which let me pull up ElectroBun. Where did I have that tab? ElectroBun is very new and did not exist when I made made the the, transition to electron, but I probably wouldn't have chosen it anyways because it is too fresh. And I gotten so burned on the Tory thing that I was like, you know what? I need something mature.

But ElectroBun tries to do a little bit of a hybrid approach. It uses uses all kinds of interesting stuff. And one one note here is it does use the default web view out of the box, which in this case would be Safari and macOS.

And I I tweeted about that being a a a bummer or, like, a hard thing to work around.

And the you can use Chrome in this.

I acknowledge that you could use Chrome in this, but the the creator of this still got upset that I did not say that you can use Chrome. I don't think You can you can switch it out.

Yeah. You can switch it out. I don't think having the native Wes view is a sell. I'm gonna be honest with that because the native web view being different browsers with different capabilities on each OS or even version of OS makes testing, predictability, everything a complete nightmare. With electronic web development.

It it it is like web development, but to an extreme sense, because you're dealing with, like, a lot more APIs that can write files and do all kinds of stuff. Like, you're using the, like,

the lower level APIs that are, like, accessing hardware and and, like, even, like, one example would be, like, what if you needed Bluetooth for this? You know? What if you wanted to connect to a Bluetooth mic directly from your app? You wouldn't be able to do that in,

in Safari. Right? Because there's no APIs for that. You can Node a MIDI either, which JS, like so to me, I'm like, it's gotta be one browser predictable, and it has to work.

There's a BUN API for this. I I haven't used this, but it looks neat. Again, it's very fresh, and I'm I'm sure there's a lot of great things about it. But, again, I I yeah. I think I'm gonna stick to something maybe a little bit more established when I'm doing this stuff. And like I said, I think Electron gets a lot of hate. But, man, my experience with Electron and building in Electron has been very positive, overall.

Yeah. I I was enjoying myself. So my question, and and I'm sure you have an answer. I'm people are probably thinking this right now JS this. So you're you're capturing all of this media in the browser, and then you are using the browser to, like, take those chunks of data and sending them to your back end, which you're saving them, and then at the end of it, you you put them all into an MKV.

Yes. If you already have some process running natively on the user's computer, why not just use native APIs for this? You know? Like, there's a whole set of new ESLint APIs for recording the screen. There's, like, Steve, I don't know how to say his last Node. Tenuto. He has frame cap, which is like a CLI for recording. Right? Mhmm. Yep. Like, why not just use, like, native APIs and take the browser? Like, the browser can still be a UI to click the buttons and whatnot, but, like, you have to put everything through the browser now.

In in my experience, I have some issues in in Chrome where the it, like, drops frames, and it's a little bit weird. Yeah. So I will say,

reason being JS that I wanted to I didn't I didn't wanna get into cross platform messiness there. Like, I would love to release this on all platforms. There's nothing that would stop me from from doing that. Yeah. Because what does this use? It uses the browser to send it, and it uses FFmpeg to to do any like, there there's nothing inherently Wes y about this. And the last thing I wanted to do was was have to start, you know, building deeply into different Bos Wes in my experience, and I will say Vercel of the videos that I've released on the Syntax channel and my personal channel have been recorded with this. And I've done hour long sessions or whatever in this, and I'm not seeing any frame drops. I'm not seeing any crazy memory usage. I'm not seeing any performance issues. So for me, like, the proof in that I didn't need to go there was simply that it worked.

That that was it for me. If it didn't work and I was running into issues, then I would have absolutely, changed that approach. Yeah. But I think the thing is is that I'm not recording into the browser. You know? I am I'm not saving files into anything into the browser. I'm simply just capturing those chunks and then hot potatoing them immediately to the back end code. And if you want to see all of the errors in your application, you'll want to check out Sanity at century.io/syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on to reduceentry.io forward slash syntax. Again, we've been using this tool for a long time, and it totally rules. Alright.

Yeah. Yeah. That makes sense. And and, like, as long as it works. Right? Like, I've tried Right. So many things in the past. Like, I have this obs.westboss.com.

Like, I built an entire UI to control. There's a plug in for OBS called source record, and that allows you to record multiple sources.

And it's it's so obnoxious because you have to add all these scenes, and they have to apply a filter to each one, and then you have to turn them on and off. So I built a whole UI that will, like, connect with WebSockets, and it will send screenshots because that's a big thing for me is, like, I wanna see what it is I'm recording. I wanna make sure that it's actually it's grabbing it. Right? Like, you Node, like, a little preview of it there. That's super important. But then I built a UI that would turn them on and off and start and stop the recording, and it works great. But sometimes it doesn't because the source record plug in is this, like, add on thing to to OBS, and it can just it just spins out of control, uses a ton of ton of memory. Sometimes it doesn't work. You know? Like, it's just random bugs. And, like, there's I don't want something that will sometimes not work because you're losing data. That sucks. Right? Right.

Losing data sucks. And and, like, that was the big thing JS it needed to be fault tolerant here. Yeah. You know? Like, I wanna see that these files are climbing. And if they're not,

you should something should be, PolyCapture. That was the one. Yeah. I tried that one as Wes, and that one is a pretty good native Bos app. But, again, like, the UI, I didn't Node. And then Wes did lose a bunch of data once. I, like, I I I stopped, and it was just black. You know? Didn't line up. There's just gremlins all the way down with this type of stuff. And doing it in the browser takes a lot of that, like, lower level. Oh, this, like, weird mic doesn't work. You know? It's a different

frame rate or whatever. There's all these, like, weird things. The browser smooths out a lot of those APIs, and you just have to use get user media, which is nice. Yeah. You know what? And and, it it's so funny because this also started out as a thing I just built because I wanted to have this UI that you're, if you're watching on video, you can see. This UI here frames me up to shows, like, what a mobile, frame would be. That's why it's called VFramer because I wanted to have something that would allow me to see what I would look like if I were to crop it straight vertical for vertical video. So that way, if I was, like, over here, I would you know, I would wanna be centered in the frame, obviously. It it gets you that, like, that, you know, I can move my computer here to to make sure everything is nice and lined up and looks even and normal. So this Wes, like, the initial thing. It's like, oh, I just want this, screen recording app where then you can also, like, see what the vertical, cut would be for anything.

And then once I had that, it was like, oh, man, I could just keep adding sources.

And I've, the biggest concern for me was that if I added a lot of sources that I would see performance issues. And, you could see, you know, some of these I'm recording, like, three screens here, a video and an audio.

Yeah. Three, two three screens of video and audio.

And I haven't had any issues there. I think I've been really impressed with the stability of this thing overall. So, I've been using it, and I I I've been liking it. There's also a lot of interesting technical challenges here because this product or project here is not just like okay. So you have the the electron app. Then you say, okay.

Let's say I wanted to sell this thing.

Let's say I wanted to publish this thing. Like, what do you need from there? Because, clearly, you know, the app itself is valid. It works. I've been using it. I've been liking it. So, like, what is the the thing that can take you to actually getting this to be, like, a production app. One, for Apple specifically, because that's what I'm targeting right now even though I'm open to other things. I'm not gonna sell it in the App Store, but I do want it to when you buy it and download it, I want it to open up without issue. You Node? Apple, like, always gives you that gruff about, like, you're downloading an app from an unknown source. Like, are you sure you wanna do this? So you need to have an Apple developer account.

I I had to create certificates. I had to create, like, a team. I had to notarize the app on every build. So that way, when you open it up or I send it to Wes, it's not going to say, oh, it's corrupted.

And that that's a whole whole thing. Right? Electron makes it easy enough considering, you know, that's kind of what Electron does. That's actually one of the best things about Electron JS that it's so established that there's documentation and blogs on how to do absolutely anything in here. So if I wanted to figure out the notarization process, like, that part of it was relatively simple even if the Apple developer stuff is a giant PIA and takes forever to click around and figure out. Man, that's the that's the MCP I need, Wes, is the, hey. Just just do the certificate thing for me. I hate this.

It's it's funny that they say that because there was a CLI for interacting with the App Store, and Apple recently just shut it all down because, like, it was it was a super well done thing where you could get, like, get tokens. You could log in via the CLI. You can install things via CLI, and Apple just nixed it all probably because it was people are spamming the crap out of it and and just, like, I'm sure Apple's review right now is just full of these just, like, vibe coded apps, and people are just generating 50,000 apps.

Yeah. Yeah. For sure. Another big challenge here was if I am going to sell it, what does that look like? What does that look like? Because the options are is that you could rig Stripe subscriptions and and user account. So I could have this be like, oh, you have to log in to use this thing, and then that login then checks the server to make sure you have paid to use the app. They want a subscription. Right? That makes no sense. I'm not I'm not processing anything over time. Subscriptions are stupid.

So, like, I wanted a onetime purchase option. I wanted people to be able to to use it and have a trial mode to to make sure that it works for them before they pay for it. And then I want the purchase process to be just go off, you click buy, you get a license key, you paste that license key into the app, and then you're good. Right? So, I had to learn a lot about that stuff. In fact, I I reached out to, the creator of Recut. I'm like, how did he do his? And then anytime I saw people posting about their apps on Twitter, I'd be like, what are you doing for your licensing? Just because I wanted to to get a lot of opinions on how people were doing that. So you can see there is a trial mode, limited to one video, one audio, and then, a link to get license. And this will just basically take you to a Stripe checkout.

That Stripe checkout does a normal checkout.

And when you complete the Stripe checkout for saying you've bought it, it sends a webhook message to a server. So Stripe has webhooks baked in. That sends a message saying purchase completed for this app to this email, and that sends a message to a CloudFlare worker I have. That worker then triggers the license generation.

So the way that the license key stuff works is that I am using a project called Keygen, keygen.sh.

Now you can pay for Keygen, and a lot of people were suggesting that just paying for Keygen was the way to go because this stuff's kind of a a a PIA. How can that be that complicated? Right.

Well, Keygen so you have to have a license key that is validated to an email. The keys can be all kinds of stuff like, how many use like, how many, activations of this key you can Node. So how many computers is this key good for? Those types of things. And there's a lot of really, like, small type of, features you might want with a keygen.

And what I found, though, is that you can self host keygen. So instead of paying for it, you can self host it, which is what I chose to do.

So I have a self hosted keygen that I'm running, and I'm basically hitting my own API with an API key and an email. So that CloudFlare worker gets the webhook that comes in, and it says, okay. This person has bought it. Here's their email. That then gets triggered to the Keygen server, which generates a key for them.

And then that takes that key coming back into the the CloudFlare worker, and it sends them an email with their key.

Once you have that key, you just head to head to the app, settings, paste that key in here, and it unlocks the app, which, honestly, the key gen server part, I don't wanna say it was harder than building the app because the app certainly has a lot of edge cases. But Yeah. Because I had to do so much knowledge acquisition to be able to get that part of it working, that part to me was the hardest part Wes like, so how do I wanna do this? I wanna get this working. I want it to, like, be smooth. I warp it to work offline. Like, there's so many little things I had to think about there, like and once I got the key gen server, it was fine. But the key gen server also, the self hosted version, does not have a UI. And I'm a UI kinda guy. I like clicking around stuff, so I'm, like, hitting the CLI, hitting this API, and being like, did this work? Okay. I I like you know, just debugging that kind of stuff was was no fun. Paying for it probably wouldn't have been bad, honestly. But, hey, I got a Coolify server up there.

You know, Keygen has

an easy Docker setup. Like, why not? You know? Man. And did you did you host that on your Mac mini? Are you,

did you put that in the cloud? It is running on Coolify. Yeah. I I have a, I have a I have actually two Coolify servers I'm gonna move on. I had, my first Coolify server was an Yarn server, and I really liked it, but it is living in Germany.

So everything JS Wes I just they don't offer Arm in The US, or they didn't. So I just spun up a new Hetzner COOLIFY that's local to me, and, I'm I'm moving everything over there. I love COOLIFY. Man, I throw all kinds of stuff on COOLIFY.

It it's so easy to just toss stuff up there. I need to continue for anything. It's so easy to do that. So, the Keygen server, yeah, I that that part was obnoxious getting all of that configured and and set up. But once I had the Keygen server, like, the pieces all kind of fell into place, whether you have the worker for the webhook, you have your Stripe, you have your Keygen server.

And on top of that, the like, it's amazing how much work goes into releasing this app. Because not only that, I have a wait ESLint app that I made, because it was like, I want people to to know about this. So I made a wait list app on top of it. And And the wait list app is so lo fi. It is so lo fi. It uses, Google Sheets. It uses basically, I'm sending you enter your email, and it puts it onto a Google Sheet there, which honestly was fine.

It's like, that's all I needed to this Wes to capture emails from anybody who Wes interested. And I didn't think this thing was gonna go viral or anything to the point where I had to worry about people going nuts and, ruining that form by spamming it with emails or anything like that. So that was pretty much it. That's how I've captured. I have not released yet.

Hopefully, I'm gonna release really soon. What I wanna do before I release this is get in the hands of you and CJ ASAP.

So that way you guys can test it out on some, like, Node scary things. That way, you can make sure it works for you, get some feedback on it, and then, release it. Because, heck, I, yeah, I I I just think it was so useful for me to have this, and now I'm using it in every every recording I do. So if it's useful for me as somebody who does this full time, like, I gotta imagine it's useful for somebody else. I I have hit every single possible

recording issue in the world, so I will run it through. Will you give me a free license key?

Of course, I'm gonna give you a free license key. Okay. There's also by the way, there's also a menu. I get I have a little menu, where you can pause recording and stop recording. There's keyboard shortcuts in here. Like, how you Stream Deck plug in now. I need a Stream Deck plug in. You're right. You can customize your keyboard shortcuts if you don't like them. Yeah. I thought I feel like I I tried to make this exactly yeah. You can customize the countdown, the the you can have the FPS locked to 30 FPS if that's what you want.

Yeah. I feel like I thought of everything I I like and need in these tools. So let me know what you think on this thing. Let me know if you have any questions about it, but I feel like Oh, one question. One question I have here is, like, like, what about, like like like, bit rate and resolution

and all of that stuff? Like, it I don't see any knobs for that. Can you control that? There's no knobs for that, but maybe there should be. No. I I just capture everything at at, high bit rate. So because, like Yeah. That could be, like like, a gig a minute, though, isn't? Can it not? If you A gig a minute. No. Node k?

No. It it's not. And it doesn't end up being, like yeah. Like, look. Where's the What JS the

what's the bit rate? That's a great question. What is the default bit rate I have set? Because I'm pretty sure you can control the bit rate with yeah. You can. You control the bit rate with get user media. Yeah. And you can crank it up. I've done that before. I've been like, I just want the best quality ever. And it Wes, like, a gig a minute, and you run out Yarn drive space real quick.

That I I set the bit rate a long time ago, and I haven't really touched it. Let me let me let me look into that. It's it's so funny because I set it, and the quality's been good enough that I just haven't been like, oh, I need an issue to tune it. Yeah. That was, like, one of the early things I did, way back when.

So, yeah, let me let me let me add some knobs there. I think that's a good eye. See, Wes, so now we chat about this stuff. I I need this kind of feedback.

I'll I'll give you some I'll give you my feedback as well. I do that a lot of times when people send me their apps. I'll just hit the I'll hit record while I'm using it for the first time, and there's often some good stuff there. I love that. And I like to think the UI looks pretty nice, man. I I

I spent some time on this designing it, and, there's a light mode, dark mode.

I think they both look pretty cute. So Awesome.

Oh, some contrast issues. Oh,

Node have to run it. Oh, I like that little Yeah. It's very, what, teenage engineering

esque. Yes. That was my inspiration for sure. In fact, this entire UI was designed to kind of after the, they're they have, like, a recording device that was kind of mocking this or mimicking this in a little bit, but I didn't want it to be, like, just a copy paste skeuomorphic version of a teenage engineering project. I wanted it to be, like, kind of that inspired. Yeah. One thing that I we didn't talk about here that is actually, interesting is the CICD upload or the update process.

So another thing that Electron makes somewhat easy is the, automatic updates.

Like, if you wanted to, like, update your app let me see if I can bop open some code. So if I release a new version of this, like, there's so many ones that make you like, even even DaVinci makes you, like, go to their website and download a new copy of it and stuff. And I I think that that. It Bamboo Studio does that too. Go and download it and quit the app. Like, no. Just do it for me. Let me just restart the app

next time I restart it, and it it should update itself. Don't make me redownload some DMG and drag and drop it in.

Totally. And so I have CI for that using GitHub actions, and it basically will build a release version of it and then set my, all my Apple stuff. And then it's going to push it up to an r two bucket.

The app using electron updater checks that r two bucket to see if there's a new version. And if so, it will prompt you to say new version installed or whatever. Update will take place on next relaunch of the app. So it's just a nice little macOS dialogue that pops up. So updating is is, like, really pretty painless. So I that that part to me, was a bit obnoxious. But just like everything in Electron, there's just an endless amount of resources on it. So, like, I think that was some of the killer stuff for me was like, oh, I wanna get, an automatic updater working. Oh, okay. Let me just Google that, and then, oh, there's a electron updater. Oh, the the process is really, really easy or it is documented very well, easy or not. So I thought that was a really interesting part too, especially because a lot of these challenges for somebody who hasn't ever done anything like this felt very daunting, and they were daunting until I moved to Electron. So I've never been an Electron hater, but, like, I kinda I kinda love Electron. Sorry, folks. Yeah.

Awesome. And I've actually built, like, two or three more Electron apps since

so This man must be stopped.

So what's the website if people wanna try it out or get on the list?

Oh, yeah. The, website is vframer.video.

We'll have that linked up in the show notes. And, yeah.

Yeah. Check it out.

Alright.

Peace.

Peace.