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

Error Video Rendering When Video Element #17

Closed ivangusev closed 6 months ago

ivangusev commented 6 months ago

Do you have any idea why following error would occur (or at least how to debug):

[2023-12-12 18:17:15.010][error][SingleVideo<163,55>] [page] PageError: 
Error: Acquire video frame 0 timeout (30s)
    at <anonymous>:782:68 
    at file:///usr/src/app/node_modules/web-video-creator/core/Page.js:474:43
    at file:///usr/src/app/node_modules/puppeteer-core/lib/esm/third_party/mitt/mitt.js:1:242
    at Array.map (<anonymous>)
    at Object.emit (file:///usr/src/app/node_modules/puppeteer-core/lib/esm/third_party/mitt/mitt.js:1:226)
    at CdpPage.emit (file:///usr/src/app/node_modules/puppeteer-core/lib/esm/puppeteer/common/EventEmitter.js:85:23)
    at #addConsoleMessage (file:///usr/src/app/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/Page.js:665:14)
    at #onConsoleAPI (file:///usr/src/app/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/Page.js:612:32)
    at file:///usr/src/app/node_modules/puppeteer-core/lib/esm/third_party/mitt/mitt.js:1:242
    at Array.map (<anonymous>)
    at Object.emit (file:///usr/src/app/node_modules/puppeteer-core/lib/esm/third_party/mitt/mitt.js:1:226)

On my local machine all working fine, but not when deployed to cloud run. I serve page url like: http://localhost:8080/page.html

Vinlic commented 6 months ago

@ivangusev Oh... it means that the video decoder cannot get the 0 frame image, please provide the parameters you created the video instance and the source video file, I need to investigate the reason.

ivangusev commented 6 months ago

@Vinlic , i found the reason. In VideoCanvas.js in _createDecoder:

decoder.configure({
                        // 视频信息配置
                        ...config,
                        // 指示优先使用硬件加速解码
                        hardwareAcceleration: "prefer-hardware",
                        // 关闭延迟优化,让解码器批量处理解码,降低负载
                        optimizeForLatency: true
                    });

error is caused by hardwareAcceleration: "prefer-hardware"

Can you please make it optional, so i can control it through settings.

Also i think there is issue in reporting errors in this case, please take a look at this line:

if(decoder.state == "configured") {
            decoder.flush()
                .catch(err => err.message.indexOf("Aborted due to close") === -1 && err.message.indexOf("closed codec") === -1 ? console.error(err) : 0);
        }

If i replace it with console.log(err.message) then i get actual error: Unsupported configuration. Check isConfigSupported() prior to calling configure()

Vinlic commented 6 months ago

@ivangusev Thanks for looking into it, I'll get on to it as soon as possible! 🐱

Vinlic commented 6 months ago

@ivangusev Hi, sorry for the late update, I've been very busy the past two weeks and it's now updated in 0.0.33.

const video = wvc.createSingleVideo({
    ...
    videoDecoderHardwareAcceleration: "prefer-hardware"
});
ivangusev commented 6 months ago

@Vinlic , great, thanks a lot!