WebVideoCreator icon indicating copy to clipboard operation
WebVideoCreator copied to clipboard

How to record 4k or highest quality possible?

Open Catsvilles opened this issue 1 year ago • 1 comments

Hi, very cool library but I'm having some issues when trying to record Canvas animations, the quality is not so good, and when setting 4k width and height, then I get problems with the image not being scaled properly, I think we need to change deviceScaleFactor accordingly. Anyway, would be cool to get some ideas for getting highest quality possible. :)

My settings:

const video = wvc.createSingleVideo({ // 需要渲染的页面地址 url: "http://localhost:5173/scapes/10", // width: 4096, // // 视频高度 // height: 2160, width: 4096, // 视频高度 height: 2160, // 视频帧率 fps: 60, // 视频时长 duration: 10000, frameQuality: 100, frameFormat: "jpeg", videoQuality: 100, // videoBitrate: "16000k", // 视频输出路径 outputPath: "./test.mp4", // 是否在cli显示进度条,默认是不显示 showProgress: true, // pagePrepareFn: async page => { // // Get the puppeteer Page object // const _page = page.target; // // Click the button // await _page.setViewport({width: 1920 * 2, height: 1080 * 2, deviceScaleFactor: 3}); // } });

Catsvilles avatar Mar 22 '24 13:03 Catsvilles

same question,do you have some answer?^_^

LittleWhite-Hai avatar Jun 20 '24 16:06 LittleWhite-Hai