Skip to main content
warning

不稳定的 API：此软件包目前处于实验阶段。在测试过程中，我们可能会对 API 做一些更改，并在未来切换到基于 WebGPU 的后端。

canUseWhisperWeb()

检查当前浏览器环境是否支持使用指定模型运行 @remotion/whisper-web。 此函数会验证各种浏览器功能，如 crossOriginIsolated、IndexedDB、navigator.storage.estimate() 以及可用的存储空间。

🌐 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​

打算使用的 Whisper 模型。这个用来检查模型是否有足够的存储空间。 可能的值：tiny、tiny.en、base、base.en、small、small.en。

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

请参考该包导出的 WhisperWebModel 类型以获取完整列表。

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

返回值​

🌐 Return value

一个 Promise，它解析为具有以下属性的 CanUseWhisperWebResult 对象：

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

supported​

一个布尔值，表示是否可以进行转录。如果支持，则为 true；否则为 false。

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

reason?​

如果 supported 是 false，此字段提供缺乏支持的简短分类原因。

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

可能的取值包括：

🌐 Possible values values include:

  • window-undefined：window 对象不可用。
  • not-cross-origin-isolated：该页面未进行跨源隔离。
  • indexed-db-unavailable：IndexedDB 不可用。
  • navigator-storage-unavailable：navigator.storage.estimate() API 不可用。
  • quota-undefined：无法确定存储配额。
  • usage-undefined：无法确定存储使用情况。
  • not-enough-space：指定型号的存储空间不足。
  • error-estimating-storage：尝试估算存储时发生错误。

detailedReason?​

如果 supported 是 false，此字段可能包含关于为什么无法进行转录的更详细、人类可读的说明。

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

重要考虑事项​

🌐 Important considerations

  • 跨源隔离： 为了使 SharedArrayBuffer 正常工作，而 @remotion/whisper-web 需要它，页面必须通过特定的 HTTP 头进行服务：
    • Cross-Origin-Opener-Policy: same-origin
    • Cross-Origin-Embedder-Policy: require-corp 确保你的服务器已配置为发送这些头信息。更多详情请参阅MDN关于crossOriginIsolated的文档。
  • 浏览器兼容性： 虽然此功能会检查必要的 API，但始终在目标浏览器上进行测试，因为对 WebAssembly、IndexedDB 和存储估算的支持可能会有所不同。

另请参阅​

🌐 See also

Last updated on