HTML/CSS/JS のアニメーションをそのままmp4の動画にする方法

実現したいこと

• HTML/CSS/JavaScript　で作ったアニメーションをそのままmp4の動画にしたい。
• アニメーションの速度をWeb上の実際の速度に維持したまま動画にしたい。

前提

サーバーで動作する動画制作のアプリケーションを作成しており、CSSやJSで作ったアニメーションをそのまま動画にしたいです。

canvas ではCSSなどのアニメーションを適用できないので、DOM要素に対して画像やテキストなどを配置し、それを指定した範囲（1920*1080 など）でキャプチャし、動画化したいです。

様々な方法を調べていますがなかなかうまく行かず、良い方法がないか、教えていただきたいです。

バックエンドの言語は Node.js および Python を試しています。

発生している問題・エラーメッセージ

まず最初は、スクリーンレコードを試しましたが、撮影範囲の指定がうまく行かず、タブなどやブックマークバーを巻き込んでしまいきれいに取れなさそうでした。

次に、MediaDevices.getDisplayMedia() を試しましたが、こちらも画面全体を取ってしまいうまく行きませんでした。

その後、MediaStream Recording API　を試しましたが、canvas や video 要素しか stream に送れないようでした。

次に、pupeteer を使って特定のWebサイト（またはHTML）にアクセスし、スクリーンショットを指定したfpsで撮影し、それをffmpegで動画化する仕組みを作り、動画自体はできましたが、動画上のアニメーションのスピードがのWeb上のスピードよりもかなり速くなってしまいました。

ほぼ同様の仕組みを持つtimesnap でも試しましたが、以下の issue の通り、同様の状態になってしまいます。
https://github.com/tungs/timesnap/issues/76

該当のソースコード

timesnap を試したときのコードがこれです。（issue のものと同様。）

javascript

1const generateVideo = async (videoPath, url, selector, duration = 15, width = 1920, height = 1080, fps = 30,2 frameDir = 'frames', framePattern = "image%04d.png") => {3 4 console.log(`*will create ${videoPath} by ${selector} of ${url}`);5 6 console.log("*will screenshot with timesnap");7 await timesnap({8 url,9 viewport: {10 width, height 11 },12 selector,13 14 width, height,15 16 fps,17 duration,18 outputDirectory: frameDir,19 outputPattern: framePattern 20 });21 22 console.log("*finish screenshot");23 24 25 console.log("*img to video with ffmpeg");26 27 const command = `ffmpeg -y -r ${fps} -i ${frameDir}/${framePattern} -c:v libx264 -vf "fps=30,format=yuv420p" ${videoPath}`;28 29 try {30 await executeFFmpegCommand(command);31 console.log("*finish img to video");32 } catch(err) {33 console.error(`***Failed to execute FFmpeg command: ${err}`);34 }35 36 console.log("*cleaning up screenshots");37 // cleanDirFiles(frameDir);38 39 console.log("*finish all process");40 41}

試したこと

上記、様々なことを試しています。
他、remotion ( https://www.remotion.dev/ )もありますが、完全フリーなライセンスでないことが気になっています。

補足情報（FW/ツールのバージョンなど）

OS: macOS Ventra 13.2.1、Intel Core i5 (Mac book pro)
Node: v18.12.0
Python: v3.10.7