How to recover after webgl context is lost

[satoren]

Have I written custom code (as opposed to using a stock example script provided in MediaPipe)

None

OS Platform and Distribution

All

MediaPipe Tasks SDK version

@mediapipe/tasks-vision@0.10.4

Task name (e.g. Image classification, Gesture recognition etc.)

Image Segmentation, FaceDetector.

Programming Language and version (e.g. C++, Python, Java)

Javascript

Describe the actual behavior

The only way to recover after webglcontext is lost is to reload the page

Describe the expected behaviour

I would like to know if there is any way to recover other than reloading the page.

Standalone code/steps you may have used to try to get what you need

1. open demo page https://mediapipe-studio.webapps.google.com/studio/demo/face_detector
2. access to `chrome://gpuclean/`
3. The only way to recover is to reload the page

Other info / Complete Logs

No response

[tyrmullen]

You can tap into the webglcontextlost and webglcontextrestored events on the canvas. The context itself is effectively gone, so the MediaPipe Solution will likely be unable to continue as-is, but you don't need to go quite as far as reloading the page-- I'd think you should be able to get by with simply recreating the Solution. So, in short, try using the canvas's webglcontextlost so you can stop using Solution calls immediately, and then use webglcontextrestored to know when you can remake the Solution and start using the new one.

Key detail: I think you will also need to call event.preventDefault() inside your webglcontextlost event handler in order to tell the browser to try to restore the context.

Also, in case it helps for debugging, there's a WebGL2 extension which can let you force a context loss and a context restore programmatically, so that may be useful for testing this sort of thing more extensively.

Ideally this is something we'd be able to at least somewhat handle automatically within MediaPipe Solutions in the future, but until we do, hopefully the above advice can help!

[satoren]

Thank you for advice. I tried various things and it seemed to work. https://codepen.io/satoren/pen/GRPpBay?editors=0011

I don't know why, but even if I call event.preventDefault(), I still couldn't create an ImageBitmap from the webgl canvas, so it didn't work unless I recreated the canvas.

I have a question about recreating tasks. Every time I create a task, the script tag is inserted and it doesn't decrease.Is this a problem? The memory used appears to be slowly increasing.

[kuaashish]

Hello @tyrmullen,

Could you please again look into this issue. Thank you