実現したいこと
- 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
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/02 11:14
2023/05/02 11:19
2023/05/03 06:56