Hide elements from the capture image

🧑‍💻 Technical Support
1

I am trying to remove a-frame elements from the capture image, so that they are visible during normal interaction but hidden from the capture image screenshot.

I have a capture button that works, and implemented this code in my app.js which is close but not quite there. It removes the elements after you click the capture button, but they are still visible in the first screenshot.


// Add a listener for xrextrasloaded
const captureEdit = () => {
  // add image to captured media
  XRExtras.MediaRecorder.configure({
    onProcessFrame: ({ctx}) => {
     
      // remove hotspot element
      const hotspot = document.getElementById('hotspot')
      hotspot.setAttribute('visible', false)
    },
  })
}
const onxrextrasloaded = () => {
  captureEdit()
}
window.XRExtras ? onxrextrasloaded() : window.addEventListener('xrextrasloaded', onxrextrasloaded)
2

Welcome to the forums!

Consider hiding the element before calling captureEdit. This way, the flow becomes: hide the element first, and then capture the image.

3

Thank you for the suggestion! However, it is important that the element is visible at all times, except in the capture image. It is a hotspot for a description, so it is functional for the experience but not nice in the picture for sharing.

4

If I remember correctly, the screenshot button from xrextras creates a white flash when taking a picture. You could try hiding the element during the flash and then making it visible again just before the flash ends. I haven’t tested this, but if the timing is right, the element disappearing should be unnoticeable.

5

What is the function triggered when the image is captured? What I have in the example above ‘onProcessFrame’ is triggered after the image is captured. I do not know how to configure the capture function as the white flash is created.

6

Take a look at the documentation here. Although the onProcessFrame function isn’t listed, there are other events you can hook into that might be helpful.

If you’re looking to control the capture function timing (such as triggering it alongside the white flash), you might consider exploring the XRExtras media recorder source code, which is available online. Modifying it could give you more flexibility for your specific requirements.