# A method for capturing both UI and AR elements

**URL:** <https://forum.8thwall.com/t/a-method-for-capturing-both-ui-and-ar-elements/1087>\
**Category:** Technical Support\
**Created:** [April 15, 2024, 3:16am UTC](https://forum.8thwall.com/t/a-method-for-capturing-both-ui-and-ar-elements/1087 "2024-04-15T03:16:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DEV\_MS](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@DEV\_MS](https://forum.8thwall.com/u/DEV_MS)\
**Post date:** [April 15, 2024, 3:16am UTC](https://forum.8thwall.com/t/a-method-for-capturing-both-ui-and-ar-elements/1087/1 "2024-04-15T03:16:08Z")

</div>

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](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/3cd062109b271c60c23079d471b3c69b4ede2b9c.jpeg)

---

<div class="post-metadata">

**Author:** ![DEV\_MS](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@DEV\_MS](https://forum.8thwall.com/u/DEV_MS)\
**Post date:** [April 15, 2024, 3:16am UTC](https://forum.8thwall.com/t/a-method-for-capturing-both-ui-and-ar-elements/1087/2 "2024-04-15T03:16:29Z")

</div>

Captured Screenshot

 ![my-project-capture-083020](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/afd45c1af69f9502b69160d27da90b8fbc9caeb1.jpeg)

---

<div class="post-metadata">

**Author:** ![Nhan\_Trong](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/nhan_trong/32/507_2.png) [@Nhan\_Trong](https://forum.8thwall.com/u/Nhan_Trong)\
**Post date:** [April 15, 2024, 9:21am UTC](https://forum.8thwall.com/t/a-method-for-capturing-both-ui-and-ar-elements/1087/3 "2024-04-15T09:21:58Z")

</div>

I think you should refer to this project.

> **[A-Frame: Photo Frame | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/photo-frame)**
>
> This project demonstrates how to add a photo frame to photo/video capture using the foregroundCanvas parameter

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

```auto
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)
       ...
       ...
       ...

    },
  })

```