@tiny-codes/react-easy 1.4.6 → 1.4.7

package/lib/hooks/useRefValue.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react';
+import type { MutableRefObject } from 'react';
 /**
  * - **EN:** Get a mutable ref object and automatically update the value change
  * - **CN:** 获取一个可变的ref对象，并自动更新值变化
@@ -7,5 +7,5 @@ import type { RefObject } from 'react';
  *
  * @returns A mutable ref object, but the reference is immutable | 可变的ref对象，但引用不可变
  */
-declare const useRefValue: <T>(value: T) => RefObject<T>;
+declare const useRefValue: <T>(value: T) => MutableRefObject<T>;
 export default useRefValue;

package/lib/hooks/useRefValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/useRefValue.ts"],
-  "sourcesContent": ["import type { RefObject } from 'react';\nimport { useRef } from 'react';\n\n/**\n * - **EN:** Get a mutable ref object and automatically update the value change\n * - **CN:** 获取一个可变的ref对象，并自动更新值变化\n *\n * @param value the wrapped value | 被包装的值\n *\n * @returns A mutable ref object, but the reference is immutable | 可变的ref对象，但引用不可变\n */\nconst useRefValue = <T>(value: T): RefObject<T> => {\n  const ref = useRef<T>(value);\n  ref.current = value;\n  return ref;\n};\n\nexport default useRefValue;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAuB;AAUvB,IAAM,cAAc,CAAI,UAA2B;AACjD,QAAM,UAAM,qBAAU,KAAK;AAC3B,MAAI,UAAU;AACd,SAAO;AACT;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["import type { MutableRefObject } from 'react';\nimport { useRef } from 'react';\n\n/**\n * - **EN:** Get a mutable ref object and automatically update the value change\n * - **CN:** 获取一个可变的ref对象，并自动更新值变化\n *\n * @param value the wrapped value | 被包装的值\n *\n * @returns A mutable ref object, but the reference is immutable | 可变的ref对象，但引用不可变\n */\nconst useRefValue = <T>(value: T): MutableRefObject<T> => {\n  const ref = useRef<T>(value);\n  ref.current = value;\n  return ref;\n};\n\nexport default useRefValue;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAuB;AAUvB,IAAM,cAAc,CAAI,UAAkC;AACxD,QAAM,UAAM,qBAAU,KAAK;AAC3B,MAAI,UAAU;AACd,SAAO;AACT;AAEA,IAAO,sBAAQ;",
   "names": []
 }

package/lib/hooks/useUserMedia.d.ts

@@ -0,0 +1,104 @@
+export interface UseUserMediaProps {
+    /**
+     * - **EN:** The media constraints for the audio and video stream.
+     * - **CN:** 媒体流的媒体约束。
+     */
+    media: Pick<MediaStreamConstraints, 'audio' | 'video'>;
+    /**
+     * - **EN:** Whether to enable PCM output, only effective when recording audio. Please use
+     *   `onPcmStreamChunk` callback to get PCM data. Default is `false`.
+     * - **CN:** 是否启用 PCM 输出，仅在录制音频时有效。请使用 `onPcmStreamChunk` 回调获取 PCM 数据。默认`false`
+     */
+    pcmAudioOptions?: {
+        /**
+         * - **EN:** The audio context options for the PCM output.
+         * - **CN:** PCM 输出的音频上下文选项。
+         */
+        audioContext?: AudioContextOptions;
+        /**
+         * - **EN:** The worklet options for the PCM output.
+         * - **CN:** PCM 输出的工作线程选项。
+         */
+        workletOptions?: AudioWorkletNodeOptions;
+    };
+    /**
+     * - **EN:** Callback function that is triggered when the recording starts, providing the media
+     *   stream.
+     * - **CN:** 开始录制时触发的回调函数，提供媒体流。
+     *
+     * @param {MediaStream} stream - The media stream.
+     */
+    onStartRecording?: (stream: MediaStream) => void;
+    /**
+     * - **EN:** Callback function that is triggered when the recording stops.
+     * - **CN:** 停止录制时触发的回调函数。
+     */
+    onStopRecording?: () => void;
+    /**
+     * - **EN:** Callback function that is triggered when a new chunk of media data is available.
+     * - **CN:** 当录制媒体流时，每个时间分片会触发一次 `onStreamChunk` 回调，提供媒体数据块。
+     *
+     * > 注意音频流编码格式为：audio/webm;codecs=opus。如果希望获取 PCM 数据，请使用 `onPcmData` 回调。
+     *
+     * @param {Blob} chunk - The media data chunk (MIME: audio/webm;codecs=opus) | 媒体数据块 (MIME:
+     *   audio/webm;codecs=opus)
+     */
+    onStreamChunk?: (chunk: Blob) => void;
+    /**
+     * - **EN:** Callback for raw PCM float data (per render quantum)
+     * - **CN:** 获取原始 PCM 浮点数据的回调（每个渲染量子）
+     *
+     * @param data Monophonic or polyphonic spliced data | 单声道或多声道拼接数据
+     * @param sampleRate Sample rate | 采样率
+     */
+    onPcmStreamChunk?: (channels: Float32Array[], sampleRate: number) => void;
+    /**
+     * - **EN:** Whether to disable this hook.
+     * - **CN:** 是否禁用此工具
+     */
+    disabled?: boolean;
+    /**
+     * - **EN:** The slicing time period (milliseconds) for each fragment of the audio and video stream,
+     *   each time slice will trigger the `onStreamChunk` callback. Default is `500`.
+     * - **CN:** 媒体流每个分片的切片时间段（毫秒），每个时间分片会触发一次 `onStreamChunk` 回调，默认值为 `500`。
+     */
+    streamSliceMs?: number;
+    /**
+     * - **EN:** The silence detection threshold (0-1) for the audio stream, below which the audio is
+     *   considered silent. Default is `0`.
+     * - **CN:** 音频流的静音检测阈值（0-1），低于该值音频被视为静音。默认值为 `0`。
+     */
+    soundDetectionThreshold?: number;
+    /**
+     * - **EN:** The timeout duration (milliseconds) for detecting sound input. If no sound is detected
+     *   within this period, the user will be prompted to re-select the audio device. Default is
+     *   `3000`.
+     * - **CN:** 检测是否有声音输入的超时时间（毫秒），如果在该时间段内没有检测到声音，则会提示用户重新选择音频设备。默认值为 `3000`。
+     */
+    soundDetectionTimeout?: number;
+}
+declare const useUserMedia: (props: UseUserMediaProps) => UseUserMediaResult;
+export interface UseUserMediaResult {
+    /**
+     * - **EN** Whether the media stream is currently being recorded
+     * - **CN** 是否正在录制媒体流
+     */
+    isRecording: boolean;
+    /**
+     * - **EN** Start recording the media stream
+     * - **CN** 开始录制媒体流
+     */
+    startRecording: () => Promise<MediaRecorder>;
+    /**
+     * - **EN** Stop recording the media stream
+     * - **CN** 停止录制媒体流
+     */
+    stopRecording: () => void;
+    /**
+     * - **EN** Get the media stream being recorded, returns the stream if recording, otherwise returns
+     *   `undefined`
+     * - **CN** 获取正在录制的媒体流，如果正在录制则返回该流，否则返回 `undefined`
+     */
+    mediaStream?: MediaStream;
+}
+export default useUserMedia;

package/lib/hooks/useUserMedia.js

@@ -0,0 +1,553 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useUserMedia.tsx
+var useUserMedia_exports = {};
+__export(useUserMedia_exports, {
+  default: () => useUserMedia_default
+});
+module.exports = __toCommonJS(useUserMedia_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_ConfigProvider = __toESM(require("../components/ConfigProvider"));
+var import_context = __toESM(require("../components/ConfigProvider/context"));
+var import_stream = require("../utils/stream");
+var import_useRefFunction = __toESM(require("./useRefFunction"));
+var import_useRefValue = __toESM(require("./useRefValue"));
+var import_useT = __toESM(require("./useT"));
+var requestMicrophoneEnUrlPromise = import("../assets/request-microphone-en.js");
+var requestMicrophoneZhUrlPromise = import("../assets/request-microphone-zh.js");
+var resetMicrophoneEnUrlPromise = import("../assets/reset-microphone-en.js");
+var resetMicrophoneZhUrlPromise = import("../assets/reset-microphone-zh.js");
+var saveAudioDeviceEnUrlPromise1 = import("../assets/save-default-audio1-en.js");
+var saveAudioDeviceZhUrlPromise1 = import("../assets/save-default-audio1-zh.js");
+var saveAudioDeviceEnUrlPromise2 = import("../assets/save-default-audio2-en.js");
+var saveAudioDeviceZhUrlPromise2 = import("../assets/save-default-audio2-zh.js");
+var requestCameraEnUrlPromise = import("../assets/request-camera-en.js");
+var requestCameraZhUrlPromise = import("../assets/request-camera-zh.js");
+var resetCameraEnUrlPromise = import("../assets/reset-camera-en.js");
+var resetCameraZhUrlPromise = import("../assets/reset-camera-zh.js");
+var useUserMedia = (props) => {
+  var _a;
+  const {
+    media,
+    pcmAudioOptions,
+    disabled,
+    streamSliceMs = 500,
+    soundDetectionThreshold = 0,
+    soundDetectionTimeout = 3e3,
+    onStartRecording,
+    onStopRecording,
+    onStreamChunk,
+    onPcmStreamChunk
+  } = props;
+  const context = (0, import_react.useContext)(import_context.default);
+  const { lang } = context;
+  const contextRef = (0, import_useRefValue.default)(context);
+  const t = (0, import_useT.default)();
+  const app = import_antd.App.useApp();
+  const modal = ((_a = app.modal) == null ? void 0 : _a.confirm) ? app.modal : import_antd.Modal;
+  const modalRef = (0, import_useRefValue.default)(modal);
+  const [requestMicrophoneEnUrl, setRequestMicrophoneEnUrl] = (0, import_react.useState)();
+  const [requestMicrophoneZhUrl, setRequestMicrophoneZhUrl] = (0, import_react.useState)();
+  const [resetMicrophoneEnUrl, setResetMicrophoneEnUrl] = (0, import_react.useState)();
+  const [resetMicrophoneZhUrl, setResetMicrophoneZhUrl] = (0, import_react.useState)();
+  const [requestCameraEnUrl, setRequestCameraEnUrl] = (0, import_react.useState)();
+  const [requestCameraZhUrl, setRequestCameraZhUrl] = (0, import_react.useState)();
+  const [resetCameraEnUrl, setResetCameraEnUrl] = (0, import_react.useState)();
+  const [resetCameraZhUrl, setResetCameraZhUrl] = (0, import_react.useState)();
+  const [isRecording, setIsRecording] = (0, import_react.useState)(false);
+  const [mediaStream, setMediaStream] = (0, import_react.useState)();
+  const [mediaRecorder, setMediaRecorder] = (0, import_react.useState)(null);
+  const stopSoundListeningRef = (0, import_react.useRef)(void 0);
+  const closePcmRef = (0, import_react.useRef)(void 0);
+  const includeAudio = !!media.audio;
+  const exactAudioDeviceIdRef = (0, import_react.useRef)(void 0);
+  const rafRef = (0, import_react.useRef)(0);
+  const isSpeakingRef = (0, import_react.useRef)(false);
+  const silenceVolumeThresholdRef = (0, import_useRefValue.default)(soundDetectionThreshold);
+  const silenceDetectDurationRef = (0, import_useRefValue.default)(soundDetectionTimeout);
+  const soundDetectStart = (0, import_react.useRef)(0);
+  const pcmSampleRateRef = (0, import_react.useRef)(0);
+  const onPcmStreamChunkRef = (0, import_useRefValue.default)(onPcmStreamChunk);
+  const pcmStreamSlicerRef = (0, import_react.useRef)(
+    new import_stream.StreamTimeSlicerClass({
+      timeSlice: streamSliceMs,
+      onSlice: (channels) => {
+        var _a2;
+        (_a2 = onPcmStreamChunkRef.current) == null ? void 0 : _a2.call(onPcmStreamChunkRef, channels, pcmSampleRateRef.current);
+      }
+    })
+  );
+  const deviceType = (0, import_react.useMemo)(
+    () => media.video ? t("hooks.useUserMedia.camera") : t("hooks.useUserMedia.microphone"),
+    [media, t]
+  );
+  const featureName = (0, import_react.useMemo)(
+    () => media.video ? t("hooks.featureName.camera") : t("hooks.featureName.microphone"),
+    [media, t]
+  );
+  const showDeniedPopup = () => {
+    const resetMicrophoneUrl = lang === "zh-CN" ? resetMicrophoneZhUrl : resetMicrophoneEnUrl;
+    const resetCameraUrl = lang === "zh-CN" ? resetCameraZhUrl : resetCameraEnUrl;
+    modal.error({
+      title: t("hooks.useUserMedia.devicePermission", { deviceType }),
+      width: 500,
+      content: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null), /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null, /* @__PURE__ */ React.createElement(import_antd.Typography.Text, { strong: true, type: "danger" }, t("hooks.useUserMedia.deniedPermission", { deviceType, featureName }))), /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null, t("hooks.useUserMedia.reopenPermissionGuide", { deviceType })), /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: media.video ? resetCameraUrl : resetMicrophoneUrl,
+          alt: "microphone-permission",
+          style: { width: 380 }
+        }
+      ))
+    });
+  };
+  const recordStream = async () => {
+    let stream;
+    try {
+      const options = media;
+      if (media.audio) {
+        if (exactAudioDeviceIdRef.current) {
+          if (media.audio === true) {
+            options.audio = { deviceId: { exact: exactAudioDeviceIdRef.current } };
+          } else {
+            options.audio = { deviceId: { exact: exactAudioDeviceIdRef.current }, ...media.audio };
+          }
+        }
+      }
+      stream = await navigator.mediaDevices.getUserMedia(options);
+      setMediaStream(stream);
+      onStartRecording == null ? void 0 : onStartRecording(stream);
+      const recorder = new MediaRecorder(stream);
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          onStreamChunk == null ? void 0 : onStreamChunk(event.data);
+        }
+      };
+      if (streamSliceMs) {
+        recorder.start(streamSliceMs);
+      } else {
+        recorder.start();
+      }
+      setMediaRecorder(recorder);
+      setIsRecording(true);
+      if (options.audio && onPcmStreamChunkRef.current) {
+        try {
+          const ctx = new AudioContext(pcmAudioOptions == null ? void 0 : pcmAudioOptions.audioContext);
+          pcmSampleRateRef.current = ctx.sampleRate;
+          if (ctx.state === "suspended") {
+            await ctx.resume();
+          }
+          const sourceNode = ctx.createMediaStreamSource(stream);
+          let node;
+          closePcmRef.current = () => {
+            node == null ? void 0 : node.port.close();
+            node == null ? void 0 : node.disconnect();
+            sourceNode.disconnect();
+            ctx.close().catch(() => {
+            });
+          };
+          const setupWorklet = async () => {
+            try {
+              await ctx.audioWorklet.addModule(generatePcmCaptureProcessorModule());
+              node = new AudioWorkletNode(ctx, "pcm-capture", pcmAudioOptions == null ? void 0 : pcmAudioOptions.workletOptions);
+              node.port.onmessage = (e) => {
+                var _a2;
+                if (((_a2 = e.data) == null ? void 0 : _a2.type) === "pcm") {
+                  const channels = e.data.channels;
+                  pcmStreamSlicerRef.current.push(channels);
+                }
+              };
+              sourceNode.connect(node);
+            } catch (err) {
+              fallbackScriptProcessor({ ctx, sourceNode, streamSlicer: pcmStreamSlicerRef.current });
+            }
+          };
+          if ("audioWorklet" in ctx) {
+            setupWorklet();
+          } else {
+            fallbackScriptProcessor({ ctx, sourceNode, streamSlicer: pcmStreamSlicerRef.current });
+          }
+        } catch (e) {
+          console.error("setup pcm worklet failed", e);
+        }
+      }
+      return recorder;
+    } catch (error) {
+      console.error(error);
+      if (error instanceof Error && error.name === "NotAllowedError") {
+        showDeniedPopup();
+        import_antd.notification.error({ message: t("hooks.useUserMedia.deniedPermission", { deviceType, featureName }) });
+        throw new Error(t("hooks.useUserMedia.deniedPermission", { deviceType, featureName }));
+      }
+      import_antd.notification.error({ message: t("hooks.useUserMedia.notSupport") });
+      throw new Error(t("hooks.useUserMedia.notSupport"));
+    }
+  };
+  const startRecording = (0, import_useRefFunction.default)(async () => {
+    var _a2, _b;
+    if (disabled) {
+      throw new Error(t("hooks.useUserMedia.disabledWarning"));
+    }
+    if (isRecording) {
+      throw new Error(t("hooks.useUserMedia.isRecordingNow"));
+    }
+    if (!((_a2 = navigator.mediaDevices) == null ? void 0 : _a2.getUserMedia) || !((_b = navigator.permissions) == null ? void 0 : _b.query)) {
+      import_antd.notification.error({
+        message: t("hooks.useUserMedia.notSupport")
+      });
+      throw new Error(t("hooks.useUserMedia.notSupport"));
+    }
+    try {
+      const result = await window.navigator.permissions.query({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        name: media.video ? "camera" : "microphone"
+      });
+      if (result.state === "denied") {
+        showDeniedPopup();
+        import_antd.notification.error({ message: t("hooks.useUserMedia.deniedPermission", { deviceType, featureName }) });
+        throw new Error(t("hooks.useUserMedia.deniedPermission", { deviceType, featureName }));
+      } else {
+        if (result.state === "prompt") {
+          const requestMicrophoneUrl = lang === "zh-CN" ? requestMicrophoneZhUrl : requestMicrophoneEnUrl;
+          const requestCameraUrl = lang === "zh-CN" ? requestCameraZhUrl : requestCameraEnUrl;
+          return new Promise((resolve, reject) => {
+            modal.warning({
+              title: t("hooks.useUserMedia.devicePermission", { deviceType }),
+              content: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null), /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null, /* @__PURE__ */ React.createElement(import_antd.Typography.Text, { strong: true }, t("hooks.useUserMedia.requestTip1", { deviceType }))), /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null, t("hooks.useUserMedia.requestTip2", { featureName })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+                "img",
+                {
+                  src: media.video ? requestCameraUrl : requestMicrophoneUrl,
+                  alt: "microphone-permission",
+                  style: { width: 380 }
+                }
+              ))),
+              onOk: () => {
+                try {
+                  recordStream().then((recorder) => {
+                    resolve(recorder);
+                  }).catch((error) => {
+                    reject(error);
+                  });
+                } catch (error) {
+                  console.error(error);
+                  reject(error);
+                }
+              },
+              width: 500
+            });
+          });
+        } else {
+          return await recordStream();
+        }
+      }
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  });
+  const stopRecording = (0, import_useRefFunction.default)(() => {
+    var _a2, _b;
+    mediaRecorder == null ? void 0 : mediaRecorder.stop();
+    mediaStream == null ? void 0 : mediaStream.getTracks().forEach((t2) => t2.stop());
+    setMediaStream(void 0);
+    setIsRecording(false);
+    isSpeakingRef.current = false;
+    cancelAnimationFrame(rafRef.current);
+    (_a2 = stopSoundListeningRef.current) == null ? void 0 : _a2.call(stopSoundListeningRef);
+    (_b = closePcmRef.current) == null ? void 0 : _b.call(closePcmRef);
+    onStopRecording == null ? void 0 : onStopRecording();
+  });
+  const waitForSound = (0, import_useRefFunction.default)((mediaStream2) => {
+    const ctx = new AudioContext();
+    const source = ctx.createMediaStreamSource(mediaStream2);
+    const analyser = ctx.createAnalyser();
+    analyser.fftSize = 2048;
+    source.connect(analyser);
+    soundDetectStart.current = Date.now();
+    const data = new Uint8Array(analyser.fftSize);
+    const cancelDetect = () => {
+      var _a2;
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = 0;
+      (_a2 = stopSoundListeningRef.current) == null ? void 0 : _a2.call(stopSoundListeningRef);
+    };
+    const loop = () => {
+      analyser.getByteTimeDomainData(data);
+      let sum = 0;
+      for (const value of data) {
+        const v = (value - 128) / 128;
+        sum += v * v;
+      }
+      const rms = Math.sqrt(sum / data.length);
+      if (rms > silenceVolumeThresholdRef.current) {
+        if (!isSpeakingRef.current) {
+          isSpeakingRef.current = true;
+          cancelDetect();
+          return;
+        }
+      } else {
+        if (Date.now() > soundDetectStart.current + silenceDetectDurationRef.current) {
+          navigator.mediaDevices.enumerateDevices().then((devices) => {
+            const audioInputs = devices.filter((d) => d.kind === "audioinput");
+            modalRef.current.confirm({
+              title: t("hooks.useUserMedia.soundDetectTitle"),
+              content: /* @__PURE__ */ React.createElement(import_ConfigProvider.default, { ...contextRef.current }, /* @__PURE__ */ React.createElement(
+                SaveAudioDeviceForm,
+                {
+                  devices: audioInputs,
+                  mediaStream: mediaStream2,
+                  onDeviceChange: (deviceId) => exactAudioDeviceIdRef.current = deviceId
+                }
+              )),
+              width: 500,
+              onOk: () => {
+                if (exactAudioDeviceIdRef.current) {
+                  stopRecording();
+                  setTimeout(() => {
+                    startRecording();
+                  });
+                }
+              },
+              onCancel: () => {
+                cancelDetect();
+              }
+            });
+          });
+          cancelDetect();
+          return;
+        }
+      }
+      rafRef.current = requestAnimationFrame(loop);
+    };
+    loop();
+    stopSoundListeningRef.current = () => {
+      analyser.disconnect();
+      source.disconnect();
+      ctx.close().catch(() => {
+      });
+      stopSoundListeningRef.current = void 0;
+    };
+  });
+  (0, import_react.useEffect)(() => {
+    return stopRecording;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (disabled && isRecording) {
+      stopRecording();
+    }
+  }, [disabled, isRecording]);
+  (0, import_react.useEffect)(() => {
+    if (streamSliceMs && pcmStreamSlicerRef.current.timeSlice !== streamSliceMs) {
+      pcmStreamSlicerRef.current.timeSlice = streamSliceMs;
+    }
+  }, [streamSliceMs]);
+  (0, import_react.useEffect)(() => {
+    if (includeAudio && mediaStream && !isSpeakingRef.current) {
+      try {
+        waitForSound(mediaStream);
+      } catch (e) {
+        console.warn("Audio volume detecting failed:", e);
+      }
+    }
+    return () => {
+      var _a2;
+      (_a2 = stopSoundListeningRef.current) == null ? void 0 : _a2.call(stopSoundListeningRef);
+    };
+  }, [includeAudio, mediaStream, t]);
+  (0, import_react.useEffect)(() => {
+    requestMicrophoneEnUrlPromise.then((module2) => {
+      setRequestMicrophoneEnUrl(module2.default);
+    });
+    requestMicrophoneZhUrlPromise.then((module2) => {
+      setRequestMicrophoneZhUrl(module2.default);
+    });
+    resetMicrophoneEnUrlPromise.then((module2) => {
+      setResetMicrophoneEnUrl(module2.default);
+    });
+    resetMicrophoneZhUrlPromise.then((module2) => {
+      setResetMicrophoneZhUrl(module2.default);
+    });
+    requestCameraEnUrlPromise.then((module2) => {
+      setRequestCameraEnUrl(module2.default);
+    });
+    requestCameraZhUrlPromise.then((module2) => {
+      setRequestCameraZhUrl(module2.default);
+    });
+    resetCameraEnUrlPromise.then((module2) => {
+      setResetCameraEnUrl(module2.default);
+    });
+    resetCameraZhUrlPromise.then((module2) => {
+      setResetCameraZhUrl(module2.default);
+    });
+  }, []);
+  return {
+    isRecording,
+    startRecording,
+    stopRecording
+  };
+};
+function SaveAudioDeviceForm(props) {
+  const { devices, mediaStream, onDeviceChange } = props;
+  const [form] = import_antd.Form.useForm();
+  const t = (0, import_useT.default)();
+  const { lang } = (0, import_react.useContext)(import_context.default);
+  const [saveAudioDeviceEnUrl1, setSaveAudioDeviceEnUrl1] = (0, import_react.useState)();
+  const [saveAudioDeviceEnUrl2, setSaveAudioDeviceEnUrl2] = (0, import_react.useState)();
+  const [saveAudioDeviceZhUrl1, setSaveAudioDeviceZhUrl1] = (0, import_react.useState)();
+  const [saveAudioDeviceZhUrl2, setSaveAudioDeviceZhUrl2] = (0, import_react.useState)();
+  const [saveDefaultAudioDevicePermanently, setSaveDefaultAudioDevicePermanently] = (0, import_react.useState)(false);
+  const audioInputs = (0, import_react.useMemo)(() => devices.filter((d) => d.kind === "audioinput"), [devices]);
+  const [selectedDeviceId, setSelectedDeviceId] = (0, import_react.useState)(
+    () => {
+      var _a, _b, _c;
+      return ((_b = (_a = mediaStream.getAudioTracks()[0]) == null ? void 0 : _a.getSettings()) == null ? void 0 : _b.deviceId) ?? ((_c = audioInputs[0]) == null ? void 0 : _c.deviceId);
+    }
+  );
+  const openDataImageInNewTab = (0, import_useRefFunction.default)((dataUrl) => {
+    var _a;
+    if (!dataUrl)
+      return;
+    const [meta, b64] = dataUrl.split(",");
+    const mime = ((_a = meta.match(/data:(.*);base64/)) == null ? void 0 : _a[1]) || "image/png";
+    const binary = atob(b64);
+    const len = binary.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++)
+      bytes[i] = binary.charCodeAt(i);
+    const blob = new Blob([bytes], { type: mime });
+    const url = URL.createObjectURL(blob);
+    window.open(url);
+  });
+  (0, import_react.useEffect)(() => {
+    saveAudioDeviceEnUrlPromise1.then((module2) => {
+      setSaveAudioDeviceEnUrl1(module2.default);
+    });
+    saveAudioDeviceEnUrlPromise2.then((module2) => {
+      setSaveAudioDeviceEnUrl2(module2.default);
+    });
+    saveAudioDeviceZhUrlPromise1.then((module2) => {
+      setSaveAudioDeviceZhUrl1(module2.default);
+    });
+    saveAudioDeviceZhUrlPromise2.then((module2) => {
+      setSaveAudioDeviceZhUrl2(module2.default);
+    });
+  }, []);
+  return /* @__PURE__ */ React.createElement(import_antd.Form, { layout: "vertical", form }, /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null), /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null, /* @__PURE__ */ React.createElement(import_antd.Typography.Text, null, t("hooks.useUserMedia.soundDetectDescription"))), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: t("hooks.useUserMedia.chooseMicrophoneDevice") }, /* @__PURE__ */ React.createElement(
+    import_antd.Select,
+    {
+      options: audioInputs.map((input) => ({
+        label: input.label,
+        value: input.deviceId
+      })),
+      defaultValue: selectedDeviceId,
+      onChange: (id) => {
+        setSelectedDeviceId(id);
+        onDeviceChange(id);
+      }
+    }
+  )), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { style: { marginBottom: 0 } }, /* @__PURE__ */ React.createElement(import_antd.Checkbox, { onChange: (e) => setSaveDefaultAudioDevicePermanently(e.target.checked) }, t("hooks.useUserMedia.rememberDefaultAudioDevice"))), saveDefaultAudioDevicePermanently && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(import_antd.Typography.Paragraph, null, /* @__PURE__ */ React.createElement(import_antd.Typography.Text, null, t("hooks.useUserMedia.rememberDefaultAudioDeviceTip"))), /* @__PURE__ */ React.createElement(import_antd.Flex, { gap: 8, align: "flex-start" }, /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "#",
+      onClick: (e) => {
+        e.preventDefault();
+        openDataImageInNewTab(lang === "zh-CN" ? saveAudioDeviceZhUrl1 : saveAudioDeviceEnUrl1);
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: lang === "zh-CN" ? saveAudioDeviceZhUrl1 : saveAudioDeviceEnUrl1,
+        alt: "the first step to save default audio device",
+        style: { width: "100%", height: "auto" }
+      }
+    )
+  )), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "#",
+      onClick: (e) => {
+        e.preventDefault();
+        openDataImageInNewTab(lang === "zh-CN" ? saveAudioDeviceZhUrl2 : saveAudioDeviceEnUrl2);
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: lang === "zh-CN" ? saveAudioDeviceZhUrl2 : saveAudioDeviceEnUrl2,
+        alt: "the second step to save default audio device",
+        style: { width: "100%", height: "auto" }
+      }
+    )
+  )))));
+}
+function generatePcmCaptureProcessorModule() {
+  const workletCode = `
+class PcmCaptureProcessor extends AudioWorkletProcessor {
+  process(inputs, outputs, parameters) {
+    const channelsIn = inputs[0];
+    if (channelsIn && channelsIn[0]) {
+      const channels = channelsIn.map((ch) => {
+        const copy = new Float32Array(ch.length);
+        copy.set(ch);
+        return copy;
+      });
+      this.port.postMessage({ type: 'pcm', channels }, channels.map(ch => ch.buffer));
+    }
+    return true;
+  }
+}
+registerProcessor('pcm-capture', PcmCaptureProcessor);
+`;
+  const blob = new Blob([workletCode], { type: "application/javascript" });
+  const blobUrl = URL.createObjectURL(blob);
+  return blobUrl;
+}
+function fallbackScriptProcessor(options) {
+  const { ctx, sourceNode, streamSlicer } = options;
+  const bufferSize = 128;
+  const processor = ctx.createScriptProcessor(bufferSize, 1, 1);
+  processor.onaudioprocess = (ev) => {
+    const channels = [];
+    for (let i = 0; i < ev.inputBuffer.numberOfChannels; i++) {
+      const input = ev.inputBuffer.getChannelData(i);
+      const copy = new Float32Array(input.length);
+      copy.set(input);
+      channels.push(copy);
+    }
+    streamSlicer.push(channels);
+  };
+  sourceNode.connect(processor);
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  processor.connect(gain).connect(ctx.destination);
+}
+var useUserMedia_default = useUserMedia;
+//# sourceMappingURL=useUserMedia.js.map