A method for capturing both UI and AR elements

🧑‍💻 Technical Support
1

Hi guys! I am looking for a way to capture screenshots of both the UI elements and the AR elements that are displayed on the screen. The current 8thwall Capture features only capture screenshots of the ArElements, not the UI elements.

image
image592×1005 39.8 KB

2

Captured Screenshot

my-project-capture-083020
my-project-capture-083020573×960 52.1 KB

3

I think you should refer to this project.

The way I do it is to draw the objects to the canvas.

XRExtras.MediaRecorder.configure({
    onProcessFrame: ({ctx}) => {
    

      // add a photo frame
      const img = document.getElementById('frame')
      ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, ctx.canvas.width, ctx.canvas.height)
       ...
       ...
       ...

    },
  })
2 Likes