質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

FFmpeg

FFmpegは、動画と音声を交換できるフリーソフトウェアです。UNIX系OSから派生した、MS-DOSから操作するコマンドラインツールです。libavcodecやlibavformat、libswscale、libavfilterなどを含みます。ライセンスは、コンパイルの際のオプションによりLGPLもしくはGPLに決定されます。対応コーデックや使用できるオプションが多く、幅広く利用されています。

Q&A

2回答

1205閲覧

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

zuisho

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

FFmpeg

FFmpegは、動画と音声を交換できるフリーソフトウェアです。UNIX系OSから派生した、MS-DOSから操作するコマンドラインツールです。libavcodecやlibavformat、libswscale、libavfilterなどを含みます。ライセンスは、コンパイルの際のオプションによりLGPLもしくはGPLに決定されます。対応コーデックや使用できるオプションが多く、幅広く利用されています。

0グッド

0クリップ

投稿2023/05/02 10:49

実現したいこと

  • 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

キャプチャが目的ならMacならQuickTime Player 、windowsならWindowsキー+Gでキャプチャツールが立ち上がります

投稿2023/05/02 11:12

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zuisho

2023/05/02 11:14

回答ありがとうございます。 今回は、サーバー側で動作するアプリケーションにしたいので、手元の端末で動くだけでは要件を満たさないということになります。 わざわざご回答いただいたのに、要件が細かくてすいません。
yambejp

2023/05/02 11:19

サーバーベースだとヘッドレスchromeとnodeのChromyライブラリとか色々紹介があがってますね
zuisho

2023/05/03 06:56

ありがとうございます! pupeteer でだめだったので、おそらくそこの問題ではないのではと考えていますが、 chromy でも試してみようと思います。 ありがとうございました!!
guest

0

Playwrightでwebm録画してFFmpegで変換はどうでしょう。

投稿2023/05/02 11:03

pippi19

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zuisho

2023/05/03 06:58

こちら、やってみたのですが、ロード状態から撮影してしまうようでそのまま綺麗な動画にするようなものは難しそうでした。 でも、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問