video-frame-tools 0.0.4 → 0.0.5

package/README.md

@@ -2,6 +2,11 @@
 
 一个用于提取视频帧的工具，提供浏览器端的封面截图能力。
 
+[![npm version](https://img.shields.io/npm/v/video-frame-tools.svg)](https://www.npmjs.com/package/video-frame-tools)
+[![npm downloads](https://img.shields.io/npm/dm/video-frame-tools.svg)](https://www.npmjs.com/package/video-frame-tools)
+[![license](https://img.shields.io/npm/l/video-frame-tools.svg)](https://github.com/RaineySpace/video-frame-tools/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.1-blue.svg)](https://www.typescriptlang.org/)
+
 ## 安装
 
 ```bash
@@ -26,6 +31,19 @@ const blob = await captureVideoFrame(
 const url = URL.createObjectURL(blob);
 ```
 
+```tsx
+import { useScreenshotTimeline } from 'video-frame-tools';
+
+const frames = useScreenshotTimeline('https://example.com/video.mp4', 10);
+return (
+  <div>
+    {frames.map((frame, i) => (
+      <img key={i} src={frame ?? undefined} />
+    ))}
+  </div>
+);
+```
+
 ## API
 
 ### captureVideoFrame(video, time, signal?)
@@ -35,6 +53,12 @@ const url = URL.createObjectURL(blob);
 - `signal`: `AbortSignal`，可选，用于取消操作
 - 返回: `Promise<Blob>`
 
+### useScreenshotTimeline(video, count?)
+
+- `video`: `string | HTMLVideoElement | null | undefined`，视频 URL 或已存在的 `HTMLVideoElement`
+- `count`: `number`，截图数量，默认 10
+- 返回: `(string | null)[]`，截图对应的 `object URL` 数组，`null` 表示尚未生成该帧
+
 ## 运行环境
 
 仅支持浏览器环境（依赖 `HTMLVideoElement`、`createImageBitmap`、`Canvas`/`OffscreenCanvas`）。

package/dist/index.cjs

@@ -121,12 +121,12 @@ function useScreenshotTimeline(video, count = 10) {
   }, []);
   react.useEffect(() => {
     if (!video || count <= 0) {
-      setScreenshotTimeline([]);
+      setScreenshotTimeline(Array(count).fill(null));
       return void 0;
     }
     let isActive = true;
     const controller = new AbortController();
-    setScreenshotTimeline([]);
+    setScreenshotTimeline(Array(count).fill(null));
     (async () => {
       let index = 0;
       for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {

package/dist/index.cjs.map

@@ -1 +1 @@
-{"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 (string | null)[] - 截图数组，会随着截图生成逐步更新  null 表示该时间点截图还未生成\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 | null)[] {\n  const blobUrlCollectorRef = useRef<Set<string>>(new Set());\n  const [screenshotTimeline, setScreenshotTimeline] = useState<(string | null)[]>(Array(count).fill(null));\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      let index = 0;\n      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {\n        if (!isActive) return;\n        const url = URL.createObjectURL(frame)\n        setScreenshotTimeline((prev) => {\n          const newTimeline = [...prev];\n          newTimeline[index] = url;\n          return newTimeline;\n        });\n        index++;\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}"]}
+{"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 (string | null)[] - 截图数组，会随着截图生成逐步更新  null 表示该时间点截图还未生成\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 | null)[] {\n  const blobUrlCollectorRef = useRef<Set<string>>(new Set());\n  const [screenshotTimeline, setScreenshotTimeline] = useState<(string | null)[]>(Array(count).fill(null));\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(Array(count).fill(null));\n      return undefined;\n    }\n\n    let isActive = true;\n    const controller = new AbortController();\n\n    setScreenshotTimeline(Array(count).fill(null));\n\n    (async () => {\n      let index = 0;\n      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {\n        if (!isActive) return;\n        const url = URL.createObjectURL(frame)\n        setScreenshotTimeline((prev) => {\n          const newTimeline = [...prev];\n          newTimeline[index] = url;\n          return newTimeline;\n        });\n        index++;\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.js

@@ -119,12 +119,12 @@ function useScreenshotTimeline(video, count = 10) {
   }, []);
   useEffect(() => {
     if (!video || count <= 0) {
-      setScreenshotTimeline([]);
+      setScreenshotTimeline(Array(count).fill(null));
       return void 0;
     }
     let isActive = true;
     const controller = new AbortController();
-    setScreenshotTimeline([]);
+    setScreenshotTimeline(Array(count).fill(null));
     (async () => {
       let index = 0;
       for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {

package/dist/index.js.map

@@ -1 +1 @@
-{"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":"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","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 (string | null)[] - 截图数组，会随着截图生成逐步更新  null 表示该时间点截图还未生成\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 | null)[] {\n  const blobUrlCollectorRef = useRef<Set<string>>(new Set());\n  const [screenshotTimeline, setScreenshotTimeline] = useState<(string | null)[]>(Array(count).fill(null));\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      let index = 0;\n      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {\n        if (!isActive) return;\n        const url = URL.createObjectURL(frame)\n        setScreenshotTimeline((prev) => {\n          const newTimeline = [...prev];\n          newTimeline[index] = url;\n          return newTimeline;\n        });\n        index++;\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}"]}
+{"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":"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","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 (string | null)[] - 截图数组，会随着截图生成逐步更新  null 表示该时间点截图还未生成\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 | null)[] {\n  const blobUrlCollectorRef = useRef<Set<string>>(new Set());\n  const [screenshotTimeline, setScreenshotTimeline] = useState<(string | null)[]>(Array(count).fill(null));\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(Array(count).fill(null));\n      return undefined;\n    }\n\n    let isActive = true;\n    const controller = new AbortController();\n\n    setScreenshotTimeline(Array(count).fill(null));\n\n    (async () => {\n      let index = 0;\n      for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {\n        if (!isActive) return;\n        const url = URL.createObjectURL(frame)\n        setScreenshotTimeline((prev) => {\n          const newTimeline = [...prev];\n          newTimeline[index] = url;\n          return newTimeline;\n        });\n        index++;\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.4",
+  "version": "0.0.5",
   "description": "一个用于提取视频帧的工具",
   "type": "module",
   "main": "./dist/index.cjs",