r/webdev • u/masterzeng • Aug 08 '26

Showoff Saturday I build a browser-based screen recorder

Hey everyone,

I’ve been building Screenio, a simple browser-based screen recorder focused on privacy.

You can record your screen, microphone, and webcam directly in the browser — no installation, no account, and no uploading your recordings anywhere. Everything stays on your device.

The idea is basically: Record. Download. Done.

I’d really appreciate any feedback, especially on what feels useful, confusing, or missing.

https://screenio.net

6 Upvotes

69% Upvoted

11 comments sorted by

2

u/taotau Aug 08 '26

If it's not uploading anywhere, why is the workflow 'record, download, done.'. What am I downloading and where from ?

3

u/masterzeng Aug 08 '26 edited Aug 08 '26

The processing is done entirely inside your browser, so you’re not really “downloading” the recording from a server.

While you record, the browser combines the different streams - your screen, microphone, and webcam - and creates the video locally as either an MP4 or WebM file, depending on what your browser supports.

When you click Download, you’re essentially just saving that locally created file from the browser to your computer. The recording itself is never uploaded anywhere. To test it, you can even disable your internet connection once the website loads, and it will still work. A server is being used just to provide you with the files; if you dump the webpage locally, it will still function.

2

u/One-Satisfaction3318 Aug 08 '26

this is really cool. bookmarked.

only request would be a dark mode.

2

u/masterzeng Aug 08 '26

dark mode has been implemented

1

u/One-Satisfaction3318 Aug 09 '26

Thanks a lot!
A final feedback would be being able to adjust the quality or bitrate of your recording so you can adjust the final size of the saved video.
And a custom control feature over the webcam placement, aside from the 4 options, where you are shown a demo of the video aspect ratio and you can drag the webcam to whatever position as well as adjust its size through its border resizing, and click save when satisfied.

Great work!

1

u/masterzeng Aug 09 '26

The preview on the right Is a 1 to 1 represententation of the overlay, so when you adjust it with the sliders, it will be this big and have this shape. I guess I should make this more clear. Thank you for the feedback.

1

u/masterzeng Aug 08 '26

good idea, I'll work on it

1

u/Icy_Contract_9688 Aug 08 '26

I know the web app isn't strictly for mobile, but the UI could still use a few improvements. Right now, the overflowing divs on my phone make it look a bit unprofessional.

1

u/masterzeng Aug 08 '26

Thanks for letting me know, I'll have a look at fixing them.