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 record nothing usable, or fall back to real video at a frame rate so low it's hard to follow.
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.
Pixeltrace is in development and not yet available. Join the waitlist for launch.