I try to capture some animations from a website and stitch them together using ffmpeg. As far as I understand the docs startScreencast is the way to go.
If I understand that right I can start the screencast with
await Page.startScreencast({format: 'png', everyNthFrame: 1});
and listen to every incoming frame with
Page.screencastFrame(image =>{
const {data, metadata} = image;
console.log(metadata);
});
But it's never prints out something. So I assume it's not called.
I archived my goal with something like this:
let counter = 0;
while(counter < 500){
await Page.startScreencast({format: 'png', everyNthFrame: 1});
const {data, metadata} = await Page.screencastFrame();
console.log(metadata);
counter += 1;
}
Which feels like a non-performant hack.
So any suggestions on how to use startScreencast
and screencastFrame
properly?
Headless mode is a functionality that allows the execution of a full version of the latest Chrome browser while controlling it programmatically. It can be used on servers without dedicated graphics or display, meaning that it runs without its “head”, the Graphical User Interface (GUI).
To capture screenshot in the headless mode approach would be similar that we normally use to capture a screenshot. We can use Third party Utility like aShot or Shutterbug that we have already discussed in other blogs.
Headless mode allows running Chromium in a headless/server environment. Expected use cases include loading web pages, extracting metadata (e.g., the DOM) and generating bitmaps from page contents -- using all the modern web platform features provided by Chromium and Blink.
211. This version is released for Windows, Linux, Mac, iOS and android versions and has number of fixes and improvements. Chrome 59 Mac edition supports Headless Mode which is used for modern web automation testing as this mode works without graphical user interface.
Every received frame also has to be acknowledged.
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});
}
link to github issue for detailed explanation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With