Chapter 749: canUseWhisperWeb()

Core Idea

:::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.

Key Concepts

• Enabling cross-origin isolation
• Example usage
• Arguments
• model
• Return value
• supported
• reason?
• detailedReason?

Code Examples

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>;
}

• What it demonstrates: Usage pattern for canUseWhisperWeb() from the official docs.

Key Takeaways

1. Understand enabling cross-origin isolation when working with canUseWhisperWeb().
2. Understand example usage when working with canUseWhisperWeb().
3. Understand arguments when working with canUseWhisperWeb().
4. Understand model when working with canUseWhisperWeb().
5. Understand return value when working with canUseWhisperWeb().

Connects To

• Convert to Captions: related page in the Whisper Web (@remotion/whisper-web) section.
• Download Whisper Model: related page in the Whisper Web (@remotion/whisper-web) section.
• Install Whisper cpp: related page in the Whisper Web (@remotion/whisper-web) section.