How to use FFMPEG to capture a browser's tab content

Question

I'm working on a project where I need to record HTML5 animations that are going to play in different browser's tabs.

So I've been reading a bit, and apparently it could be done using FFMPEG, maybe using the gdigrab device: https://www.ffmpeg.org/ffmpeg-devices.html#gdigrab

Where you can even grab from a specific window (like record calc.exe using title=Calculator)

I want to use this logic to capture each of the multiple browser tabs contents. (or at least one) But I don't know the Firefox/Chrome tabs "title" or if they even work as windows.

I'd also need to record audio, so I would need to either mix the computer's output device with the video from the tab.

If anyone has more information on how I could do this, I would greatly appreciate it.

Thanks,

Answer 1

Tabs are within the browser's application logic so I don't think you can target a tab. If you detach the tab as a separate window, you can capture it. You need the string that shows up in Task Manager. This is the Window Title.

First run tasklist /v /fi "imagename eq firefox.exe" /fo list | findstr Window

This will produce a set of lines of all the separate windows controlled by firefox.exe

Suppose you wanted to capture this current page, the findstr output would be

Window Title: firefox - How to use FFMPEG to capture a browser's tab content - Stack Overflow - Mozilla Firefox

Then run

ffmpeg -f gdigrab -i title="firefox - How to use FFMPEG to capture a browser's tab content - Stack Overflow - Mozilla Firefox" -pix_fmt yuv420p tabgrab.mp4

You can move the window while recording but if you resize it, the recording will end at that point. If there are other tabs in that window, and you switch to them, they will get captured. So, best to isolate the desired tab into its own window.

For audio, you will need to use a directshow input device. See docs and the examples on how to list them.