DEV Community: typical pawel

How We Built a Free Browser-Based Screen Recorder

typical pawel — Sat, 04 Apr 2026 15:30:33 +0000

At Flat.social, we build tools for remote teams to connect, collaborate, and have fun together. Our platform already handles real-time video, spatial audio, and interactive games for virtual offices and events. So when we decided to add a free screen recorder to our toolkit, we had a head start on working with browser media APIs. But building a screen recorder that feels polished, works reliably across browsers, and never touches a server turned out to be a deeper engineering challenge than we expected.

This article walks through the technical decisions we made, the browser APIs we used, and the problems we solved along the way.

Why Build a Screen Recorder?

Our users already use Flat.social for remote team collaboration, online brainstorming, and running virtual workplaces. A common request we kept hearing was: "Can I record what's happening on my screen to share with teammates who couldn't make it?" People wanted to capture product demos, walkthroughs, and async updates without installing desktop software or signing up for yet another SaaS tool.

We also noticed that many existing free screen recorders come with strings attached. Some upload your video to their servers. Others slap a watermark on your recording or limit you to five minutes. We wanted something different: a tool that runs entirely in the browser, saves locally to the user's device, and has zero limits. No account, no cloud, no watermark.

The Core Architecture

The screen recorder is built on three browser APIs that do most of the heavy lifting.

Screen Capture API (getDisplayMedia) lets us request access to the user's screen, a specific application window, or a single browser tab. This is the same API that powers screen sharing in video conferencing tools like Zoom and Google Meet. When the user clicks "Start Recording," the browser shows its native picker dialog, and once the user selects a source, we get a MediaStream containing the screen's video track.

getUserMedia handles the webcam and microphone. We request camera and audio access separately from the screen capture, which gives us independent control over each stream. The user can toggle the webcam and microphone on or off at any point during the recording without interrupting the screen capture.

MediaRecorder API takes a combined MediaStream and encodes it into a video file in real time. We record in WebM format using the VP8 or VP9 codec, depending on what the browser supports. The MediaRecorder fires data events as it encodes, and we collect these chunks in memory. When the user stops recording, we assemble the chunks into a Blob and offer it as a download.

The Hard Part: Webcam Compositing

The trickiest part of the entire project was the webcam overlay. We wanted the user's face to appear as a circular bubble in the corner of the recording, baked directly into the video file, just like Loom does it. This sounds simple, but the browser does not give you a built-in way to composite two video streams into one.

Our solution uses an off-screen canvas element. On every animation frame, we draw the current screen capture frame onto the canvas, then draw the webcam frame on top of it in a circular clip region. The canvas runs at the same frame rate as the screen capture, so the result looks smooth and natural.

We then call canvas.captureStream() to turn the canvas output into a new MediaStream. This composited stream is what we pass to the MediaRecorder, not the raw screen capture. The result is a single video file where the webcam bubble is permanently part of the recording.

Getting this to perform well took some iteration. Early versions caused frame drops on older machines because drawing two video sources onto a canvas sixty times per second is CPU-intensive. We optimized by matching the canvas resolution to the actual screen capture resolution instead of using a fixed high resolution, and by using requestAnimationFrame instead of setInterval to stay in sync with the browser's render loop.

Mixing Audio Streams

Audio presented its own set of challenges. The screen capture can optionally include system audio (the sounds coming from the user's computer), and the microphone provides a separate audio track. We needed to mix these two audio sources into a single track for the final recording.

We use the Web Audio API to handle this. Each audio source is connected to a MediaStreamSource node, and both sources feed into a single destination node. The destination node outputs a mixed audio stream that we combine with the composited video stream before passing everything to the MediaRecorder.

One gotcha we ran into: system audio capture is only available in Chrome and Edge, and only when the user shares a browser tab or entire screen (not a specific application window). Firefox does not support system audio capture at all. We detect these capabilities at runtime and show or hide the system audio toggle accordingly, so the UI never offers something the browser cannot deliver.

Draggable Webcam Bubble

We wanted the webcam bubble to be repositionable. The user should be able to drag it to any corner or edge of the preview before or during recording. Since the bubble's position on the preview needs to map exactly to its position in the final recording, we calculate the bubble's coordinates as percentages of the canvas dimensions rather than pixel values. This means the bubble position is resolution-independent and always lands in the right spot in the output file.

The drag interaction itself uses pointer events with a simple offset calculation to keep the bubble anchored to where the user grabbed it, preventing the annoying "jump to center" behavior that naive drag implementations often have.

Privacy by Architecture

Privacy was not an afterthought. It was a design constraint from the start. The entire recording pipeline runs in the browser's main thread and a compositing loop. No data is sent to any server at any point. There is no upload endpoint, no analytics on the video content, and no account system.

When the user clicks download, we create a Blob URL from the in-memory video data and trigger a download through an anchor element. The video goes straight from browser memory to the user's filesystem. When the user closes the tab, all data is gone.

This architecture also means we have zero infrastructure cost for the screen recorder. There are no video processing servers, no storage buckets, and no CDN bandwidth. It scales to a million users the same way it scales to one, because each user's browser does all the work.

Countdown and UX Polish

Small details matter for recording tools. We added a 3-2-1 countdown before the recording starts, giving the user time to switch windows or prepare their screen. Without it, the first few seconds of every recording would be the user fumbling to get to the right place.

We also built an instant preview that plays the recording back as soon as the user stops it. This lets people verify the content before downloading, which saves the frustrating cycle of record, download, open file, realize you missed something, and start over.

The recording controls float in a minimal toolbar that stays visible during recording without being distracting. The user can see the elapsed time, toggle the webcam and microphone, and stop the recording with a single click.

Browser Compatibility and Edge Cases

Browser compatibility is where things get messy. Chrome and Edge provide the most complete support for the APIs we use, including system audio capture and all screen sharing modes. Firefox supports screen capture and MediaRecorder but lacks system audio. Safari has limited and inconsistent support for getDisplayMedia, so we recommend Chrome for the best experience.

We also had to handle a surprising number of edge cases. What happens if the user revokes screen sharing permission mid-recording? The screen capture track fires an "ended" event, and we gracefully stop the recording and present whatever was captured up to that point. What if the webcam disconnects? We detect the lost track and continue recording without the overlay rather than crashing the entire session.

macOS adds another layer of complexity. Users need to grant Screen Recording permission at the OS level (System Settings, Privacy and Security, Screen Recording) in addition to the browser-level permission. If this permission is not granted, the browser returns a blank or black screen capture. We detect this scenario and show a clear message explaining what to do.

What We Learned

Building this tool reinforced a few things we already believed and taught us some new lessons.

First, browser APIs are more capable than most people realize. Five years ago, building a screen recorder with webcam compositing would have required a desktop application or at least a browser extension. Today, it works with vanilla web APIs and no dependencies.

Second, privacy-first architecture can also be the simplest architecture. By keeping everything local, we avoided building video processing pipelines, managing storage, handling uploads over flaky connections, and dealing with GDPR compliance for video data. The simplest solution was also the most private one.

Third, the Web Audio API is powerful but full of gotchas. Mixing audio streams, handling different sample rates, and dealing with browser-specific quirks in audio capture took more time than we expected.

The screen recorder now sits alongside our other free tools like the online dice roller, and it complements our core platform features for teams that need async communication alongside their real-time collaboration spaces. Whether your team uses Flat.social for a virtual calming room between intense work sessions or as a full virtual workplace, the screen recorder is there when you need to capture and share what is happening on your screen.

You can try the screen recorder for free. No download, no sign-up, no watermark.

Why Virtual Conferences Still Feel Broken (And What Actually Fixes Them)

typical pawel — Fri, 03 Apr 2026 14:44:34 +0000

Why Virtual Conferences Still Feel Broken (And What Actually Fixes Them)

Virtual events were supposed to democratize conferences. Anyone with a laptop and an internet connection could attend a keynote in San Francisco, a panel in London, or a networking session in Tokyo. No flights, no hotels, no $2,000 tickets.

Six years after the remote work boom, that promise is only half-delivered. The technology works. The experience doesn't.

Most virtual conferences still follow the same formula: a speaker shares their screen, attendees watch in silence, and the chat scrolls too fast for anyone to have a real conversation. It's a webinar with a fancier registration page. And attendees have noticed. Drop-off rates after the first session regularly hit 60-70%.

But the problem isn't virtual events themselves. It's the tools we're using to run them.

The Webinar Trap

Here's what typically happens when an organization decides to host a virtual conference. Someone on the events team opens Zoom or Microsoft Teams, because that's what the company already pays for. They schedule a series of meetings, call them "sessions," and add a shared Google Doc for networking.

It's understandable. If your team already knows how to use Microsoft Teams for daily standups, why learn a new platform for a quarterly conference? The learning curve is zero, the budget is zero, and IT won't push back.

The problem is that video conferencing tools and virtual conference platforms solve fundamentally different problems. Zoom is built for meetings. Structured, agenda-driven, one-conversation-at-a-time interactions. A conference is the opposite. It's dozens of conversations happening simultaneously. It's bumping into someone at the coffee station and discovering you're working on the same problem. It's ducking out of a session that isn't relevant and wandering into one that is.

When you force a conference into a video call, you strip out everything that makes conferences valuable and keep only the part people like least: sitting and watching.

What Changed in 2026

The virtual events market has matured significantly. A new generation of virtual conference platforms has emerged that treats online events as spatial experiences rather than video streams.

The biggest shift is spatial audio, technology where sound behaves like it does in a physical room. Walk your avatar closer to a group and their conversation gets louder. Step away and it fades. This single feature transforms the dynamics of a virtual event because it allows the thing that makes in-person conferences magic: spontaneous, unscheduled conversation.

Spatial chatting recreates the conference hallway. Instead of being locked in a breakout room with four strangers and an awkward countdown timer, attendees move freely through a virtual venue. They see clusters of people talking, walk over, listen in, and join if the topic interests them. It's the closest thing to a real conference floor that exists online.

The Remote Work Connection

This matters more than ever because of where work itself is heading. Research shows a fascinating remote work paradox: remote employees report higher productivity but lower sense of connection. They get more done in isolation, but they miss the serendipity of shared physical spaces.

Virtual conferences are one of the few opportunities to rebuild that serendipity at scale. When a distributed team of 200 people comes together in a spatial virtual venue for an annual summit, the hallway conversations and chance encounters that happen between sessions can strengthen working relationships for months afterward.

But this only works if the platform supports it. A day of back-to-back Zoom presentations doesn't build connection. It deepens the isolation.

Choosing the Right Tool for the Job

The good news is that organizations have real options now. The choice depends on what kind of event you're running and what outcome matters most.

For teams deciding between mainstream tools, understanding the tradeoffs is step one. The Google Meet vs. Zoom comparison is one most event planners start with, since these are the default options in most organizations. Both work well for standard meetings. Neither was designed for multi-track conferences with networking components.

For budget-conscious teams, there are strong free alternatives to Zoom that include features like breakout rooms and larger participant limits. These can work for smaller events, particularly internal team gatherings where the stakes are lower.

For educational institutions, the overlap between virtual conferences and online learning has produced specialized virtual classroom tools that handle both use cases. Teaching sessions with interactive elements, plus social spaces for student networking and collaboration.

And for organizations looking further ahead, metaverse and virtual world platforms are pushing the boundaries of what online gatherings can feel like. Persistent 3D environments where the line between "conference" and "community" starts to blur.

What Actually Matters

After attending dozens of virtual conferences across every platform category, the pattern is clear. The technology that makes the biggest difference isn't higher video resolution or better screen sharing. It's anything that gives attendees agency. The ability to move, choose, explore, and connect on their own terms.

The conferences people remember aren't the ones with the best keynotes. They're the ones where they met someone unexpected. Where a hallway conversation turned into a partnership, or a casual chat at a virtual booth led to their next job.

The next time you're planning a virtual event, don't start by asking "which video tool should we use?" Start by asking "what do we want attendees to do between sessions?" If the answer is "wait for the next talk," any platform will work. If the answer is "meet people, explore ideas, and build relationships," you need a tool that was designed for exactly that.

The technology exists. The question is whether we'll use it.

How I Built a Virtual Office Platform From Scratch With Claude, LiveKit, and Next.js

typical pawel — Thu, 02 Apr 2026 14:58:33 +0000

Picture this. You're on your third Zoom call before lunch. Someone shares their screen. Half the team is on mute. The other half has cameras off. The meeting could have been a Slack message, but here you are, staring at a grid of rectangles.

This is the moment that made me start building Flat.social. I wanted to create something that feels nothing like a video call. A spatial world where avatars walk around, conversations happen based on proximity, and remote teams actually feel like they're in the same room.

Flat.social is in beta right now, coming soon. I can't wait to show you what it looks like.

But first, the story of how one developer is building it.

Every Video Tool Has the Same Problem

Before writing a single line of code, I did my homework. I dug through Zoom pricing plans to understand what teams were paying for. I studied comparisons like Google Meet vs Zoom to see what people cared about. I tested a long list of free alternatives to Zoom to find what was missing.

The answer was always the same thing. Every tool optimized for structured meetings. None of them solved for the moments between meetings. The spontaneous conversation. The quick whiteboard sketch. The Friday afternoon hangout where people actually relax together.

That's the virtual workplace I set out to build. One where the informal stuff isn't an afterthought.

The Frontend: Next.js and shadcn/ui

Next.js was the natural pick. Half of Flat.social is a content-heavy marketing site with pages like our best internal communication tools roundup. The other half is a real-time interactive application with avatars, spatial audio, and live collaboration. Server components handle the first part. Client components handle the second. One framework, no compromises.

For the interface itself, I went with shadcn/ui. Full ownership of every component without starting from zero. Radix primitives underneath, Tailwind for styling, and a consistent system I could extend as the product grew.

That consistency paid off when I built the online brainstorming canvas. Teams can jump into a shared space and throw ideas around visually. Because shadcn gave me a solid design foundation from the start, building new features like this feels like adding rooms to a house instead of rebuilding the foundation every time.

Choosing LiveKit Over MediaSoup

If there's one decision that saved the entire project, it was switching from MediaSoup to LiveKit.

MediaSoup is powerful. It gives you raw control over WebRTC at the transport level. I started there and quickly found myself drowning in infrastructure work. Setting up the SFU. Handling codec negotiation. Debugging connectivity across firewalls and NATs. Weeks went by and I still didn't have reliable audio for more than a handful of users.

LiveKit compressed all of that into days. Their SDK gave me spatial audio capabilities without building the proximity mixing layer from scratch. In Flat.social, you hear people louder when your avatar is close to them and quieter as you walk away. That's the core experience. With MediaSoup, implementing that would have been a project in itself. With LiveKit, it was configuration on top of a solid foundation.

The real test comes at scale. When 50 people join a virtual happy hour the system needs to handle dozens of simultaneous audio streams intelligently. LiveKit's selective forwarding handles this without me managing media server clusters. For a solo builder, that tradeoff between control and velocity isn't even close.

Building With Claude

Here's the honest truth. A real-time collaborative platform has no business being built by one person. The surface area is massive. WebRTC. State synchronization. Canvas rendering. Avatar systems. Map editors. Auth. Payments. A multilingual content site.

Claude is the reason it's possible.

I don't use it to generate code blindly. I use it to think. When I was designing how real-time state should sync across clients, I talked through the architecture with Claude the way I would with a senior engineer. When I needed to build out use case pages for virtual team building activities or figure out how to position Flat.social as an internal communication tool, it helped me think through both the technical and strategic side.

Debugging is where it saves the most time. Real-time apps produce bugs that are painful to reproduce and harder to reason about. Race conditions. Stale state. Audio loops. Describing the problem to Claude and getting a structured analysis back is faster than staring at logs for hours.

Claude Code in the terminal takes it further. Refactoring across files, writing test coverage, scaffolding new API routes. Having an assistant that understands the full codebase and can reason about it means I'm not just faster. I'm able to take on work I would have skipped entirely as a solo developer.

Where This Is Going

The modern stack makes things possible that weren't five years ago. Next.js handles both the marketing and the app. shadcn/ui gives you a design system without a design team. LiveKit solves real-time media without a DevOps team. Claude fills the gap of not having a full engineering team.

None of that matters without a problem worth solving though. Remote teams don't need another meeting tool. They need a place. Somewhere to share a virtual office that feels real. Where brainstorming, team socials, and daily standups happen in the same space. Where you run into someone and start a conversation you didn't schedule.

That's Flat.social. It's in beta, and I can't wait to show you.

Small European Countries Update

typical pawel — Thu, 06 Jul 2023 16:27:43 +0000

The creation process of the smallest and most basic project that I have created continues.

Just added a number of pages with FAQs about different European countries.

Is your country missing?

Albania, Andorra,
Austria, Belarus,
Belgium,
Bosnia and Herzegovina,
Bulgaria,
Croatia, Cyprus,
Czech Republic,
Denmark, Estonia,
Finland, France,
Germany, Greece,
Hungary, Iceland,
Ireland, Italy,
Kosovo, Latvia,
Liechtenstein,
Lithuania,
Luxembourg,
Malta, Moldova,
Monaco,
Montenegro,
Netherlands,
North Macedonia,
Norway, Poland,
Portugal,
Romania, Russia,
San Marino,
Serbia, Slovakia,
Slovenia, Spain,
Sweden,
Switzerland,
Ukraine,
United Kingdom,
Vatican City.

Small European Country Experiment

typical pawel — Sat, 10 Jun 2023 16:53:43 +0000

After dabbling into language learning with glot.space, a tool for online meetups, I'm now experimenting with a website about a small european country

Can it become the top 1 result when people want to learn about what is the smallest european country? Let's see!

Metaverse? What what?

typical pawel — Sat, 04 Feb 2023 13:12:03 +0000

Since Facebook morphed into Meta, metaverse has been one of the most hyped-up technologies right after cryptocurrencies and NFTs. Many were left wondering - what is the hype all about? What is this metaverse exactly? Why are such big companies like Meta or Microsoft focusing on it so much?

Just like "social media" is a broad phrase that might differ when referencing various social media platforms, so is metaverse. It's a vague term that is still evolving and dependent on the use case, definitions might vary.

Find out more at Metaverse Resources (Apps, Articles, Games)

What are the use cases for flat.social's spatial audio & video tech?

typical pawel — Wed, 07 Dec 2022 13:53:56 +0000

Remote teams use flat.social to socialise, collaborate and throw virtual parties! Create a permanent meeting space where each guest can move around, talk with others in proximity and hide for gossip in private rooms. It’s fun, creative, unstructured and nourishes the connections between your team members. With a number of activities designed to bring your team together, flat.social can act both as a company event space and a permanent virtual office where your remote team can hang out, play and collaborate.

All Hands Meetings - Sometimes also called a town hall, an all-hands meeting is a regular company-wide meeting in which all leaders, stakeholders, and employees gather to discuss the most important topics within the organization.

Coffee Chats - Coffee chats are informal, unstructured meetings that help people to know each other better. As the name suggests, they would usually happen over a coffee but the choice of beverage is (usually) not restricted!

Daily Stand-ups - Daily stand-ups are strategic daily meetings that help to keep the team connected, informed, and on schedule.

Onboarding Remote Employees - Most of the communication happens in goal-oriented meetings that are scheduled ahead and are there to focus on the task. If a new employee would be to join a company with no physical office, he might get to know a couple of the colleagues that he is working directly with.

One-To-One Meetings - A one-to-one meeting (or 1:1 meeting) is a recurrent check-in between two people within your company.

Quick Catch-Ups - Most of the meetings are are scheduled with a goal-oriented objective in mind and have an agenda. Serendipitous quick catch-ups rarely have one - often they’re just normal conversations between people which arise spontaneously and the topic is dictated by the current context.

Virtual Break Room - A virtual break room is an online space that you deliberately set up for spontaneous interactions. It’s a permanent digital video-conferencing space that is always open and allows anyone from your organization to show up at any time to speak with other participants who are already over there.

Virtual Team Building - Create a permanent meeting space where each guest can move around, talk with others in proximity and hide for gossip in private rooms. It’s fun, creative, unstructured and nourishes the connections between your team members.

Virtual Workplace - A virtual workspace is a simulated office space that sports communication and collaboration tools that replicate the experience of a physical office space. It can act as a collaborative hub for teams that work remotely and don’t have physical HQ where they can meet in person daily.

Ideation Session - Ideation is a meeting during which the team generates solutions and ideas through a number of ideation techniques. Those include brainstorming, prototyping, the worst possible idea, and visual collaboration.

Online Brainstorming - Brainstorming is a method creative groups and companies use to create new ideas to come up with novel solutions to clearly defined problems.

Online Meetup - Meet-ups are social get togethers where participants with similar interests gather to discuss suggested topics

Virtual After Parties - As the name suggests, after party is the party that happens after a main event. During an after party the participants of the event might continue to network and meet others for more time. It’s an extension to the main event that is usually more casual and relaxed. After parties happen after conferences, concerts and all sorts of events that gather people together.

Virtual Happy Hours - Whether you're organising a weekly happy hours, fun lunch meeting or just want a space for your team to hang out in - we've got the tools you need to get started immediately.

Online Retrospective

Telegraph link

Small tools challenge

typical pawel — Sun, 20 Nov 2022 19:34:25 +0000

Hey all!

As you might've figured out from my older posts, I'm working on a video conferencing platform where everyone fly around - flat.social! It can be used as a fun alternative to Microsoft Teams or Gather Town

As a side challenge, I'm going to be building some very small but useful tools that will accompany the website. The first one that I have just released is a webcam test.

Coming up next are Free Zoom Background Creator, Free Microsoft Teams Background Creator, online planning poker and an online screen recorder. Also maybe one for Skype.

Which one should I pick up for next week? :)

Remote or back to the office? Think about the commute time.

typical pawel — Thu, 14 Jul 2022 21:38:48 +0000

Hey fellow devs!

It seems that more and more of us are delicately prompted to go back to the office. Most managers are justifying it by lack of spontaneous interactions (which can be easily tackled with by using flat.social for online socials as a zoom alternative), need of physical space for virtual socials and happy hours and problems with mentoring junior members.

Rarely though we take commute times into account. Assuming an average commute time of 90 minutes a day, in around a decade one will spend ~450 days of full-time work being a train passenger. That's 3600 hours.

Thinking long term, in 25 years this will amount to 9000 hours.

Want to calculate how many hours will you waste over a decade on commute? I just build a simple calculator alongside a blog post - Should my remote team be back in an office?

flat.social new beta release - looking for feedback :)

typical pawel — Sat, 19 Mar 2022 15:08:20 +0000

Hey everyone!

I just released a new version of flat.social - would love to hear what you think about it! It's a solo project that took me a couple months to build.

The frontend is built using Next.js + Pixi.js and the backend audio and video is powered mostly by Mediasoup with physics done with Matter.js.

flat.social is a playful video conferencing app where all guests can move around and talk with others who are in their proximity. Think remote socials, parties, permanent spaces and any online happenings where creating connections and networking is the main part of the agenda.  Some beta testers have also used it for remote education purposes.

Here is a demo: https://www.youtube.com/watch?v=UO3rN7sVn_A for the lazy ones :)

Landing page: https://flat.social

Features: https://flat.social/online-meeting-features

Fun feature update

typical pawel — Tue, 30 Nov 2021 14:59:47 +0000

Had too much coffee this morning and added a fun animated gesture feature to flat.social - a fun video conferencing app that utilises spatial audio & video to create an experience where attendees can move around and speak with others around them. The GIF with demo might load for a minute or two!

This work was done quite quickly - fortunately I found davidfig/pixi-ease on Github which made it much easier.

How does it work?

User selected a gesture on the keyboard (each key from 1->7 is bound to a different gesture).
App picks it up and sends an event via socket.io to the server. The server picks it up, figures out who sent it and informs everyone in the same room that a gesture has been emitted.
Gesture event with associated playerId comes back to all of the clients connected to the room.
Particular animation is triggered on the body of the player using pixi-ease.

Would love to know what you think! Maybe virtual gestures could be a cool addition to this new zoom alternative :)