Skip to main content

Architecture

Overview​

The recordSDK consists of two parts:

  • A JavaScript module (compiled from TypeScript) which provides the entry point for you to configure the SDK, along with all UI elements enabling an end-user to trigger recording
  • A background iFrame, served by loom.com, which provides all business logic

The Loom UI elements are injected into a shadow DOM on your webpage. The iFrame is completely hidden from the end-user’s experience and is purely meant as a proxy to loom.com APIs.

This bi-modal architecture enables Loom to continually roll out improvements to business logic without requiring you to update your own code. The @loomhq/record-sdk package itself will only need to be updated if the interface for initialization and configuration changes, or if there are changes to the end-user experience.

In the approximately six months of the recordSDK Alpha and Beta programs, there has been only one breaking change (converting a sync method to async) and a single required upgrade (to account for Chrome security policy updates).

Diagram of recordSDK

Workflow components​

The recordSDK manages its own lifecycle and provides hooks for key events with which you can interact. The major components of the recording workflow are the following:

Pre-recording panel​

  • User authentication and signup
  • Media device selection
  • Kick off recording

Mid-recording components​

  • Camera bubble and bubble resizer
  • Recording controls—stop, pause, etc.

Post-recording preview​

  • Modal containing the completed recording
  • Recording can be inserted onto page, have URL copied, deleted, or redone