web-dev-qa-db-ja.com

ヘッドレスchromeスクリーンビデオまたはアニメーションをキャプチャする

私はウェブサイトからいくつかのアニメーションをキャプチャし、ffmpegを使用してそれらをつなぎ合わせようとしています。私がドキュメントを理解している限り startScreencast が進むべき道です。

その権利を理解していれば、スクリーンキャストを開始できます

await Page.startScreencast({format: 'png', everyNthFrame: 1});

そしてすべての着信フレームを

Page.screencastFrame(image =>{
  const {data, metadata} = image;
  console.log(metadata);
});

しかし、それは決して何かを印刷することはありません。だから私はそれが呼ばれていないと思います。

私は次のようなもので私の目標をアーカイブしました：

let counter = 0;
while(counter < 500){
  await Page.startScreencast({format: 'png', everyNthFrame: 1});
  const {data, metadata} = await Page.screencastFrame();
  console.log(metadata);
  counter += 1;
}

これは、パフォーマンスの低いハックのように感じます。では、startScreencastとscreencastFrameを適切に使用する方法について何か提案はありますか？

google-chromevideoffmpegscreen-captureheadless
9
t_io

受信したすべてのフレームも確認応答する必要があります。

    await Page.navigate({url: 'http://www.goodboydigital.com/pixijs/examples/12-2/'});
    await Page.loadEventFired();
    await Page.startScreencast({format: 'png', everyNthFrame: 1});

    let counter = 0;
    while(counter < 100){
      const {data, metadata, sessionId} = await Page.screencastFrame();
      console.log(metadata);
      await Page.screencastFrameAck({sessionId: sessionId});
    }

詳細な説明については、 github issue へのリンクを参照してください。

8
t_io

私も同じ問題を抱えていました。最初のフレームイベントが受信される前にプロセスが終了したため、何も出力されませんでした。これは私には理にかなっています。プロセスを少なくとも5秒間存続させることで、問題を解決しました。

これは私のために働いた：

await Page.startScreencast({
  format: 'png',
  everyNthFrame: 1,
});

Page.screencastFrame(image => {
  const {data, metadata, sessionId} = image;
  console.log(metadata);
  Page.screencastFrameAck({sessionId: sessionId});
});

await new Promise(r => setTimeout(r, 5000)); // wait 5 seconds

このように、ループは必要ありません。

すべてのフレームを確認しなくても、私にとってはうまくいったことに注意してください。

私のマシンではフレームレートがかなり低くなっています（chrome 60 FPSでレンダリングしているにもかかわらず〜10fps）。実際に異なるコンテンツを持つすべてのフレームのみを送信する可能性があります。

0
nikeee