#8
Issues/vercel-labs/webreel/#8

WebReel Recording Fails - Chrome Frame Pipe Issue

Opensoham901opened 8mo ago

Chrome never sends frame data to FFmpeg's stdin pipe during recording.

What Happens

  1. ✅ Chrome launches and navigates to URL
  2. ✅ Steps execute successfully
  3. ✅ FFmpeg spawns and waits for input
  4. ❌ Chrome doesn't pipe frames to FFmpeg
  5. ❌ .mp4 file never created
  6. ❌ File rename fails

Environment

  • WebReel: 0.1.4
  • OS: Linux (Pop!_OS 22.04)
  • Node: Bun 1.2.10
  • Chrome: Google Chrome for Testing 146.0.7680.31
  • FFmpeg: 7.1.3

Reproduction

{
  "$schema": "https://webreel.dev/schema/v1.json",
  "outDir": "./videos",
  "defaultDelay": 500,
  "videos": {
    "my-video": {
      "url": "https://soham901-portfolio.vercel.app",
       "viewport": { "width": 1920, "height": 1080 },
       "steps": [
         { "action": "pause", "ms": 1000 }
       ]
    }
  }
}
bun install webreel
bunx webreel record

Notes

  • Chrome and FFmpeg work correctly when tested independently
  • FFmpeg process hangs waiting for stdin input (pipe:0)
  • No frames are captured in .webreel/raw/

Activity

3
Markus80008mo ago

Hey,

I installed webreel in a seperate docker container. On the first launch it installs ffmpeg and chrome-headless-shell.

During an execution via webreel record not a single frame is produced. The variable screenshotResult in file @webreel/core/src/recorder.ts L:184 will always be empty/none. The root cause is at L:154: const result = await Promise.race([promise, stopped]); waits forever...

Finally, the tool reports an IO error like cannot rename the file.

It seems that headless chrome cannot capture the data. Further, the following step (JSON) produced an eternal wait/blockage: { "action": "screenshot", "output": "scrnsht-001.png" },

I assume, it is related to the issue of not getting screenshot data.

Can you please ensure chrome-headless-shell scrapes data, even in docker?

MykalMachon7mo ago

Seeing the same issues across Windows and Linux when running this.

MykalMachon7mo ago

Found a fix after some noodling.

There are two flags that, when removed, fix this issue for me:

"--enable-begin-frame-control",
"--run-all-compositor-stages-before-draw",

They're set here.

From what I can tell in reading through the Chrome headless docs, if you're running with --enable-begin-frame-control, you need to call HeadlessExperimental.beginFrame() to advance rendering frame-by-frame. That method is not called anywhere in this repo, so Page.captureScreenshot() blocks indefinitely while waiting for a new frame.

I was able to get everything working by just removing those two flags and making no other changes 🤷 I will put in a PR if I get some time! I'm not sure how this was working as-is for anyone tbh. Maybe things work differently on Mac? I've tested on Linux and Windows.