Xrextras-capture-button

🧑‍💻 Technical Support
1

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

2

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

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

3

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.

<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

Cheers,
A

1 Like