Skip to main content


XR8.MediaRecorder.configure({ coverImageUrl, enableEndCard, endCardCallToAction, footerImageUrl, foregroundCanvas, maxDurationMs, maxDimension, shortLink, configureAudioOutput, audioContext, requestMic })


Configures various MediaRecorder parameters.


coverImageUrl [Optional]StringCover image configured in project, null otherwiseImage source for cover image.
enableEndCard [Optional]StringfalseIf true, enable end card.
endCardCallToAction [Optional]String'Try it at: 'Sets the text string for call to action.
fileNamePrefix [Optional]String'my-capture-'Sets the text string that prepends the unique timestamp on file name.
footerImageUrl [Optional]StringnullImage src for cover image.
foregroundCanvas [Optional]StringnullThe canvas to use as a foreground in the recorded video.
maxDurationMs [Optional]Number15000Maximum duration of video, in milliseconds.
maxDimension [Optional]Number1280Max dimension of the captured recording, in pixels.
shortLink [Optional] shortlink from project dashboardSets the text string for shortlink.
configureAudioOutput [Optional]ObjectnullUser provided function that will receive the microphoneInput and audioProcessor audio nodes for complete control of the recording's audio. The nodes attached to the audio processor node will be part of the recording's audio. It is required to return the end node of the user's audio graph.
audioContext [Optional]StringnullUser provided AudioContext instance. Engines like three.js and BABYLON.js have their own internal audio instance. In order for the recordings to contains sounds defined in those engines, you'll want to provide their AudioContext instance.
requestMic [Optional]String'auto'Determines when the audio permissions are requested. The options are provided in XR8.MediaRecorder.RequestMicOptions.

The function passed to configureAudioOutput takes an object with the following parameters:

microphoneInputA GainNode that contains the user’s mic input. If the user’s permissions are not accepted, then this node won’t output the mic input but will still be present.
audioProcessora ScriptProcessorNode that passes audio data to the recorder. If you want an audio node to be part of the recording’s audio output, then you must connect it to the audioProcessor.




maxDurationMs: 15000,
enableEndCard: true,
endCardCallToAction: 'Try it at:',
shortLink: '',

Example - user configured audio output

const userConfiguredAudioOutput = ({microphoneInput, audioProcessor}) => {
const myCustomAudioGraph = ...

// Connect audio graph end node to hardware.

// Audio graph will be automatically connected to processor.
return myCustomAudioGraph
const threejsAudioContext = THREE.AudioContext.getContext()
configureAudioOutput: userConfiguredAudioOutput,
audioContext: threejsAudioContext,
requestMic: XR8.MediaRecorder.RequestMicOptions.AUTO,