hubcap-recorder

The <hubcap-recorder> component is a custom element with a default recorder UI and behavior as configured in the Hubcap Dashboard. Additional configuration is available through various attributes on the element itself.

Attributes

Attribute Type Default Description
recorder-id string n/a Your required unique account ID. You can find your ID within the Embed Code in the Settings section of your Dashboard.
show-start-button boolean true Set to false (<hubcap-recorder show-start-button="false">) to hide the default start recording button. Only do so if you plan to use your own start button. The rest of the Hubcap UI will still be shown during a recording.
show-stop-button boolean true Set to false (<hubcap-recorder show-stop-button="false">) to hide the default stop button that appears during recording. Note that if you hide the default stop button, the only way to stop recording will be through the API.
show-submission-success boolean true Set to false (<hubcap-recorder show-submission-success="false">) to skip the success message after submitting a recording.

Properties

state

Read-only property that returns the current state of the recorder. The state is represented by one of the following string values:

Value Meaning
'idle' Default state of the recorder – nothing is being recorded, processed, or uploaded.
'recording' Recorder is active and currently recording the screen or webcam. Also active during countdown.
'paused' Recording is paused (only pausable during countdown)
'processing' A recording has finished and is currently being processed and uploaded.

Example

const recorder = document.querySelector('hubcap-recorder');
const recorderButton = document.querySelector('#my-record-button');

rcorderButton.addEventListener('click', () => {
  if (recorder.state === 'idle') {
    recorder.start();
  } else if (recorder.state === 'recording') {
    recorder.stop();
  }
});

Methods

The <hubcap-recorder> DOM element includes a couple of straightforward methods to help you easily integrate the button with an existing platform.

start(options)

Starts a recording, just as if a user had clicked on our standard record button and selected a given source option (screen or webcam).

Parameter Type Required Description
options StartOptions no Basic recording options. Starts a screen recording by default, but can be configured to start a webcam recording instead.

Returns

Promise<boolean> : Resolves to true when started successfully. Resolves to false when cancelled by the user.

Example

const hubcap = document.querySelector("hubcap-recorder");
const started = await hubcap.start({ source: "webcam" });

stop()

Stops a recording in progress. If the show-stop-button attribute is set to false, this method must be used to end a recording.

Returns

Promise<void> : Resolves when recording has beens stopped. Rejects if recording not in progress.

Example

restart()

Restarts a recording using the previous start options. Will start countdown immediately if configured, and will not require a user to re-select a recording source.

Returns

Promise<void> : Resolves when recording has beens restarted. Rejects if called before a recording has been started.

HubcapRecorder.isBrowserSupported()

Simple compatibility check. Helpful for utilizing a custom fallback for users on unsupported browsers.

Returns

boolean : True if Hubcap supports the user's web browser.

Events

For full integration, the <hubcap-recorder> DOM element emits events containing useful metadata about recorded videos.

Submit

The submit event fires after a user creates and approves a recording.

Property Type Description
detail SubmitEventDetail Contains video metadata and points to the hosted video player.

Example

Ready

The ready event fires once Hubcap is fully loaded and ready to start recording.