Why recording Flutter web is different
Recording Flutter web is different because most "screen recording" for the web is not video at all. It is DOM serialization replayed as a re-render, and Flutter paints to a canvas with no DOM to serialize.
That DOM-serialization technique is why typical web recording is so lightweight, but it depends entirely on there being a DOM. Many such recorders are built on rrweb, an open-source DOM-recording library.
The reason is how Flutter web renders. It does not draw your interface to the DOM. With the CanvasKit renderer (a WebAssembly build of Google’s Skia graphics engine, and the production default for most Flutter web apps) and the newer Skwasm renderer, Flutter paints the entire UI as pixels onto one HTML canvas element. To the browser, and to any tool that reads the DOM, your app is a single opaque rectangle. No buttons, no text nodes, nothing to attach to.
With Flutter painting to a canvas, the DOM-serialization trick has nothing to capture. So tools either record nothing usable, or fall back to real video at a frame rate so low it's hard to follow, because each frame has to be read back from the GPU to the CPU on the main thread before it can be encoded.
There is also a privacy catch worth flagging. DOM-based tools mask sensitive fields by selecting the elements to redact (a CSS class, a selector, an attribute). On a Flutter canvas there are no such elements, so even when one of these tools does manage a low-framerate video capture of the canvas, none of them can mask anything inside it. Every tool in this space documents that canvas content cannot be masked. Anything Flutter painted (passwords, payment details, personal data) is recorded in the clear, which is a real concern for GDPR, HIPAA, PCI, and similar obligations.
Recording frames without killing performance
Capturing the rendered frames is the right approach for Flutter, but it has to be done carefully. Grab and encode every frame on the main thread and you'll blow your frame budget. A smooth app turns to stutter.
The goal is off-main-thread, GPU-accelerated encoding, so capture stays out of the way and the app keeps running near native speed while recording. Think up to 60fps, not the handful of frames per second a naive recorder manages.
Flutter screen recording with Pixeltrace
Pixeltrace records the frames your Flutter web app draws, with capture designed to stay inside your frame budget. You get watchable, frame-accurate recordings of real user sessions instead of a blank box or a slideshow.
It also masks on canvas, which a raw video capture can't: mark sensitive widgets in your Flutter tree and Pixeltrace redacts those regions at capture time, on-device, so personal data never makes it into the recording.
Pixeltrace is in development and not yet available. Join the waitlist for launch.