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.

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

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.