983: Why I Chose Electron Over Native  🔗 **Source:** [983: Why I Chose Electron Over Native](https://share.snipd.com/episode/431c3336-a4df-4994-9ec7-63b2830c7e2d) ## Highlights - **Record Independent Sources To Avoid Proprietary Lock-In** - Scott built v_framer to record multiple independent sources and export raw files you can drop into any editor instead of locking you into proprietary wrappers. - He records web-based sources as WebM shards, then stitches them into MKV to avoid long post-processing and preserve crash recovery. Transcript: Scott Tolinski And we're going to be talking about Electron apps. We're going to be talking about Tori apps, ElectroBun, desktop apps with web 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 Tolinsky. I'm a developer from Denver and with me as always is Wes Boss. What's up, Wes? Wes Bos 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 And it's just like every there's lots of apps out there that do what this does. But just we've tried them all. And they're all extremely frustrating. Scott Tolinski They're all very frustrating. And I yeah, so the 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. Wes Bos There, I, I actually looked into it. I found their CLI and tried to figure out how to get the files out. And they're literally storing them in a SQLite database. And they're storing everything in there, the frame diffs, everything. So it's not even a file that you could get out of there. They're storing raw blobs of data in there and then screen flow 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'll Use it for like an hour we're recording with like randy and then i gotta export my screen that takes maybe hour 45 minutes and then i gotta export my my camera that's another 45 minutes You know and it's it's just too slow for that type of thing. Scott Tolinski Yeah. So that's another concern is that a lot of these things, even after you record, one I used to use was called, oh, what was it called? It was by, it was I Show You. And the reason I liked I Show You 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'd be sitting there waiting like 45 minutes. So if you wanted to record multiple things in a row, maybe deal with the processing later, you were waiting all this time. So the requirements for me is that it had to record all of these sessions or 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 MP4 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. It doesn't even stitch it. Wes Bos The MKV file itself is meaning you can just continually add to it. And then if it were to go corrupt or break or something like that, you wouldn't actually use it. There's no like ending process as far as I know. Yes. You're simply just tacking on. Scott Tolinski And that was another thing. So the ending process or corruption is another requirement I had was that if the app crashes for whatever reason, I cannot lose footage. 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, screen flow or other things crashing or just straight up having to sit and wait. So those were my main requirements. 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 now. So they're currently stored as WebM as it's recording in individual segments. And I'll talk about the technical decisions for some of this stuff. And then they're put together in an MKV afterwards. ([Time 0:02:09](https://share.snipd.com/snip/930b40e9-c9f9-4dd1-9245-f2d746f35769)) - **Appendable Containers Prevent Post Processing Delays** - Using MKV (or appending WebM segments) removes slow end-of-session processing so recordings are immediately available. - Scott records segments as WebM during capture and only stitches audio into a WAV/MKV, minimizing wait times. Transcript: Scott Tolinski And that was another thing. So the ending process or corruption is another requirement I had was that if the app crashes for whatever reason, I cannot lose footage. 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, screen flow or other things crashing or just straight up having to sit and wait. So those were my main requirements. 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 now. So they're currently stored as WebM as it's recording in individual segments. And 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 wave. ([Time 0:06:43](https://share.snipd.com/snip/34058959-a1a5-4cd3-84a5-c933e02b4a83)) - **Tauri WKWebView Caused Blurry Screen Captures** - Scott started v_framer in Tauri but hit WKWebView issues: missing MediaRecorder screen-selection dialog and blurry retina captures from Safari. - Those bugs led him to switch to Electron for predictable, high-resolution screen capture. Transcript: Scott Tolinski We've talked about it on this show. Tori is interesting because it uses the built-in os web view so on mac os that becomes web kit web view uh which i'll talk about why i moved off of tori it was because of that but uh also it Wes Bos Has rust instead of uh typescript or javascript for the app side of things like the UI is JavaScript in HTML, CSS, but your actual backend logic is Rust versus like Electron where it's Node code. Scott Tolinski 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 want to convert it to Electron And I was just annoyed by it. So I just quit. And that was that the WK WebView did not support the dialogue for Media Recorder, which is crazy because it supported the ability to use GitUserMedia. But the dialogue that pops up that allows you to select the screens, did not exist in WK web view. So it would just be like, eh, your permissions aren't set. It would just like failed 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 Tori, they did something to fix that. And I got past that point with Tori at that point and was like okay great I can now record all these screens and I recorded it no 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 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 retina resolution of screen recordings. So I did all this work I got and I got like and all of a sudden, it's like, Safari 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 web tech instead of like, trying to do everything in a native way. And some of that was is that the Rust ecosystem for that wasn't mature enough, not good enough. I ran into all kinds of crazy file size issues and all sorts of stuff. And maybe it's 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? ([Time 0:09:59](https://share.snipd.com/snip/67da4af6-e1b8-4a4a-906d-66736756707c)) - **Use One Predictable Browser Runtime For Media Apps** - Choose a single, predictable browser runtime (Electron/Chromium) when your app depends on advanced media and hardware APIs. - Different native webviews vary by OS and version, making testing and APIs like Bluetooth or high-res capture unpredictable. Transcript: Scott Tolinski Screw this. I am going to Electron. And 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 think VS Code has shown that an app can be Electron and still be performant. You know, if VS Code is slow, it's because of extensions, not because of VS 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 was the thing that set this from being like, oh, this is just something that I'm working on here and there, too. 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 the transition to Electron. But I probably wouldn't have chosen it anyways because it is too fresh. And I got so burned on the Tori 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 all kinds of interesting stuff. And one note here is it does use the default web view out of the box, which in this case would be Safari and Mac OS. And I tweeted about that being a bummer or like a hard thing to work around. And you can use Chrome in this. I acknowledge that you could use Chrome in this, but the creator of this still got upset that I did not say that you can use Chrome. I don't think you can switch it out. Yeah, you can switch it out. I don't think having the native web view is a sell. I'm going to 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 is the like web development, but to an extreme sense, because you're dealing with like a lot more APIs that can write files. Yeah. All kinds of like you're using the like the lower level APIs that are like accessing hardware. Wes Bos And even like one example would be, what if you needed Bluetooth for this? What if you wanted to connect to a Bluetooth mic directly from your app? You wouldn't be able to do that in Safari, right? Because there's no APIs for that. Scott Tolinski You couldn't do MIDI either. To me, it's got to be one browser, predictable, and it has to work. There's a Bun API for this. I haven't used this, but it looks neat. Again, it's very fresh and I'm sure there's a lot of great things about it. But again, I, yeah, I think I'm going to 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. ([Time 0:13:03](https://share.snipd.com/snip/7f8428fa-f9e1-49be-94e6-c4e9e60ecad1)) - **Hot-Potato Chunks To Backend Avoids Browser Limits** - Browser-based capture can be sufficient if you stream chunks off to native code immediately rather than storing in-browser. - Scott hot-potatoes WebM chunks to backend FFmpeg processing to avoid browser storage and maintain cross-platform logic. Transcript: Scott Tolinski So I will say reason being is that I wanted to I didn't I didn't want to 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 send it and it uses FFm peg to do any like there's nothing inherently Mac OS about this. And the last thing I wanted to do was was have to start, you know, building deeply into different OS is when in my experience, and I will say, several 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 was it for me. If it didn't work, and I was running into issues, then I would have absolutely changed that approach. ([Time 0:17:28](https://share.snipd.com/snip/27e883a6-6e4f-4835-8250-afaa6f1ab893)) - **Do Apple Notarization Early In The Process** - Prepare Apple developer certificates and notarization early when shipping macOS builds. - Electron docs and community guides make notarization doable but Apple account, certificates, and notarization steps remain time-consuming. Transcript: Scott Tolinski 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 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 know, 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 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 then 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 is 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. They ([Time 0:22:45](https://share.snipd.com/snip/badf0431-c267-43f7-9cb2-269f45b7e93a)) - **Automate One-Time License Delivery With Stripe Webhooks** - For one-time purchases, use Stripe webhooks to trigger license creation and deliver keys to customers. - Scott uses a Cloudflare Worker webhook that calls a self-hosted Keygen instance to generate and email license keys. Transcript: Scott Tolinski 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 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 know, 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 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 then 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 is 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. Wes Bos 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 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. Scott Tolinski 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 user accounts. 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 one time purchase option, I wanted people to be able to use it and have a trial mode 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 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 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 web hook message to a server. So Stripe has web hooks bakeds 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 PIA how can that be that complicated right well uh 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 activations of this key you can do. So how many computers is this key good for? Those types of things. And there's a lot of really 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 web hook 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 Cloudflare worker, and it sends them an email with their key. ([Time 0:22:48](https://share.snipd.com/snip/8ce84d37-f211-4069-9533-2a9bdfd79ef0)) - **Self Hosting Keygen Worked But Lacked A UI** - Scott self-hosted Keygen rather than paying for SaaS and found setup fiddly because the self-hosted version lacks a UI. - He ran Keygen via a Coolify Docker setup and debugged API/CLI calls to generate keys. Transcript: Scott Tolinski 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 web hook 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 Cloudflare worker, and it sends them an email with their key. Once you have that key, you just 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 want to say it was harder than Building the app because the app certainly has a lot of edge cases but 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 was like so how do I want to do this I want to get this working I want it to like be smooth I want it to work offline like there's so many little things I had to think about there. Like, and once I got the keygen server, it was fine. But the keygen server also the self hosted version does not have a UI. And I'm a UI kind of guy. I like clicking around stuff. So I'm like, hitting this CLI hitting this API and being like, did this work? Okay, 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, Kijin has an easy Docker setup. ([Time 0:27:33](https://share.snipd.com/snip/1739224d-1cc5-4c47-a71e-64171f12337c)) - **Give Users Shortcuts And Previews To Trust Recordings** - Add user-facing controls like keyboard shortcuts, FPS lock, and previews to make recording reliable and testable. - Scott included customizable shortcuts, countdowns, 30 FPS lock, and a preview panel so you can verify sources are actually recording. Transcript: Scott Tolinski It through will you give me a free license key of course i'm gonna give you a free license key uh there's also by the way there's also a menu i have a little menu uh where you can pause recording And stop recording there keyboard shortcuts in here. You need a Stream Deck plug-in now. Wes Bos I need a Stream Deck plug-in. Scott Tolinski You're right. You can customize your keyboard shortcuts if you don't like them. Yeah. I feel like I tried to make this exactly. Yeah, you can customize the countdown. 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 Wes Bos 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 i don't see Any knobs for that can you control that there? Scott Tolinski There's no knobs for that, but maybe there should be. No, I just capture everything at a high bit rate. Wes Bos So because like, yeah, that could be like, like a gig a minute, though. Isn't kind of not if a gig a minute. No, okay. Scott Tolinski No, it's not. And it doesn't end up being like, yeah, like, look, where's the what is the what's the bit rate? That's a great question. What is the default bit rate? Wes Bos I have said because I'm pretty sure you can control the bit rate. Yeah, you can. You control the bit rate with get user media. Yeah. And you can crank it up. I've done that before being like, I just want the best quality ever. And it was like a gig a minute. Scott Tolinski And you run out of hard drive space real quick. Is that I set the bit rate a long time ago, and I haven't really touched it. Let me look into that. It's so funny because I set it, and the quality has been good enough that I just haven't been like, oh, I need to tune it. That was one of the early things I did way back when. So, yeah, let me add some knobs there. I think that's a good idea. See, Wes, this is why we chat about this stuff. I need this kind of feedback. Wes Bos And some icons. 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 record while I'm using it for the first time. And there's often some good stuff there. ([Time 0:31:53](https://share.snipd.com/snip/39fe286f-8eb8-4841-bb7f-6e3e6cea07b5)) - **Ship Auto-Updates Through CI And R2 Buckets** - Automate CI/CD builds and auto-updates so users don't manually redownload installers. - Scott uses GitHub Actions to build, uploads releases to an R2 bucket, and Electron Updater prompts users to install on next relaunch. Transcript: Scott Tolinski 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 hate that. Wes Bos Bamboo Studio does that to 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 should update itself. Don't make me re-download some DMG and drag and drop it in. Totally. Scott Tolinski And so I have CI for that using GitHub Actions. And it basically will build a release version of it and then set all my Apple stuff. And then it's going to push it up to an R2 bucket. The app using Electron updater checks that R2 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 like really pretty painless. So 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 want to get an automatic updater working. ([Time 0:35:01](https://share.snipd.com/snip/b6748416-e0eb-4326-b916-95732c6c1910))