Skip to main content

API

Methods

setup

Type signature
type SetupFunction = (a: {
/** @deprecated `apiKey` has been renamed to `publicAppId`, please use that instead */
apiKey?: string;
publicAppId?: string;
environment?: Environment;
jws?: string;
config?: Partial<SDKConfig>;
}) => Promise<SDKResult>;

Description:

Enables the execution of the recordSDK.

Arguments:

KeyDescription
apiKeyDeprecated - this field has been renamed to publicAppId
publicAppIdThe key that provides access to an SDK workspace for the domain from which the record button is served
jwsA signed JWT used for key-pair authentication
configA Partial of an SDKConfig

Response:

An SDKResult object wrapped in a Promise.


isSupported

Type signature
isSupported(): Promise<{
supported: boolean;
error: SDKUnsupportedReasons | undefined;
}>

Description:

Identifies if the browser that is trying to run the recordSDK has the necessary web APIs required to perform a recording.

Arguments:

None

Response:

An object with the following properties:

KeyDescription
supportedRepresents if recordSDK is supported by the browser
errorSee SDKUnsupportedReasons—will be undefined if supported is true

Types

ButtonFn

Type signature
type ButtonFn = (a?: {
element?: HTMLElement;
hooks?: Hooks;
}) => SDKButtonInterface;

Description:

A function used to connect a specified DOM element to the recordSDK.

Arguments:

KeyDescription
elementDOM element to attach SDK
hooksDEPRECATED Use ButtonEmitterEvents in place of hooks

Response:

An SDKButtonInterface object.


ButtonEmitterEvents

Type signature
interface ButtonEmitterEvents {
"bubble-drag-end": (pos: Position) => void;
"bubble-drag-start": (pos: Position) => void;
"bubble-move": (pos: Position) => void;
cancel: () => void;
complete: () => void;
"insert-click": (video: LoomVideo) => void;
"lifecycle-update": (state: SDKState) => void;
"recording-complete": (video: LoomVideo) => void;
"recording-start": () => void;
start: () => void;
"upload-complete": (video: LoomVideo) => void;
}

Description:

Events that can be listened to when registered on an SDKButtonInterface instance. See Adding event listeners to see example of usage.

Properties:

KeyDescription
bubble-drag-endEvent emitted when camera bubble dragging has ended—pos arg is Position of bubble
bubble-drag-startEvent emitted when camera bubble dragging has begun—pos arg is initial Position of bubble
bubble-moveEvent emitted when camera bubble is moved-pos arg is Position of bubble
cancelEvent emitted when recording is cancelled
completeEvent emitted when user has selected finish recording
insert-clickEvent emitted when insert CTA has been selected—video arg is LoomVideo available after recording
lifecycle-updateEvent emitted when lifecycle state change with SDKState as arg
recording-completeEvent emitted when recording is ended (video upload may be in progress)—video arg is LoomVideo
recording-startEvent emitted when video capture has begun (after 3..2..1 countdown)
startEvent emitted when user has selected start recording
upload-completeEvent emitted when the recording has finished uploading to Loom—video arg is LoomVideo

LoomVideo

Type signature
interface LoomVideo {
id: string;
title: string;
height: number;
width: number;
sharedUrl: string;
embedUrl: string;
thumbnailHeight?: number;
thumbnailWidth?: number;
thumbnailUrl?: string;
duration?: number;
providerUrl: string;
}

Description:

Object representing a loom video which becomes available after recording.

Properties:

KeyDescription
idVideo id
titleVideo title
heightVideo height in pixels
widthVideo width in pixels
sharedUrlURL for sharing video
embedUrlURL for embedding video
thumbnailHeightHeight of video thumbnail
thumbnailWidthWidth of video thumbnail
thumbnailUrlURL of video thumbnail
durationVideo duration
providerUrlURL of video provider

Position

Type signature
interface Position {
x: number;
y: number;
}

Description:

Position of an element on the screen—specifically used for the camera bubble.

Properties:

KeyDescription
xx coordinate in pixels—0 is bottom of the screen
yy coordinate in pixels—0 is left-most side of the screen

SDKButtonInterface

Type signature
interface SDKButtonInterface extends EventEmitter<ButtonEmitterEvents> {
openPreRecordPanel: () => void;
closePreRecordPanel: () => void;
moveBubble: (p: Position) => void;
}

Description:

Object containing methods for the SDK to be programmatically interacted with. Fulfills the NodeJS EventEmitter definition and contains methods such as .on which listens to registered ButtonEmitterEvents.

Properties:

KeyDescription
openPreRecordPanelProgrammatically opens the pre-record panel
closePreRecordPanelProgrammatically closes the pre-record panel
moveBubbleProgrammatically moves the camera bubble—p arg is target Position of camera bubble

Also contains properties of EventEmitter class.


SDKConfig

Type signature
interface SDKConfig {
bubbleResizable: boolean;
insertButtonText: string;
allowedRecordingTypes?: RecordingType[];
defaultRecordingType?: RecordingType;
styles?: SDKStyles;
}

Description:

Properties a user can set to customize the recordSDK experience.

Properties:

KeyDescription
bubbleResizableWhether a user can update the video bubble size
insertButtonTextOverwrites the default "Insert recording" text that appears in the preview modal
allowedRecordingTypesAllowed recording types for the SDK. For example, if you want to only allow screen and camera recordings, you can specify that here.
defaultRecordingTypeThe default selection for recording type. If allowedRecordingTypes is specified, must include this default type in the list. If unspecified, defaults to Screen and Camera

SDKStyles

Type signature
interface SDKStyles {
fontFamily?: string;
fontUnitSize?: string;
recordButtonColor?: string;
recordButtonHoverColor?: string;
recordButtonActiveColor?: string;
primaryColor?: string;
primaryHoverColor?: string;
primaryActiveColor?: string;
}

Description:

Override default styles to personalize the recording experience. Each field can take a valid CSS value for the corresponding property.

Properties

KeyDescription
fontFamilyThe font-family used in the record menu
fontUnitSizeThe base font unit size used to calculate the font size for the text
recordButtonColorThe record button background color (default: orange)
recordButtonHoverColorThe record button mouse hover color
recordButtonActiveColorThe record button active color
primaryColorThe primary color (default: blurple) - this will override the 'insert' button background color
primaryHoverColorThe primary mouse hover color
primaryActiveColorThe primary active color

SDKState

Type signature
enum SDKState {
Closed = "closed",
PreRecording = "pre-recording",
ActiveRecording = "active-recording",
PostRecording = "post-recording",
}

Description:

An enum of the lifecycle state of the recordSDK.

Properties:

MemberDescription
closedSDK has loaded but is not being used
pre-recordingPre-recording panel is open
active-recordingRecording is in progress (pausing recordings is a part of this state)
post-recordingRecording has finished and preview modal is open

SDKResult

Type signature
type SDKResult = {
configureButton: ButtonFn;
status: () => {
state: SDKState | undefined;
success: boolean;
};
teardown: () => void;
};

Description:

An object returned from the setup function to configure the recordSDK.

Properties:

KeyDescription
configureButtonSee ButtonFn
statusFunction returning an object with a success property—a boolean of whether the SDK successfully loaded—and a state property—either anSDKState member or undefined if success is false
teardownIMPLEMENTATION IN PROGRESS Cleans up the instantiated SDK in the background and should be called when the button that triggers the SDK is removed from the DOM

SDKUnsupportedReasons

Type signature
enum SDKUnsupportedReasons {
IncompatibleBrowser = "incompatible-browser",
ThirdPartyCookiesDisabled = "third-party-cookies-disabled",
NoMediaStreamsSupport = "no-media-streams-support",
}

Description:

An enum containing reasons why the recordSDK is not supported on the user’s browser.

Properties:

MemberDescription
incompatible-browserBrowser is not supported
third-party-cookies-disabledUser’s third party cookies are disabled
no-media-streams-supportMediaStream functionality is not available