Create screenshot using render target, and report an error on iOS “Can't find variable:OffscreenCanvas”

Bugs
,
1

hi, I use babylon tools api to generate screenshot from Render Scenes To .png Files | Babylon.js Documentation

when I CreateScreenshotUsingRenderTarget, it can always produce screenshots normally
6151693963445_.pic

But when I use CreateScreenshotAsync, sometimes it can be generated normally, but there is also a probability of exceptions as follows
6161693964084_.pic
6131693963380_.pic

I don’t understand why there are these differences, but in order to achieve functionality, I chose to use CreateScreenshotUsingRenderTarget for generation. However, I encountered a problem, which is that it cannot run properly on iOS because it uses offscreencanvas for generation. Older versions of iOS do not support offscreencanvas. Looking at the code where the error occurred, would it be better to include error capture in offscreencanvas initialization?

6111693922077_.pic
6111693922077_.pic2202×200 40 KB

6121693922638_.pic
6121693922638_.pic2264×1178 225 KB

babylon version is 6.19.1

2

You’re right, here’s a fix for browsers that don’t support OffscreenCanvas at all:

3

Thanks you so much ~

4

After I copy these changes in your PR to my local Babylon, this error was solved. But the image captured was all black. And it’s also only on the phone that not support OffscreenCanvas.

And I have tried both CreateScreenshotUsingRenderTargetAsync and CreateScreenshotAsync

Is it related to Create screenshot generate blank/black image - #11 by mimeeq3d_neal ? But in newer phones, it works.

5

Maybe it’s a timing problem and the mesh/materials are not not ready yet when you take the screenshot.

Try to wrap the call to the screenshot function in a window.setTimeout(() => { ...<do screenshot>... }, 5000) and see if that helps.

6

Thanks for your answer. But I think it’s not a timing problem. I take a screenshot when I manually click the button. Even after waiting several minutes, it’s still not working. I also tried your code, adding setTimeout, not work… :sob:

I wonder if there are some changes about the screenshot function about the compatibility problem. And I missed them in my path for my local Babylon package.

Appreciate you help!

7

If you are able to repro the problem in the Playground, we can try to find the problem.

8

This issue occurs because older versions of iOS Safari do not support OffscreenCanvas, while Babylon.js may still try to use it internally when generating screenshots using render targets. When that happens, it leads to the error “Can’t find variable: OffscreenCanvas.”

On some devices everything works fine, but on older iOS versions it can fail depending on which rendering path is chosen at runtime.

To avoid this problem, it is better to use the regular screenshot method instead of the render-target approach on iOS, as it is more stable and widely compatible. If an external solution is acceptable, services such as this Screenshot API. It can also be considered for capturing screenshots outside the device environment.