npm - video-frame-tools - Versions diffs - 0.0.2 → 0.0.4 - Mend

video-frame-tools 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -110,7 +110,7 @@ async function* getScreenshotTimeline(video, length, signal) {
 // src/hooks/useScreenshotTimeline.ts
 function useScreenshotTimeline(video, count = 10) {
   const blobUrlCollectorRef = react.useRef(/* @__PURE__ */ new Set());
-  const [screenshotTimeline, setScreenshotTimeline] = react.useState([]);
+  const [screenshotTimeline, setScreenshotTimeline] = react.useState(Array(count).fill(null));
   react.useEffect(() => {
     return () => {
       for (const url of blobUrlCollectorRef.current) {
@@ -128,10 +128,16 @@ function useScreenshotTimeline(video, count = 10) {
     const controller = new AbortController();
     setScreenshotTimeline([]);
     (async () => {
+      let index = 0;
       for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {
         if (!isActive) return;
         const url = URL.createObjectURL(frame);
-        setScreenshotTimeline((prev) => [...prev, url]);
+        setScreenshotTimeline((prev) => {
+          const newTimeline = [...prev];
+          newTimeline[index] = url;
+          return newTimeline;
+        });
+        index++;
         blobUrlCollectorRef.current.add(url);
       }
     })();
@@ -143,6 +149,7 @@ function useScreenshotTimeline(video, count = 10) {
   return screenshotTimeline;
 }
+exports.captureVideoFrame = captureVideoFrame;
 exports.useScreenshotTimeline = useScreenshotTimeline;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +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 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}"]}
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}"]}

package/dist/index.d.cts CHANGED Viewed

@@ -2,7 +2,7 @@
  * React Hook：生成视频截图时间轴
  * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素，支持 null 或 undefined
  * @param count - 截图数量，默认为 10
- * @returns Blob[] - 截图数组，会随着截图生成逐步更新
+ * @returns (string | null)[] - 截图数组，会随着截图生成逐步更新  null 表示该时间点截图还未生成
  * @example
  * ```tsx
  * const frames = useScreenshotTimeline('video.mp4', 10);
@@ -15,6 +15,21 @@
  * );
  * ```
  */
-declare function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count?: number): string[];
+declare function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count?: number): (string | null)[];
-export { useScreenshotTimeline };
+/**
+ * 捕获视频指定时间点的截图
+ * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素
+ * @param time - 截图时间点（秒）
+ * @param signal - 可选的 AbortSignal，用于取消操作
+ * @returns Promise，返回截图的 Blob 对象
+ * @throws 当 Canvas 初始化失败或导出失败时抛出错误
+ * @example
+ * ```ts
+ * const blob = await captureVideoFrame('video.mp4', 1.5);
+ * const url = URL.createObjectURL(blob);
+ * ```
+ */
+declare function captureVideoFrame(video: string | HTMLVideoElement, time: number, signal?: AbortSignal): Promise<Blob>;
+export { captureVideoFrame, useScreenshotTimeline };

package/dist/index.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
  * React Hook：生成视频截图时间轴
  * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素，支持 null 或 undefined
  * @param count - 截图数量，默认为 10
- * @returns Blob[] - 截图数组，会随着截图生成逐步更新
+ * @returns (string | null)[] - 截图数组，会随着截图生成逐步更新  null 表示该时间点截图还未生成
  * @example
  * ```tsx
  * const frames = useScreenshotTimeline('video.mp4', 10);
@@ -15,6 +15,21 @@
  * );
  * ```
  */
-declare function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count?: number): string[];
+declare function useScreenshotTimeline(video: string | HTMLVideoElement | null | undefined, count?: number): (string | null)[];
-export { useScreenshotTimeline };
+/**
+ * 捕获视频指定时间点的截图
+ * @param video - 视频 URL 或已存在的 HTMLVideoElement 元素
+ * @param time - 截图时间点（秒）
+ * @param signal - 可选的 AbortSignal，用于取消操作
+ * @returns Promise，返回截图的 Blob 对象
+ * @throws 当 Canvas 初始化失败或导出失败时抛出错误
+ * @example
+ * ```ts
+ * const blob = await captureVideoFrame('video.mp4', 1.5);
+ * const url = URL.createObjectURL(blob);
+ * ```
+ */
+declare function captureVideoFrame(video: string | HTMLVideoElement, time: number, signal?: AbortSignal): Promise<Blob>;
+export { captureVideoFrame, useScreenshotTimeline };

package/dist/index.js CHANGED Viewed

@@ -108,7 +108,7 @@ async function* getScreenshotTimeline(video, length, signal) {
 // src/hooks/useScreenshotTimeline.ts
 function useScreenshotTimeline(video, count = 10) {
   const blobUrlCollectorRef = useRef(/* @__PURE__ */ new Set());
-  const [screenshotTimeline, setScreenshotTimeline] = useState([]);
+  const [screenshotTimeline, setScreenshotTimeline] = useState(Array(count).fill(null));
   useEffect(() => {
     return () => {
       for (const url of blobUrlCollectorRef.current) {
@@ -126,10 +126,16 @@ function useScreenshotTimeline(video, count = 10) {
     const controller = new AbortController();
     setScreenshotTimeline([]);
     (async () => {
+      let index = 0;
       for await (const frame of getScreenshotTimeline(video, count, controller.signal)) {
         if (!isActive) return;
         const url = URL.createObjectURL(frame);
-        setScreenshotTimeline((prev) => [...prev, url]);
+        setScreenshotTimeline((prev) => {
+          const newTimeline = [...prev];
+          newTimeline[index] = url;
+          return newTimeline;
+        });
+        index++;
         blobUrlCollectorRef.current.add(url);
       }
     })();
@@ -141,6 +147,6 @@ function useScreenshotTimeline(video, count = 10) {
   return screenshotTimeline;
 }
-export { useScreenshotTimeline };
+export { captureVideoFrame, useScreenshotTimeline };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +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 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}"]}
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}"]}

package/package.json CHANGED Viewed

@@ -1,16 +1,21 @@
 {
   "name": "video-frame-tools",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "一个用于提取视频帧的工具",
   "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [