Can this create a video with a transparent background?

[shaynet10]

This package simply uses Chrome's API to create screenshots And uses FFMPEG to create a video from the created screenshots. if you find a way to make the video with transparent background please let me know. Currently I don't know how to do so, and it will be something interesting to learn. You can edit the created screenshots manually with transparent background, and try using FFMPEG to attach them together to a video.

Will love to hear from you if you find something that does that. Currently I don't know about any way to create such a video.

[cyperdark]

for this you need to edit 2 files:

1. node_modules\puppeteer-video-recorder\index.js

   get defaultFFMpegCommand() {
   const { imagesFilename, videoFilename } = this.fsHandler;
   return [
       'ffmpeg',
       '-f concat',
       '-safe 0',
       '-r 90',
       `-i ${imagesFilename}`,
       '-r 90',
       '-c:v libvpx-vp9',
       '-pix_fmt yuva420p',
       videoFilename
   ].join(' ');
   }

2. node_modules\puppeteer-mass-screenshots\index.js

   async start(options = {}) {
   const startOptions = {
       format: 'png',
       quality: 100,
       maxWidth: 1920,
       maxHeight: 1080,
       everyNthFrame: 1,
       ...options
   };
   
   this.client.send('Emulation.setDefaultBackgroundColorOverride', { color: { r: 0, g: 0, b: 0, a: 0 } })
   
   return this.client.send('Page.startScreencast', startOptions);
   }

[cyperdark]

also if webm transparency not working in premiere pro or other programs, try to use this instead in node_modules\puppeteer-video-recorder\index.js

get defaultFFMpegCommand() {
    const { imagesFilename, videoFilename } = this.fsHandler;
    return [
        'C:/ffmpeg/bin/ffmpeg.exe',
        '-f concat',
        '-safe 0',
        '-r 90',
        `-i ${imagesFilename}`,
        '-r 90',
        '-c:v prores_ks -qscale:v 62 -pix_fmt argb',
        videoFilename
    ].join(' ');
}

and then change output format to .mov in node_modules\puppeteer-video-recorder\handlers\FsHandler.js