[Python] How to use browser-use to make screenshots for each step and video recording for the...

I am trying to build a python project that uses browser-use to perform tasks, and create video recording for the whole session and screenshots for each step.

But I can't find a way to do it. The official doc did provide some suggestions but those configurations didn't allow me to create those recordings & screenshots after completing the config.

Here's the current setup of my browser.

from browser_use import Agent, BrowserContext, BrowserProfile, BrowserSession

recordings_dir = os.path.join(temp_dir, 'recordings')

# Configure the browser session
browser_session = BrowserSession(
headless=False,
viewport={'width': 1920, 'height': 1080},
disable_web_security=True,
ignore_https_errors=True,
disable_features=['VizDisplayCompositor'],
)

# Define the browser profile with recording settings
browser_profile = BrowserProfile(
record_video_dir=recording_dir,
record_video_size={'width': 1920, 'height': 1080},
save_recording_path=recording_dir,
deterministic_rendering=True,
disable_images=False,
disable_javascript=False,
disable_animations=True,
page_load_timeout=15000,
)

# Set up the browser context with video recording settings
browser_context = BrowserContext(
enable_recording=True,
recordings_dir=recording_dir,
# record_video_dir=recording_dir,
# record_video_size={'width': 1920, 'height': 1080},
viewport={'width': 1920, 'height': 1080},
)

self.agent = Agent(
task="Browser automation task with screenshot and video capture",
llm=llm,
browser_session=browser_session,
browser_profile=browser_profile,
browser_context=browser_context
)


And I wish it can take a screenshot at each step, and make a video recording for the whole session.

The doc says that it will start recording as long as the record_video_dir and record_video_size are provided. But it seems is is not the case.

I did see both the "screenshots" and the "video_recording" field exists, but both are empty.

I have also checked this question, but it is playwright specific and I don't think it can be applied directly to browser-use.

I also tried this doc, but the "video" attribute is not provided by the browser-use.

I can see that the functionality has been done by the official web-ui repo but I can't find how exactly it achieved that.

Continue reading...