Vinlic / WebVideoCreator

🌈 A framework for rendering web animations into videos. It's implemented based on Node.js + Puppeteer + Chrome + FFmpeg, utilizing the latest browser APIs.
Apache License 2.0
137 stars 33 forks source link

How to make Screenshot #16

Closed ivangusev closed 11 months ago

ivangusev commented 11 months ago

Is it possible somehow to make screenshot of page without video rendering?

Is there a way to terminate video capturing in pagePrepareFn?

Vinlic commented 11 months ago

@ivangusev

There is no such function implemented yet, but there is a video cover image output function:

const video = wvc.createSingleVideo({
    ...,
    // Enable cover image capture
    coverCapture: true,
    // Time in milliseconds to capture the image (default is 20% of the video's duration)
    coverCaptureTime: 1000,
    // Image format for capture (jpg/png/bmp), default is jpg
    coverCaptureFormat: "jpg"
});

A way to interrupt video capture is on the list of planned features, probably in the next release 🐱 .

ivangusev commented 11 months ago

@Vinlic , yes i know for cover image, but it's not optimal Why following would not work:

pagePrepareFn: async function(page) {
  const _page = page.target;
  await _page.screenshot({ path: 'image.png' });
  // here to interrupt video capture
}
Vinlic commented 11 months ago

@ivangusev Because when the pagePrepareFn function is called, rendering has not yet started, and the screenshot function needs to start rendering before it can be obtained, they are deadlocked :D

Maybe you can try the following code, or wait for startup before taking a screenshot. You can wait for startup through the startAndWait() function.

pagePrepareFn: async function(page) {
  const _page = page.target;
  setTimeout(() => {
        _page.screenshot({ path: 'image.png' })
        .catch(err => console.error(err));
  }, 0)
}
ivangusev commented 11 months ago

@Vinlic ,

A way to interrupt video capture is on the list of planned features, probably in the next release 🐱 .

Still in plans?:)

Vinlic commented 11 months ago

@ivangusev Now you can interrupt the capture via video.abort() of the video instance or via captureCtx.abort() 😄 It is updated in version 0.0.34.

ivangusev commented 10 months ago

@Vinlic, hm... for some reason it doesn't work for me - no error, it simply continue to render full duration video

const video = wvc.createSingleVideo({
  ...
  pagePrepareFn: async function(page) {
    video.abort();