You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I tried a scene with one Image, one FFmpegVideo and some text - only the Image and text got rendered
From testing, I have confirmed that ffmpeg is not returning white frames
There are never any white frames returned from the canvas's ctx.getImageData()
when adding a border to the canvas or image, the border does not show in the screenshot when the issue is triggered, so the html element is really not rendered yet at the time of screeshot
also converting canvas to canvas.dataURL() and setting on src on img yields the same sporadic issue
multiple setTimeout(..., 0) and multiple requestAnimationFrame does not help. (or multiple awaitDomRenderSettled)
png seems to produce more frequently than raw (maybe due to higher CPU usage)
captureType screenshot can reproduce it but screencast seems to reproduce even more often
Tends to happen at the first frame after puppeteer boots up (on the first frame of some random part when multiple parts), maybe due to high CPU
Workarounds
setTimeout(500) or page.waitForNetworkIdle (which I think also waits for 500ms) will workaround this issue but it's a hack because it's not real synchronisation and may in theory fail some time.
Render the first frame of each part twice and check if equal, or just always render first frame of each part twice
awaitnewPromise((resolve,reject)=>{constobserver=newIntersectionObserver((entries)=>{if(entries[0].isIntersecting){// el is visibleresolve();}else{// el is not visiblereject(newError('invis'));}});observer.observe(imgRef.current);})
awaitnewPromise((resolve,reject)=>{lettimeout2;consttimeout=setTimeout(()=>{clearTimeout(timeout2);reject(newError('Image never completed'));},10000);functioncheckComplete(){if(imgRef.current.complete&&imgRef.current.naturalWidth>){clearTimeout(timeout);resolve();return;}timeout2=setTimeout(checkComplete,100);}checkComplete();});
Update: The img bug was due to broken ffmpeg node.js stream code. After fixing that bug, I have not seen this bug again when using images instead of canvas. Because canvas is no longer used by default I'm closing this.
Sometimes
screenshot
will take a screenshot before canvas/image has finished rendering.Observations/testing:
canvas
orimg
(typepng
orraw
), which are sourced from the ffmpeg data:reactive-video/packages/frontend/src/components/FFmpegVideo.js
Line 39 in 65a1936
Image
, oneFFmpegVideo
and some text - only theImage
and text got renderedcanvas.dataURL()
and setting on src on img yields the same sporadic issuesetTimeout(..., 0)
and multiplerequestAnimationFrame
does not help. (or multipleawaitDomRenderSettled
)png
seems to produce more frequently thanraw
(maybe due to higher CPU usage)screenshot
can reproduce it butscreencast
seems to reproduce even more oftenWorkarounds
setTimeout(500)
orpage.waitForNetworkIdle
(which I think also waits for 500ms) will workaround this issue but it's a hack because it's not real synchronisation and may in theory fail some time.Alternatives
Doesn't work
HeadlessExperimental frame control
Not tried
ReactDOM.render(element, container[, callback])
https://reactjs.org/docs/react-dom.html#renderLinks
Possibly related
The text was updated successfully, but these errors were encountered: