RecordRTC & WebXR AR records black screen

Questions
1

Does anyone know why RecordRTC & webXR AR would record a black screen. If I run the same record code with XR disabled recording/saving the video works fine. I am using the RecordCanvas feature. Thanks.

Chrome83 + Android Pixel.

2

Can you at least the current contents of the canvas as a screenshot? Check out the following topic for more information: Converting canvas to image doesn't work

3 
var canvas = document.getElementById(CANVAS_ID);

            canvas.toBlob((blob) => {

                console.log(blob);

                mydebug("image blobsize: "+blob.size);

                uploadBlob(blob, nuid, "image");

           });

This works fine for typical threejs scene but is a clear image when XR is enabled.

4

@Mugen87 any ideas on this one? just generally why canvas may not be captured in XR AR?

5

When presenting, WebGL renders to different framebuffers and not to the default one connected to your computer screen. It seems you need the following approach so the default canvas is updated and thus usable for screenshots:

6

Thanks. That’s pretty wild but def looks helpful.

Do you have a sense how to maintain performance given that I never need to see the canvas that will be captured?

I’m trying to do it in AR not VR.

7

Sorry, I have never tried this out. But I guess you just need to render to the default framebuffer once for a single screenshot. So as long as no screenshots are taken, performance should not be affected.

8 
          // Bind the WebGL context's default framebuffer, so that the rendered
      // content shows up in the canvas element.
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);

      // Clear the framebuffer
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

I’m seeing this here but can’t say I am really understanding it. Is it possible you can share some code in threejs realm that might help RecordRTC or canvas.toBlob return the correct canvas data?