# Xrextras-capture-button

**URL:** <https://forum.8thwall.com/t/xrextras-capture-button/3525>\
**Category:** Technical Support\
**Created:** [November 8, 2024, 9:38pm UTC](https://forum.8thwall.com/t/xrextras-capture-button/3525 "2024-11-08T21:38:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Washington](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@Michael\_Washington](https://forum.8thwall.com/u/Michael_Washington)\
**Post date:** [November 8, 2024, 9:38pm UTC](https://forum.8thwall.com/t/xrextras-capture-button/3525/1 "2024-11-08T21:38:02Z")

</div>

Just curious if there is a way to hide, change the positioning, or call this xrextras capture button programatically.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [November 11, 2024, 4:44pm UTC](https://forum.8thwall.com/t/xrextras-capture-button/3525/2 "2024-11-11T16:44:24Z")

</div>

xrextras is open source, so feel free to take a look.

> **[web/xrextras/src/mediarecorder at master · 8thwall/web](https://github.com/8thwall/web/tree/master/xrextras/src/mediarecorder)**
>
> 8th Wall Web projects and resources. Contribute to 8thwall/web development by creating an account on GitHub.

I’d also recommend taking a look at the MediaRecorder API on our docs.

> **[XR8.MediaRecorder | 8th Wall](https://www.8thwall.com/docs/api/mediarecorder/#description)**
>
> Description

---

<div class="post-metadata">

**Author:** ![Adrian\_Stiegler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/adrian_stiegler/32/2228_2.png) [@Adrian\_Stiegler](https://forum.8thwall.com/u/Adrian_Stiegler)\
**Post date:** [May 24, 2025, 2:24pm UTC](https://forum.8thwall.com/t/xrextras-capture-button/3525/3 "2025-05-24T14:24:07Z")

</div>

Michael,

Hitting this currently in a project, and referencing the xrextras open source as George pointed out will expose the way the recorder is constructed.

```auto
<div id="recorder" class="recorder-container">
  <svg viewBox="0 0 38 38" class="progress-container">
    <circle class="progress-track" r="16" cx="19" cy="19"></circle>
    <circle id="progressBar" class="progress-bar" r="16" cx="19" cy="19"></circle>
    <circle class="loading-circle" r="16" cx="19" cy="19"></circle>
  </svg>

  <button id="recorder-button" class="style-reset">
    Record
  </button>
</div>

```

So you can target those in your custom css using:

> #recorder {  
> /\* id \*/  
> }
> 
> .recorder-container {  
> /\* class \*/  
> }
> 
> #recorder-button {  
> /\* id \*/  
> }

Source reference: [web/xrextras/src/mediarecorder/record-button.css at master · 8thwall/web · GitHub](https://github.com/8thwall/web/blob/master/xrextras/src/mediarecorder/record-button.css)

Cheers,  
A