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
94 stars 26 forks source link

希望在录制的过程中,操作 DOM(如滚动页面) #7

Closed jiangyijie27 closed 7 months ago

jiangyijie27 commented 7 months ago

看到 pagePrepareFn 能在启动渲染前操作页面,希望可以在比如录制到 x 秒时,执行一个元素的 scroll,然后接着录。

Vinlic commented 7 months ago

@jiangyijie27 这也许可以是一个动作序列,不错的idea,我会评估一下可行性 💡

Vinlic commented 7 months ago

@jiangyijie27 我们将会把功能集成在0.0.27版本发布,预计在这两天,这是demo:

const video = wvc.createSingleVideo({
        width: 1080,
        height: 1280,
        fps: 60,
        outputPath: "./t2.mp4",
        showProgress: true,
        url: "https://www.bilibili.com/v/popular/all/?spm_id_from=333.1007.0.0",
        timeActions: {
            3000: async (page) => {
                const _page = page.target;
                await _page.evaluate(() => {
                    window.scrollTo({
                        top: 1280,
                        behavior: "smooth"
                    });  
                });
            },
            6000: async (page) => {
                const _page = page.target;
                await _page.evaluate(() => {
                    window.scrollTo({
                        top: 2560,
                        behavior: "smooth"
                    });  
                });
            },
            9000: async (page) => {
                const _page = page.target;
                await _page.evaluate(() => {
                    window.scrollTo({
                        top: 3840,
                        behavior: "smooth"
                    });  
                });
            }
        },
        duration: 10000
    });

https://github.com/Vinlic/WebVideoCreator/assets/20235341/05c9aa6d-f54c-4793-a16a-58dfaad71bea