Skip to main content

Technical notes

Browser compatibility​

The recordSDK is dependent on the MediaRecorder API which limits availability to ~89% of global audience. The isSupported method prevents activation if it detects that it is being invoked in an environment in which the MediaRecorder API is not supported. See Can I use MediaRecorder API.

Browser compatibility of recordSDK

The current browser matrix support (subject to change as more browsers get added to the list and as performance is tuned) is as follows:

  • Google Chrome v90+
  • Microsoft Edge v90+
  • Brave v1.22+

Firefox is currently unsupported because even though the MediaRecorder API is supported, performance does not meet our quality bar. We will continue to evaluate Firefox support for future inclusion.

Safari recently made MediaRecorder support GA, and we will look to add Safari support soon.

Error handling​

The recordSDK will swallow errors and prevent them from cascading to the containing application. The setup method will return an error if initialization of the recordSDK fails. The isSupported method is meant to prevent loading the SDK in environments which prevent a successful recording. These methods exist to allow you to hide the recordSDK UI in your application as appropriate. If for whatever reason the recordSDK experiences a failure even after these checks, the UI will update to show an error state to the end-user.

Referrer header​

Your API key is associated with an allow list of domains. Attempts to instantiate the recordSDK will compare the provided API key with the Referrer header on the request to loom.com (as part of the setup call, described below).

If you encounter a 403 when attempting to load the recordSDK, please inspect the Referrer header on the request to Loom to ensure it matches a domain in your allow list. Also note that a strict referrer policy in your web app may prevent sending the Referrer header for iFrames with a different origin.

Eval safe bundle​

The default bundle includes a globalThis polyfill that falls back to Function('return this')() in some cases. If your runtime environment has a strict CSP that doesn’t allow unsafe-eval then there is a separate bundle available which avoids the polyfill. The bundle can be imported directly from the @loomhq/record-sdk package’s dist folder.

import {/* ... */} from '@loomhq/record-sdk/dist/cjs/safe';

isSupported bundle​

v2.25.0+.

To check sdk compatibility without downloading the full @loomhq/record-sdk bundle you can import a smaller bundle that only includes the isSupported function.

Deprecation Warning: As of v3.0.0, this is the only method to import the isSupported function.

import { isSupported } from '@loomhq/record-sdk/is-supported';

Server-side rendering​

We recommend async loading of the recordSDK as a package. Rendering on the server is not fully supported. Trying to do so can raise errors in an application using Next.js by Vercel, for example. A workaround for that particular situation would be loading the import dynamically. Usage might look like this:

import dynamic from 'next/dynamic';

...

const DynamicLoomSDK = dynamic(() => import('@/components/LoomSDK'), {
  ssr: false,
});