Screenshot Doesn't Include UI Elements

[GeorgeButler]

Updating your screenshot code to the following worked:

function takeScreenshot() {
  // Find the canvas used for rendering the 3D scene
  const {XR8} = window as any
  XR8.addCameraPipelineModule(XR8.canvasScreenshot().cameraPipelineModule())
  XR8.canvasScreenshot().takeScreenshot().then(
    (data) => {
      // myImage is an <img> HTML element
      let image = document.getElementById('myImage') as HTMLImageElement
      if (!image) {
        image = document.createElement('img')
        image.id = 'myImage'
        // image.style.display = 'none'
        image.style.position = 'absolute'  // Ensure it's positioned absolutely
        image.style.zIndex = '100'  // Set the z-index value
        image.style.left = '0'
        image.style.top = '0'
        image.style.width = '50%'
        image.style.height = '50%'
      }
      image.src = `data:image/jpeg;base64,${data}`
      document.body.appendChild(image)

      const link = document.createElement('a')
      link.href = `data:image/jpeg;base64,${data}`
      link.download = 'screenshot.png'
      link.click()
    },
    (error) => {
      console.log(error)
      // Handle screenshot error.
    }
  )
}

I changed the styling + moved the XR8 definition to be inside the screenshot function so it’s more likely it’ll be on the window by the time the function is called.