Skip to main content

Customize Video Recording

8th Wall's XRExtras library provides modules that handle the most common WebAR application needs, including the load screen, social link-out flows and error handling.

The XRExtras MediaRecorder module makes it easy to customize the Video Recording user experience in your project.

This section describes how to customize recorded videos with things like capture button behavior (tap vs hold), add video watermarks, max video length, end card behavior and looks, etc.

A-Frame primitives

xrextras-capture-button : Adds a capture button to the scene.

capture-modeString'standard'Sets the capture mode behavior. standard: tap to take photo, tap + hold to record video. fixed: tap to toggle video recording. photo: tap to take photo. One of [standard, fixed, photo]

xrextras-capture-config : Configures the captured media.

max-duration-msint15000Total video duration (in miliseconds) that the capture button allows. If the end card is disabled, this corresponds to max user record time. 15000 by default.
max-dimensionint1280Maximum dimension (width or height) of captured video. For photo configuration, please see XR8.CanvasScreenshot.configure()
enable-end-cardBooleantrueWhether the end card is included in the recorded media.
cover-image-urlStringImage source for end card cover image. Uses project's cover image by default.
end-card-call-to-actionString'Try it at: 'Sets the text string for call to action on end card.
short-linkStringSets the text string for end card shortlink. Uses project shortlink by default.
footer-image-urlStringPowered by 8th Wall imageImage source for end card footer image.
watermark-image-urlStringnullImage source for watermark.
watermark-max-widthint20Max width (%) of watermark image.
watermark-max-heightint20Max height (%) of watermark image.
watermark-locationString'bottomRight'Location of watermark image. One of topLeft, topMiddle, topRight, bottomLeft, bottomMiddle, bottomRight
file-name-prefixString'my-capture-'Sets the text string that prepends the unique timestamp on file name.
request-micString'auto'Determines if you want to set up the microphone during initialization ('auto') or during runtime ('manual')
include-scene-audioBooleantrueIf true, the A-Frame sounds in the scene will be part of the recorded output.

xrextras-capture-preview : Adds a media preview prefab to the scene which allows for playback, downloading, and sharing.

action-button-share-textString'Share'Sets the text string in action button when Web Share API 2 is available (Android, iOS 15 or higher). 'Share' by default.
action-button-view-textString'View'Sets the text string in action button when Web Share API 2 is not available in iOS (iOS 14 or below). 'View' by default.

XRExtras.MediaRecorder Events

XRExtras.MediaRecorder emits the following events.

Events Emitted

Event EmittedDescriptionEvent Detail
mediarecorder-photocompleteEmitted after a photo is taken.{blob}
mediarecorder-recordcompleteEmitted after a video recording is complete.{videoBlob}
mediarecorder-previewreadyEmitted after a previewable video recording is complete. (Android/Desktop only){videoBlob}
mediarecorder-finalizeprogressEmitted when the media recorder is making progress in the final export. (Android/Desktop only){progress, total}
mediarecorder-previewopenedEmitted after recording preview is opened.null
mediarecorder-previewclosedEmitted after recording preview is closed.null

Example: A-Frame Primitives

<xrextras-capture-button capture-mode="standard"></xrextras-capture-button>

end-card-call-to-action="Try it at:"


Example: A-Frame Events

window.addEventListener('mediarecorder-previewready', (e) => {

Example: Change Share Button CSS

#actionButton {
/* change color of action button */
background-color: #007aff !important;