video-frame-tools 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,44 @@
+# video-frame-tools
+
+一个用于提取视频帧的工具，提供浏览器端的封面截图能力。
+
+## 安装
+
+```bash
+pnpm add video-frame-tools
+# or
+npm i video-frame-tools
+# or
+yarn add video-frame-tools
+```
+
+## 使用
+
+```ts
+import { captureVideoFrame } from 'video-frame-tools';
+
+const blob = await captureVideoFrame(
+  'https://example.com/video.mp4',
+  1.5,
+);
+
+// 例如：生成 object URL
+const url = URL.createObjectURL(blob);
+```
+
+## API
+
+### captureVideoFrame(video, time, signal?)
+
+- `video`: `string | HTMLVideoElement`，视频 URL 或已存在的 `HTMLVideoElement`
+- `time`: `number`，截图时间点（秒）
+- `signal`: `AbortSignal`，可选，用于取消操作
+- 返回: `Promise<Blob>`
+
+## 运行环境
+
+仅支持浏览器环境（依赖 `HTMLVideoElement`、`createImageBitmap`、`Canvas`/`OffscreenCanvas`）。
+
+## License
+
+MIT

package/dist/index.cjs

@@ -1,10 +1,14 @@
 'use strict';
 
+var react = require('react');
+
+// src/hooks/useScreenshotTimeline.ts
+
 // src/utils/createVideoElement.ts
 function createVideoElement(src) {
   const videoEl = document.createElement("video");
   videoEl.crossOrigin = "anonymous";
-  videoEl.preload = "metadata";
+  videoEl.preload = "auto";
   videoEl.muted = true;
   videoEl.playsInline = true;
   videoEl.src = src;
@@ -39,7 +43,7 @@ async function awaitEvent(target, event, signal) {
   });
 }
 
-// src/index.ts
+// src/utils/captureVideoFrame.ts
 async function captureVideoFrame(video, time, signal) {
   const videoEl = typeof video === "string" ? createVideoElement(video) : video;
   if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {
@@ -56,29 +60,89 @@ async function captureVideoFrame(video, time, signal) {
   }
   signal == null ? void 0 : signal.throwIfAborted();
   const bitmap = await createImageBitmap(videoEl);
-  signal == null ? void 0 : signal.throwIfAborted();
-  const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(bitmap.width, bitmap.height) : Object.assign(document.createElement("canvas"), {
-    width: bitmap.width,
-    height: bitmap.height
-  });
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Canvas \u521D\u59CB\u5316\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762");
+  try {
+    signal == null ? void 0 : signal.throwIfAborted();
+    const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(bitmap.width, bitmap.height) : Object.assign(document.createElement("canvas"), {
+      width: bitmap.width,
+      height: bitmap.height
+    });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Canvas \u521D\u59CB\u5316\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762");
+    }
+    ctx.drawImage(bitmap, 0, 0);
+    const blob = canvas instanceof OffscreenCanvas ? await canvas.convertToBlob() : await new Promise((resolve, reject) => {
+      canvas.toBlob((result) => {
+        if (result) {
+          resolve(result);
+        } else {
+          reject(new Error("Canvas \u5BFC\u51FA\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762"));
+        }
+      });
+    });
+    signal == null ? void 0 : signal.throwIfAborted();
+    return blob;
+  } finally {
+    bitmap.close();
   }
-  ctx.drawImage(bitmap, 0, 0);
-  const blob = canvas instanceof OffscreenCanvas ? await canvas.convertToBlob() : await new Promise((resolve, reject) => {
-    canvas.toBlob((result) => {
-      if (result) {
-        resolve(result);
-      } else {
-        reject(new Error("Canvas \u5BFC\u51FA\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762"));
+}
+
+// src/utils/getVideoDuration.ts
+async function getVideoDuration(video, signal) {
+  const videoEl = typeof video === "string" ? createVideoElement(video) : video;
+  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {
+    await awaitEvent(videoEl, "loadedmetadata", signal);
+    signal == null ? void 0 : signal.throwIfAborted();
+  }
+  return Number.isFinite(videoEl.duration) ? videoEl.duration : 0;
+}
+
+// src/utils/getScreenshotTimeline.ts
+async function* getScreenshotTimeline(video, length, signal) {
+  const duration = await getVideoDuration(video, signal);
+  const step = duration / length;
+  for (let i = 0; i < length; i++) {
+    yield captureVideoFrame(video, i * step, signal);
+    signal == null ? void 0 : signal.throwIfAborted();
+  }
+}
+
+// src/hooks/useScreenshotTimeline.ts
+function useScreenshotTimeline(video, count = 10) {
+  const blobUrlCollectorRef = react.useRef(/* @__PURE__ */ new Set());
+  const [screenshotTimeline, setScreenshotTimeline] = react.useState([]);
+  react.useEffect(() => {
+    return () => {
+      for (const url of blobUrlCollectorRef.current) {
+        URL.revokeObjectURL(url);
       }
-    });
-  });
-  signal == null ? void 0 : signal.throwIfAborted();
-  return blob;
+      blobUrlCollectorRef.current.clear();
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!video || count <= 0) {
+      setScreenshotTimeline([]);
+      return void 0;
+    }
+    let isActive = true;
+    const controller = new AbortController();
+    setScreenshotTimeline([]);
+    (async () => {
+      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {
+        if (!isActive) return;
+        const url = URL.createObjectURL(frame);
+        setScreenshotTimeline((prev) => [...prev, url]);
+        blobUrlCollectorRef.current.add(url);
+      }
+    })();
+    return () => {
+      isActive = false;
+      controller.abort();
+    };
+  }, [video, count]);
+  return screenshotTimeline;
 }
 
-exports.captureVideoFrame = captureVideoFrame;
+exports.useScreenshotTimeline = useScreenshotTimeline;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/createVideoElement.ts","../src/utils/events.ts","../src/index.ts"],"names":["_a"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * 创建视频元素\n * @param src 视频地址\n * @returns 视频元素\n */\nexport function createVideoElement(src: string) {\n  const videoEl = document.createElement('video');\n  videoEl.crossOrigin = 'anonymous';\n  videoEl.preload = 'metadata';\n  videoEl.muted = true;\n  videoEl.playsInline = true;\n  videoEl.src = src;\n  return videoEl;\n}\n","export async function awaitEvent(target: EventTarget, event: string, signal?: AbortSignal) {\n  return new Promise<Event>((resolve, reject) => {\n    const onEvent = (evt: Event) => {\n      cleanup();\n      resolve(evt);\n    };\n\n    const onAbort = () => {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    };\n\n    const cleanup = () => {\n      target.removeEventListener(event, onEvent);\n      signal?.removeEventListener('abort', onAbort);\n    };\n\n    if (signal?.aborted) {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    }\n\n    target.addEventListener(event, onEvent, { once: true });\n    if (signal) {\n      signal.addEventListener('abort', onAbort, { once: true });\n    }\n  });\n}\n","import { createVideoElement } from './utils/createVideoElement';\nimport { awaitEvent } from './utils/events';\n\n/**\n * 捕获视频指定时间点截图\n * @param video - 视频 URL\n * @param time - 时间点\n * @param signal - AbortSignal 用于取消操作\n * @returns Blob\n */\nexport async function captureVideoFrame(\n  video: string | HTMLVideoElement,\n  time: number,\n  signal?: AbortSignal,\n) {\n  const videoEl = typeof video === 'string' ? createVideoElement(video) : video;\n  \n  // 确保视频元数据加载完成\n  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {\n    await awaitEvent(videoEl, 'loadedmetadata', signal);\n    signal?.throwIfAborted();\n  }\n\n  const duration = Number.isFinite(videoEl.duration) ? videoEl.duration : time;\n  const clampedTime = Math.min(Math.max(time, 0), duration);\n\n  if (Math.abs(videoEl.currentTime - clampedTime) > 0.01) {\n    videoEl.currentTime = clampedTime;\n    await awaitEvent(videoEl, 'seeked', signal);\n  } else if (videoEl.readyState < 2) {\n    await awaitEvent(videoEl, 'loadeddata', signal);\n  }\n\n  signal?.throwIfAborted();\n\n  const bitmap = await createImageBitmap(videoEl);\n  signal?.throwIfAborted();\n  const canvas =\n    typeof OffscreenCanvas !== 'undefined'\n      ? new OffscreenCanvas(bitmap.width, bitmap.height)\n      : Object.assign(document.createElement('canvas'), {\n          width: bitmap.width,\n          height: bitmap.height,\n        });\n\n  const ctx = canvas.getContext('2d');\n  if (!ctx) {\n    throw new Error('Canvas 初始化失败，无法生成封面');\n  }\n  ctx.drawImage(bitmap, 0, 0);\n  const blob =\n    canvas instanceof OffscreenCanvas\n      ? await canvas.convertToBlob()\n      : await new Promise<Blob>((resolve, reject) => {\n          canvas.toBlob((result) => {\n            if (result) {\n              resolve(result);\n            } else {\n              reject(new Error('Canvas 导出失败，无法生成封面'));\n            }\n          });\n        });\n  signal?.throwIfAborted();\n  return blob;\n}\n"]}
+{"version":3,"sources":["../src/utils/createVideoElement.ts","../src/utils/events.ts","../src/utils/captureVideoFrame.ts","../src/utils/getVideoDuration.ts","../src/utils/getScreenshotTimeline.ts","../src/hooks/useScreenshotTimeline.ts"],"names":["_a","useRef","useState","useEffect"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * 创建配置好的视频元素\n * @param src - 视频 URL 地址\n * @returns HTMLVideoElement - 配置了跨域、预加载元数据、静音等属性的视频元素\n */\nexport function createVideoElement(src: string) {\n  const videoEl = document.createElement('video');\n  videoEl.crossOrigin = 'anonymous';\n  videoEl.preload = 'auto';\n  videoEl.muted = true;\n  videoEl.playsInline = true;\n  videoEl.src = src;\n  return videoEl;\n}\n","/**\n * 等待目标对象触发指定事件\n * @param target - 事件目标对象\n * @param event - 事件名称\n * @param signal - 可选的 AbortSignal，用于取消等待\n * @returns Promise，在事件触发时 resolve，在取消时 reject\n * @throws 当操作被取消时抛出错误\n */\nexport async function awaitEvent(target: EventTarget, event: string, signal?: AbortSignal) {\n  return new Promise<Event>((resolve, reject) => {\n    const onEvent = (evt: Event) => {\n      cleanup();\n      resolve(evt);\n    };\n\n    const onAbort = () => {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    };\n\n    const cleanup = () => {\n      target.removeEventListener(event, onEvent);\n      signal?.removeEventListener('abort', onAbort);\n    };\n\n    if (signal?.aborted) {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    }\n\n    target.addEventListener(event, onEvent, { once: true });\n    if (signal) {\n      signal.addEventListener('abort', onAbort, { once: true });\n    }\n  });\n}\n","import { createVideoElement } from './createVideoElement';\nimport { awaitEvent } from './events';\n\n/**\n * 捕获视频指定时间点的截图\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素\n * @param time - 截图时间点（秒）\n * @param signal - 可选的 AbortSignal，用于取消操作\n * @returns Promise，返回截图的 Blob 对象\n * @throws 当 Canvas 初始化失败或导出失败时抛出错误\n * @example\n * ```ts\n * const blob = await captureVideoFrame('video.mp4', 1.5);\n * const url = URL.createObjectURL(blob);\n * ```\n */\nexport async function captureVideoFrame(\n  video: string | HTMLVideoElement,\n  time: number,\n  signal?: AbortSignal,\n) {\n  const videoEl = typeof video === 'string' ? createVideoElement(video) : video;\n  \n  // 确保视频元数据加载完成\n  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {\n    await awaitEvent(videoEl, 'loadedmetadata', signal);\n    signal?.throwIfAborted();\n  }\n\n  const duration = Number.isFinite(videoEl.duration) ? videoEl.duration : time;\n  const clampedTime = Math.min(Math.max(time, 0), duration);\n\n  if (Math.abs(videoEl.currentTime - clampedTime) > 0.01) {\n    videoEl.currentTime = clampedTime;\n    await awaitEvent(videoEl, 'seeked', signal);\n  } else if (videoEl.readyState < 2) {\n    await awaitEvent(videoEl, 'loadeddata', signal);\n  }\n\n  signal?.throwIfAborted();\n\n  const bitmap = await createImageBitmap(videoEl);\n  try {\n    signal?.throwIfAborted();\n    const canvas =\n      typeof OffscreenCanvas !== 'undefined'\n        ? new OffscreenCanvas(bitmap.width, bitmap.height)\n        : Object.assign(document.createElement('canvas'), {\n            width: bitmap.width,\n            height: bitmap.height,\n          });\n\n    const ctx = canvas.getContext('2d');\n    if (!ctx) {\n      throw new Error('Canvas 初始化失败，无法生成封面');\n    }\n    ctx.drawImage(bitmap, 0, 0);\n    const blob =\n    canvas instanceof OffscreenCanvas\n      ? await canvas.convertToBlob()\n      : await new Promise<Blob>((resolve, reject) => {\n          canvas.toBlob((result) => {\n            if (result) {\n              resolve(result);\n            } else {\n              reject(new Error('Canvas 导出失败，无法生成封面'));\n            }\n          });\n        });\n    signal?.throwIfAborted();\n    return blob;\n  } finally {\n    bitmap.close();\n  }\n}\n","import { createVideoElement } from './createVideoElement';\nimport { awaitEvent } from './events';\n\n/**\n * 获取视频时长\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素\n * @param signal - 可选的 AbortSignal，用于取消操作\n * @returns Promise，返回视频时长（秒），如果无法获取则返回 0\n * @throws 当操作被取消时抛出错误\n */\nexport async function getVideoDuration(video: string | HTMLVideoElement, signal?: AbortSignal) {\n  const videoEl = typeof video === 'string' ? createVideoElement(video) : video;\n  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {\n    await awaitEvent(videoEl, 'loadedmetadata', signal);\n    signal?.throwIfAborted();\n  }\n  return Number.isFinite(videoEl.duration) ? videoEl.duration : 0;\n}","import { captureVideoFrame } from './captureVideoFrame';\nimport { getVideoDuration } from './getVideoDuration';\n\n/**\n * 生成视频截图时间轴\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素\n * @param length - 截图数量\n * @param signal - 可选的 AbortSignal，用于取消操作\n * @yields Promise<Blob> - 每次 yield 返回一个截图的 Blob 对象\n * @throws 当操作被取消时抛出错误\n * @example\n * ```ts\n * for await (const frame of getScreenshotTimeline('video.mp4', 10)) {\n *   console.log('获取到一帧截图', frame);\n * }\n * ```\n */\nexport async function* getScreenshotTimeline(video: string | HTMLVideoElement, length: number, signal?: AbortSignal) {\n  const duration = await getVideoDuration(video, signal);\n  const step = duration / length;\n  for (let i = 0; i < length; i++) {\n    yield captureVideoFrame(video, i * step, signal);\n    signal?.throwIfAborted();\n  }\n}","import { useEffect, useState, useRef } from 'react';\nimport { getScreenshotTimeline } from '../utils';\n\n/**\n * React Hook：生成视频截图时间轴\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素，支持 null 或 undefined\n * @param count - 截图数量，默认为 10\n * @returns Blob[] - 截图数组，会随着截图生成逐步更新\n * @example\n * ```tsx\n * const frames = useScreenshotTimeline('video.mp4', 10);\n * return (\n *   <div>\n *     {frames.map((frame, i) => (\n *       <img key={i} src={URL.createObjectURL(frame)} />\n *     ))}\n *   </div>\n * );\n * ```\n */\nexport function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count = 10): string[] {\n  const blobUrlCollectorRef = useRef<Set<string>>(new Set());\n  const [screenshotTimeline, setScreenshotTimeline] = useState<string[]>([]);\n\n  useEffect(() => {\n    return () => {\n      for (const url of blobUrlCollectorRef.current) {\n        URL.revokeObjectURL(url);\n      }\n      blobUrlCollectorRef.current.clear();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!video || count <= 0) {\n      setScreenshotTimeline([]);\n      return undefined;\n    }\n\n    let isActive = true;\n    const controller = new AbortController();\n\n    setScreenshotTimeline([]);\n\n    (async () => {\n      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {\n        if (!isActive) return;\n        const url = URL.createObjectURL(frame)\n        setScreenshotTimeline((prev) => [...prev, url]);\n        blobUrlCollectorRef.current.add(url);\n      }\n    })();\n\n    return () => {\n      isActive = false;\n      controller.abort();\n    };\n  }, [video, count]);\n\n  return screenshotTimeline;\n}"]}

package/dist/index.d.cts

@@ -1,10 +1,20 @@
 /**
- * 捕获视频指定时间点截图
- * @param video - 视频 URL
- * @param time - 时间点
- * @param signal - AbortSignal 用于取消操作
- * @returns Blob
+ * React Hook：生成视频截图时间轴
+ * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素，支持 null 或 undefined
+ * @param count - 截图数量，默认为 10
+ * @returns Blob[] - 截图数组，会随着截图生成逐步更新
+ * @example
+ * ```tsx
+ * const frames = useScreenshotTimeline('video.mp4', 10);
+ * return (
+ *   <div>
+ *     {frames.map((frame, i) => (
+ *       <img key={i} src={URL.createObjectURL(frame)} />
+ *     ))}
+ *   </div>
+ * );
+ * ```
  */
-declare function captureVideoFrame(video: string | HTMLVideoElement, time: number, signal?: AbortSignal): Promise<Blob>;
+declare function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count?: number): string[];
 
-export { captureVideoFrame };
+export { useScreenshotTimeline };

package/dist/index.d.ts

@@ -1,10 +1,20 @@
 /**
- * 捕获视频指定时间点截图
- * @param video - 视频 URL
- * @param time - 时间点
- * @param signal - AbortSignal 用于取消操作
- * @returns Blob
+ * React Hook：生成视频截图时间轴
+ * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素，支持 null 或 undefined
+ * @param count - 截图数量，默认为 10
+ * @returns Blob[] - 截图数组，会随着截图生成逐步更新
+ * @example
+ * ```tsx
+ * const frames = useScreenshotTimeline('video.mp4', 10);
+ * return (
+ *   <div>
+ *     {frames.map((frame, i) => (
+ *       <img key={i} src={URL.createObjectURL(frame)} />
+ *     ))}
+ *   </div>
+ * );
+ * ```
  */
-declare function captureVideoFrame(video: string | HTMLVideoElement, time: number, signal?: AbortSignal): Promise<Blob>;
+declare function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count?: number): string[];
 
-export { captureVideoFrame };
+export { useScreenshotTimeline };

package/dist/index.js

@@ -1,8 +1,12 @@
+import { useRef, useState, useEffect } from 'react';
+
+// src/hooks/useScreenshotTimeline.ts
+
 // src/utils/createVideoElement.ts
 function createVideoElement(src) {
   const videoEl = document.createElement("video");
   videoEl.crossOrigin = "anonymous";
-  videoEl.preload = "metadata";
+  videoEl.preload = "auto";
   videoEl.muted = true;
   videoEl.playsInline = true;
   videoEl.src = src;
@@ -37,7 +41,7 @@ async function awaitEvent(target, event, signal) {
   });
 }
 
-// src/index.ts
+// src/utils/captureVideoFrame.ts
 async function captureVideoFrame(video, time, signal) {
   const videoEl = typeof video === "string" ? createVideoElement(video) : video;
   if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {
@@ -54,29 +58,89 @@ async function captureVideoFrame(video, time, signal) {
   }
   signal == null ? void 0 : signal.throwIfAborted();
   const bitmap = await createImageBitmap(videoEl);
-  signal == null ? void 0 : signal.throwIfAborted();
-  const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(bitmap.width, bitmap.height) : Object.assign(document.createElement("canvas"), {
-    width: bitmap.width,
-    height: bitmap.height
-  });
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Canvas \u521D\u59CB\u5316\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762");
+  try {
+    signal == null ? void 0 : signal.throwIfAborted();
+    const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(bitmap.width, bitmap.height) : Object.assign(document.createElement("canvas"), {
+      width: bitmap.width,
+      height: bitmap.height
+    });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Canvas \u521D\u59CB\u5316\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762");
+    }
+    ctx.drawImage(bitmap, 0, 0);
+    const blob = canvas instanceof OffscreenCanvas ? await canvas.convertToBlob() : await new Promise((resolve, reject) => {
+      canvas.toBlob((result) => {
+        if (result) {
+          resolve(result);
+        } else {
+          reject(new Error("Canvas \u5BFC\u51FA\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762"));
+        }
+      });
+    });
+    signal == null ? void 0 : signal.throwIfAborted();
+    return blob;
+  } finally {
+    bitmap.close();
   }
-  ctx.drawImage(bitmap, 0, 0);
-  const blob = canvas instanceof OffscreenCanvas ? await canvas.convertToBlob() : await new Promise((resolve, reject) => {
-    canvas.toBlob((result) => {
-      if (result) {
-        resolve(result);
-      } else {
-        reject(new Error("Canvas \u5BFC\u51FA\u5931\u8D25\uFF0C\u65E0\u6CD5\u751F\u6210\u5C01\u9762"));
+}
+
+// src/utils/getVideoDuration.ts
+async function getVideoDuration(video, signal) {
+  const videoEl = typeof video === "string" ? createVideoElement(video) : video;
+  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {
+    await awaitEvent(videoEl, "loadedmetadata", signal);
+    signal == null ? void 0 : signal.throwIfAborted();
+  }
+  return Number.isFinite(videoEl.duration) ? videoEl.duration : 0;
+}
+
+// src/utils/getScreenshotTimeline.ts
+async function* getScreenshotTimeline(video, length, signal) {
+  const duration = await getVideoDuration(video, signal);
+  const step = duration / length;
+  for (let i = 0; i < length; i++) {
+    yield captureVideoFrame(video, i * step, signal);
+    signal == null ? void 0 : signal.throwIfAborted();
+  }
+}
+
+// src/hooks/useScreenshotTimeline.ts
+function useScreenshotTimeline(video, count = 10) {
+  const blobUrlCollectorRef = useRef(/* @__PURE__ */ new Set());
+  const [screenshotTimeline, setScreenshotTimeline] = useState([]);
+  useEffect(() => {
+    return () => {
+      for (const url of blobUrlCollectorRef.current) {
+        URL.revokeObjectURL(url);
       }
-    });
-  });
-  signal == null ? void 0 : signal.throwIfAborted();
-  return blob;
+      blobUrlCollectorRef.current.clear();
+    };
+  }, []);
+  useEffect(() => {
+    if (!video || count <= 0) {
+      setScreenshotTimeline([]);
+      return void 0;
+    }
+    let isActive = true;
+    const controller = new AbortController();
+    setScreenshotTimeline([]);
+    (async () => {
+      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {
+        if (!isActive) return;
+        const url = URL.createObjectURL(frame);
+        setScreenshotTimeline((prev) => [...prev, url]);
+        blobUrlCollectorRef.current.add(url);
+      }
+    })();
+    return () => {
+      isActive = false;
+      controller.abort();
+    };
+  }, [video, count]);
+  return screenshotTimeline;
 }
 
-export { captureVideoFrame };
+export { useScreenshotTimeline };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/createVideoElement.ts","../src/utils/events.ts","../src/index.ts"],"names":["_a"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * 创建视频元素\n * @param src 视频地址\n * @returns 视频元素\n */\nexport function createVideoElement(src: string) {\n  const videoEl = document.createElement('video');\n  videoEl.crossOrigin = 'anonymous';\n  videoEl.preload = 'metadata';\n  videoEl.muted = true;\n  videoEl.playsInline = true;\n  videoEl.src = src;\n  return videoEl;\n}\n","export async function awaitEvent(target: EventTarget, event: string, signal?: AbortSignal) {\n  return new Promise<Event>((resolve, reject) => {\n    const onEvent = (evt: Event) => {\n      cleanup();\n      resolve(evt);\n    };\n\n    const onAbort = () => {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    };\n\n    const cleanup = () => {\n      target.removeEventListener(event, onEvent);\n      signal?.removeEventListener('abort', onAbort);\n    };\n\n    if (signal?.aborted) {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    }\n\n    target.addEventListener(event, onEvent, { once: true });\n    if (signal) {\n      signal.addEventListener('abort', onAbort, { once: true });\n    }\n  });\n}\n","import { createVideoElement } from './utils/createVideoElement';\nimport { awaitEvent } from './utils/events';\n\n/**\n * 捕获视频指定时间点截图\n * @param video - 视频 URL\n * @param time - 时间点\n * @param signal - AbortSignal 用于取消操作\n * @returns Blob\n */\nexport async function captureVideoFrame(\n  video: string | HTMLVideoElement,\n  time: number,\n  signal?: AbortSignal,\n) {\n  const videoEl = typeof video === 'string' ? createVideoElement(video) : video;\n  \n  // 确保视频元数据加载完成\n  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {\n    await awaitEvent(videoEl, 'loadedmetadata', signal);\n    signal?.throwIfAborted();\n  }\n\n  const duration = Number.isFinite(videoEl.duration) ? videoEl.duration : time;\n  const clampedTime = Math.min(Math.max(time, 0), duration);\n\n  if (Math.abs(videoEl.currentTime - clampedTime) > 0.01) {\n    videoEl.currentTime = clampedTime;\n    await awaitEvent(videoEl, 'seeked', signal);\n  } else if (videoEl.readyState < 2) {\n    await awaitEvent(videoEl, 'loadeddata', signal);\n  }\n\n  signal?.throwIfAborted();\n\n  const bitmap = await createImageBitmap(videoEl);\n  signal?.throwIfAborted();\n  const canvas =\n    typeof OffscreenCanvas !== 'undefined'\n      ? new OffscreenCanvas(bitmap.width, bitmap.height)\n      : Object.assign(document.createElement('canvas'), {\n          width: bitmap.width,\n          height: bitmap.height,\n        });\n\n  const ctx = canvas.getContext('2d');\n  if (!ctx) {\n    throw new Error('Canvas 初始化失败，无法生成封面');\n  }\n  ctx.drawImage(bitmap, 0, 0);\n  const blob =\n    canvas instanceof OffscreenCanvas\n      ? await canvas.convertToBlob()\n      : await new Promise<Blob>((resolve, reject) => {\n          canvas.toBlob((result) => {\n            if (result) {\n              resolve(result);\n            } else {\n              reject(new Error('Canvas 导出失败，无法生成封面'));\n            }\n          });\n        });\n  signal?.throwIfAborted();\n  return blob;\n}\n"]}
+{"version":3,"sources":["../src/utils/createVideoElement.ts","../src/utils/events.ts","../src/utils/captureVideoFrame.ts","../src/utils/getVideoDuration.ts","../src/utils/getScreenshotTimeline.ts","../src/hooks/useScreenshotTimeline.ts"],"names":["_a"],"mappings":";;;;;AAKO,SAAS,mBAAmB,GAAA,EAAa;AAC9C,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC9C,EAAA,OAAA,CAAQ,WAAA,GAAc,WAAA;AACtB,EAAA,OAAA,CAAQ,OAAA,GAAU,MAAA;AAClB,EAAA,OAAA,CAAQ,KAAA,GAAQ,IAAA;AAChB,EAAA,OAAA,CAAQ,WAAA,GAAc,IAAA;AACtB,EAAA,OAAA,CAAQ,GAAA,GAAM,GAAA;AACd,EAAA,OAAO,OAAA;AACT;;;ACLA,eAAsB,UAAA,CAAW,MAAA,EAAqB,KAAA,EAAe,MAAA,EAAsB;AACzF,EAAA,OAAO,IAAI,OAAA,CAAe,CAAC,OAAA,EAAS,MAAA,KAAW;AATjD,IAAA,IAAA,EAAA;AAUI,IAAA,MAAM,OAAA,GAAU,CAAC,GAAA,KAAe;AAC9B,MAAA,OAAA,EAAQ;AACR,MAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AAf1B,MAAA,IAAAA,GAAAA;AAgBM,MAAA,OAAA,EAAQ;AACR,MAAA,MAAA,CAAA,CAAOA,GAAAA,GAAA,iCAAQ,MAAA,KAAR,IAAA,GAAAA,MAAkB,IAAI,KAAA,CAAM,gCAAO,CAAC,CAAA;AAAA,IAC7C,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,MAAA,CAAO,mBAAA,CAAoB,OAAO,OAAO,CAAA;AACzC,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,oBAAoB,OAAA,EAAS,OAAA,CAAA;AAAA,IACvC,CAAA;AAEA,IAAA,IAAI,iCAAQ,OAAA,EAAS;AACnB,MAAA,OAAA,EAAQ;AACR,MAAA,MAAA,CAAA,CAAO,sCAAQ,MAAA,KAAR,IAAA,GAAA,EAAA,GAAkB,IAAI,KAAA,CAAM,gCAAO,CAAC,CAAA;AAAA,IAC7C;AAEA,IAAA,MAAA,CAAO,iBAAiB,KAAA,EAAO,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA;AACtD,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAA,CAAO,iBAAiB,OAAA,EAAS,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA;AAAA,IAC1D;AAAA,EACF,CAAC,CAAA;AACH;;;ACnBA,eAAsB,iBAAA,CACpB,KAAA,EACA,IAAA,EACA,MAAA,EACA;AACA,EAAA,MAAM,UAAU,OAAO,KAAA,KAAU,QAAA,GAAW,kBAAA,CAAmB,KAAK,CAAA,GAAI,KAAA;AAGxE,EAAA,IAAI,OAAA,CAAQ,UAAA,GAAa,gBAAA,CAAiB,aAAA,EAAe;AACvD,IAAA,MAAM,UAAA,CAAW,OAAA,EAAS,gBAAA,EAAkB,MAAM,CAAA;AAClD,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,cAAA,EAAA;AAAA,EACV;AAEA,EAAA,MAAM,WAAW,MAAA,CAAO,QAAA,CAAS,QAAQ,QAAQ,CAAA,GAAI,QAAQ,QAAA,GAAW,IAAA;AACxE,EAAA,MAAM,WAAA,GAAc,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,IAAA,EAAM,CAAC,GAAG,QAAQ,CAAA;AAExD,EAAA,IAAI,KAAK,GAAA,CAAI,OAAA,CAAQ,WAAA,GAAc,WAAW,IAAI,IAAA,EAAM;AACtD,IAAA,OAAA,CAAQ,WAAA,GAAc,WAAA;AACtB,IAAA,MAAM,UAAA,CAAW,OAAA,EAAS,QAAA,EAAU,MAAM,CAAA;AAAA,EAC5C,CAAA,MAAA,IAAW,OAAA,CAAQ,UAAA,GAAa,CAAA,EAAG;AACjC,IAAA,MAAM,UAAA,CAAW,OAAA,EAAS,YAAA,EAAc,MAAM,CAAA;AAAA,EAChD;AAEA,EAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,cAAA,EAAA;AAER,EAAA,MAAM,MAAA,GAAS,MAAM,iBAAA,CAAkB,OAAO,CAAA;AAC9C,EAAA,IAAI;AACF,IAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,cAAA,EAAA;AACR,IAAA,MAAM,SACJ,OAAO,eAAA,KAAoB,WAAA,GACvB,IAAI,gBAAgB,MAAA,CAAO,KAAA,EAAO,MAAA,CAAO,MAAM,IAC/C,MAAA,CAAO,MAAA,CAAO,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA,EAAG;AAAA,MAC9C,OAAO,MAAA,CAAO,KAAA;AAAA,MACd,QAAQ,MAAA,CAAO;AAAA,KAChB,CAAA;AAEP,IAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAA;AAClC,IAAA,IAAI,CAAC,GAAA,EAAK;AACR,MAAA,MAAM,IAAI,MAAM,iFAAqB,CAAA;AAAA,IACvC;AACA,IAAA,GAAA,CAAI,SAAA,CAAU,MAAA,EAAQ,CAAA,EAAG,CAAC,CAAA;AAC1B,IAAA,MAAM,IAAA,GACN,MAAA,YAAkB,eAAA,GACd,MAAM,MAAA,CAAO,aAAA,EAAc,GAC3B,MAAM,IAAI,OAAA,CAAc,CAAC,OAAA,EAAS,MAAA,KAAW;AAC3C,MAAA,MAAA,CAAO,MAAA,CAAO,CAAC,MAAA,KAAW;AACxB,QAAA,IAAI,MAAA,EAAQ;AACV,UAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,QAChB,CAAA,MAAO;AACL,UAAA,MAAA,CAAO,IAAI,KAAA,CAAM,2EAAoB,CAAC,CAAA;AAAA,QACxC;AAAA,MACF,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACL,IAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,cAAA,EAAA;AACR,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,SAAE;AACA,IAAA,MAAA,CAAO,KAAA,EAAM;AAAA,EACf;AACF;;;AChEA,eAAsB,gBAAA,CAAiB,OAAkC,MAAA,EAAsB;AAC7F,EAAA,MAAM,UAAU,OAAO,KAAA,KAAU,QAAA,GAAW,kBAAA,CAAmB,KAAK,CAAA,GAAI,KAAA;AACxE,EAAA,IAAI,OAAA,CAAQ,UAAA,GAAa,gBAAA,CAAiB,aAAA,EAAe;AACvD,IAAA,MAAM,UAAA,CAAW,OAAA,EAAS,gBAAA,EAAkB,MAAM,CAAA;AAClD,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,cAAA,EAAA;AAAA,EACV;AACA,EAAA,OAAO,OAAO,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,GAAI,QAAQ,QAAA,GAAW,CAAA;AAChE;;;ACAA,gBAAuB,qBAAA,CAAsB,KAAA,EAAkC,MAAA,EAAgB,MAAA,EAAsB;AACnH,EAAA,MAAM,QAAA,GAAW,MAAM,gBAAA,CAAiB,KAAA,EAAO,MAAM,CAAA;AACrD,EAAA,MAAM,OAAO,QAAA,GAAW,MAAA;AACxB,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,MAAA,EAAQ,CAAA,EAAA,EAAK;AAC/B,IAAA,MAAM,iBAAA,CAAkB,KAAA,EAAO,CAAA,GAAI,IAAA,EAAM,MAAM,CAAA;AAC/C,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,cAAA,EAAA;AAAA,EACV;AACF;;;ACJO,SAAS,qBAAA,CAAsB,KAAA,EAAqD,KAAA,GAAQ,EAAA,EAAc;AAC/G,EAAA,MAAM,mBAAA,GAAsB,MAAA,iBAAoB,IAAI,GAAA,EAAK,CAAA;AACzD,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEzE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,MAAW,GAAA,IAAO,oBAAoB,OAAA,EAAS;AAC7C,QAAA,GAAA,CAAI,gBAAgB,GAAG,CAAA;AAAA,MACzB;AACA,MAAA,mBAAA,CAAoB,QAAQ,KAAA,EAAM;AAAA,IACpC,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,IAAS,CAAA,EAAG;AACxB,MAAA,qBAAA,CAAsB,EAAE,CAAA;AACxB,MAAA,OAAO,MAAA;AAAA,IACT;AAEA,IAAA,IAAI,QAAA,GAAW,IAAA;AACf,IAAA,MAAM,UAAA,GAAa,IAAI,eAAA,EAAgB;AAEvC,IAAA,qBAAA,CAAsB,EAAE,CAAA;AAExB,IAAA,CAAC,YAAY;AACX,MAAA,WAAA,MAAiB,SAAS,qBAAA,CAAsB,KAAA,EAAO,KAAA,EAAO,UAAA,CAAW,MAAM,CAAA,EAAG;AAChF,QAAA,IAAI,CAAC,QAAA,EAAU;AACf,QAAA,MAAM,GAAA,GAAM,GAAA,CAAI,eAAA,CAAgB,KAAK,CAAA;AACrC,QAAA,qBAAA,CAAsB,CAAC,IAAA,KAAS,CAAC,GAAG,IAAA,EAAM,GAAG,CAAC,CAAA;AAC9C,QAAA,mBAAA,CAAoB,OAAA,CAAQ,IAAI,GAAG,CAAA;AAAA,MACrC;AAAA,IACF,CAAA,GAAG;AAEH,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,GAAW,KAAA;AACX,MAAA,UAAA,CAAW,KAAA,EAAM;AAAA,IACnB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,kBAAA;AACT","file":"index.js","sourcesContent":["/**\n * 创建配置好的视频元素\n * @param src - 视频 URL 地址\n * @returns HTMLVideoElement - 配置了跨域、预加载元数据、静音等属性的视频元素\n */\nexport function createVideoElement(src: string) {\n  const videoEl = document.createElement('video');\n  videoEl.crossOrigin = 'anonymous';\n  videoEl.preload = 'auto';\n  videoEl.muted = true;\n  videoEl.playsInline = true;\n  videoEl.src = src;\n  return videoEl;\n}\n","/**\n * 等待目标对象触发指定事件\n * @param target - 事件目标对象\n * @param event - 事件名称\n * @param signal - 可选的 AbortSignal，用于取消等待\n * @returns Promise，在事件触发时 resolve，在取消时 reject\n * @throws 当操作被取消时抛出错误\n */\nexport async function awaitEvent(target: EventTarget, event: string, signal?: AbortSignal) {\n  return new Promise<Event>((resolve, reject) => {\n    const onEvent = (evt: Event) => {\n      cleanup();\n      resolve(evt);\n    };\n\n    const onAbort = () => {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    };\n\n    const cleanup = () => {\n      target.removeEventListener(event, onEvent);\n      signal?.removeEventListener('abort', onAbort);\n    };\n\n    if (signal?.aborted) {\n      cleanup();\n      reject(signal?.reason ?? new Error('操作已取消'));\n    }\n\n    target.addEventListener(event, onEvent, { once: true });\n    if (signal) {\n      signal.addEventListener('abort', onAbort, { once: true });\n    }\n  });\n}\n","import { createVideoElement } from './createVideoElement';\nimport { awaitEvent } from './events';\n\n/**\n * 捕获视频指定时间点的截图\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素\n * @param time - 截图时间点（秒）\n * @param signal - 可选的 AbortSignal，用于取消操作\n * @returns Promise，返回截图的 Blob 对象\n * @throws 当 Canvas 初始化失败或导出失败时抛出错误\n * @example\n * ```ts\n * const blob = await captureVideoFrame('video.mp4', 1.5);\n * const url = URL.createObjectURL(blob);\n * ```\n */\nexport async function captureVideoFrame(\n  video: string | HTMLVideoElement,\n  time: number,\n  signal?: AbortSignal,\n) {\n  const videoEl = typeof video === 'string' ? createVideoElement(video) : video;\n  \n  // 确保视频元数据加载完成\n  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {\n    await awaitEvent(videoEl, 'loadedmetadata', signal);\n    signal?.throwIfAborted();\n  }\n\n  const duration = Number.isFinite(videoEl.duration) ? videoEl.duration : time;\n  const clampedTime = Math.min(Math.max(time, 0), duration);\n\n  if (Math.abs(videoEl.currentTime - clampedTime) > 0.01) {\n    videoEl.currentTime = clampedTime;\n    await awaitEvent(videoEl, 'seeked', signal);\n  } else if (videoEl.readyState < 2) {\n    await awaitEvent(videoEl, 'loadeddata', signal);\n  }\n\n  signal?.throwIfAborted();\n\n  const bitmap = await createImageBitmap(videoEl);\n  try {\n    signal?.throwIfAborted();\n    const canvas =\n      typeof OffscreenCanvas !== 'undefined'\n        ? new OffscreenCanvas(bitmap.width, bitmap.height)\n        : Object.assign(document.createElement('canvas'), {\n            width: bitmap.width,\n            height: bitmap.height,\n          });\n\n    const ctx = canvas.getContext('2d');\n    if (!ctx) {\n      throw new Error('Canvas 初始化失败，无法生成封面');\n    }\n    ctx.drawImage(bitmap, 0, 0);\n    const blob =\n    canvas instanceof OffscreenCanvas\n      ? await canvas.convertToBlob()\n      : await new Promise<Blob>((resolve, reject) => {\n          canvas.toBlob((result) => {\n            if (result) {\n              resolve(result);\n            } else {\n              reject(new Error('Canvas 导出失败，无法生成封面'));\n            }\n          });\n        });\n    signal?.throwIfAborted();\n    return blob;\n  } finally {\n    bitmap.close();\n  }\n}\n","import { createVideoElement } from './createVideoElement';\nimport { awaitEvent } from './events';\n\n/**\n * 获取视频时长\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素\n * @param signal - 可选的 AbortSignal，用于取消操作\n * @returns Promise，返回视频时长（秒），如果无法获取则返回 0\n * @throws 当操作被取消时抛出错误\n */\nexport async function getVideoDuration(video: string | HTMLVideoElement, signal?: AbortSignal) {\n  const videoEl = typeof video === 'string' ? createVideoElement(video) : video;\n  if (videoEl.readyState < HTMLMediaElement.HAVE_METADATA) {\n    await awaitEvent(videoEl, 'loadedmetadata', signal);\n    signal?.throwIfAborted();\n  }\n  return Number.isFinite(videoEl.duration) ? videoEl.duration : 0;\n}","import { captureVideoFrame } from './captureVideoFrame';\nimport { getVideoDuration } from './getVideoDuration';\n\n/**\n * 生成视频截图时间轴\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素\n * @param length - 截图数量\n * @param signal - 可选的 AbortSignal，用于取消操作\n * @yields Promise<Blob> - 每次 yield 返回一个截图的 Blob 对象\n * @throws 当操作被取消时抛出错误\n * @example\n * ```ts\n * for await (const frame of getScreenshotTimeline('video.mp4', 10)) {\n *   console.log('获取到一帧截图', frame);\n * }\n * ```\n */\nexport async function* getScreenshotTimeline(video: string | HTMLVideoElement, length: number, signal?: AbortSignal) {\n  const duration = await getVideoDuration(video, signal);\n  const step = duration / length;\n  for (let i = 0; i < length; i++) {\n    yield captureVideoFrame(video, i * step, signal);\n    signal?.throwIfAborted();\n  }\n}","import { useEffect, useState, useRef } from 'react';\nimport { getScreenshotTimeline } from '../utils';\n\n/**\n * React Hook：生成视频截图时间轴\n * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素，支持 null 或 undefined\n * @param count - 截图数量，默认为 10\n * @returns Blob[] - 截图数组，会随着截图生成逐步更新\n * @example\n * ```tsx\n * const frames = useScreenshotTimeline('video.mp4', 10);\n * return (\n *   <div>\n *     {frames.map((frame, i) => (\n *       <img key={i} src={URL.createObjectURL(frame)} />\n *     ))}\n *   </div>\n * );\n * ```\n */\nexport function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count = 10): string[] {\n  const blobUrlCollectorRef = useRef<Set<string>>(new Set());\n  const [screenshotTimeline, setScreenshotTimeline] = useState<string[]>([]);\n\n  useEffect(() => {\n    return () => {\n      for (const url of blobUrlCollectorRef.current) {\n        URL.revokeObjectURL(url);\n      }\n      blobUrlCollectorRef.current.clear();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!video || count <= 0) {\n      setScreenshotTimeline([]);\n      return undefined;\n    }\n\n    let isActive = true;\n    const controller = new AbortController();\n\n    setScreenshotTimeline([]);\n\n    (async () => {\n      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {\n        if (!isActive) return;\n        const url = URL.createObjectURL(frame)\n        setScreenshotTimeline((prev) => [...prev, url]);\n        blobUrlCollectorRef.current.add(url);\n      }\n    })();\n\n    return () => {\n      isActive = false;\n      controller.abort();\n    };\n  }, [video, count]);\n\n  return screenshotTimeline;\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "video-frame-tools",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "一个用于提取视频帧的工具",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -34,15 +34,20 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@types/node": "^22.10.2",
+    "@types/react": "^19.2.8",
+    "react": "^19.2.3",
     "tsup": "^8.0.2",
     "typescript": "^5.6.3"
   },
+  "peerDependencies": {
+    "react": ">=19.0.0"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "changeset": "changeset",
-    "version": "changeset version",
+    "version-package": "changeset version",
     "release": "changeset publish"
   }
 }