Skip to main content
warning

Unstable API: This package is experimental for the moment. As we test it, we might make a few changes to the API and switch to a WebGPU-based backend in the future.

canUseWhisperWeb()

Checks if the current browser environment supports running @remotion/whisper-web with a specified model.
This function verifies various browser capabilities like crossOriginIsolated, IndexedDB, navigator.storage.estimate(), and available storage space.

Enabling cross-origin isolation​

This package requires a page that is cross-origin isolated.

Example usage​

import {canUseWhisperWeb, type WhisperWebModel} from '@remotion/whisper-web';
import {useState, useEffect} from 'react';

export default function MyComponent() {
  const [supported, setSupported] = useState<boolean | null>(null);
  const [reason, setReason] = useState<string | undefined>(undefined);

  useEffect(() => {
    const checkSupport = async () => {
      const modelToUse: WhisperWebModel = 'tiny.en'; // Or any other model
      const result = await canUseWhisperWeb(modelToUse);
      setSupported(result.supported);
      if (!result.supported) {
        setReason(result.detailedReason ?? result.reason);
      }
    };

    checkSupport();
  }, []);

  if (supported === null) {
    return <p>Checking if Whisper Web can be used...</p>;
  }

  if (supported) {
    return <p>Can use Whisper Web!</p>;
  }

  return <p>Using Whisper Web is not possible: {reason}</p>;
}

Arguments​

model​

The Whisper model intended to be used. This is used to check if there's enough storage space for the model. Possible values: tiny, tiny.en, base, base.en, small, small.en.

Refer to the WhisperWebModel type exported by the package for a comprehensive list.

Return value​

A Promise that resolves to a CanUseWhisperWebResult object with the following properties:

supported​

A boolean indicating whether a transcription can be done. true if supported, false otherwise.

reason?​

If supported is false, this field provides a brief, categorized reason for the lack of support.

Possible values values include:

  • window-undefined: window object is not available.
  • not-cross-origin-isolated: The page is not cross-origin isolated.
  • indexed-db-unavailable: IndexedDB is not available.
  • navigator-storage-unavailable: navigator.storage.estimate() API is not available.
  • quota-undefined: Storage quota could not be determined.
  • usage-undefined: Storage usage could not be determined.
  • not-enough-space: Insufficient storage space for the specified model.
  • error-estimating-storage: An error occurred while trying to estimate storage.

detailedReason?​

If supported is false, this field may contain a more detailed, human-readable explanation of why a transcription is not possible.

Important considerations​

  • Cross-Origin Isolation: For SharedArrayBuffer to work, which is required by @remotion/whisper-web, the page must be served with specific HTTP headers:

    • Cross-Origin-Opener-Policy: same-origin
    • Cross-Origin-Embedder-Policy: require-corp Ensure your server is configured to send these headers. See MDN documentation on crossOriginIsolated for more details.

  • Browser Compatibility: While this function checks for necessary APIs, always test on your target browsers as support for WebAssembly, IndexedDB, and storage estimation can vary.

See also​