@sssxyd/face-liveness-detector 0.2.31 → 0.2.32

package/README.md

@@ -31,53 +31,6 @@ pnpm add @sssxyd/face-liveness-detector @vladmandic/human @techstark/opencv-js
 
 > **Note**: `@vladmandic/human` and `@techstark/opencv-js` are peer dependencies and must be installed separately to avoid bundling large libraries. This keeps your final bundle size smaller if you're already using these libraries elsewhere in your project.
 
-## Quick Start - Using Local Model Files (Recommended)
-
-To improve performance and reduce external dependencies, you can download and use local copies of model files:
-
-### Step 1: Download Model Files
-
-```bash
-# Copy Human.js models locally
-node copy-human-models.js
-
-# Download TensorFlow.js WASM files
-node download-tensorflow-wasm.js
-```
-
-This will create:
-- `public/models/` - Human.js face detection models
-- `public/wasm/` - TensorFlow.js WASM backend files
-
-### Step 2: Initialize Engine with Local Files
-
-```typescript
-import FaceDetectionEngine from '@sssxyd/face-liveness-detector'
-
-// Configure to use local model files
-const engine = new FaceDetectionEngine({
-  human_model_path: '/models',      // Path to downloaded models
-  tensorflow_wasm_path: '/wasm',    // Path to WASM files
-  min_face_ratio: 0.5,
-  max_face_ratio: 0.9,
-  liveness_action_count: 1,
-  liveness_action_list: ['blink']
-})
-
-// Initialize and start detection
-await engine.initialize()
-const videoElement = document.getElementById('video') as HTMLVideoElement
-await engine.startDetection(videoElement)
-```
-
-### Step 3: Serve Static Files
-
-Make sure your web server serves the `public/` directory:
-
-```typescript
-// Express.js example
-app.use(express.static('public'))
-```
 
 ## Quick Start - Using Default CDN Files
 

package/dist/index.esm.js

@@ -310,21 +310,25 @@ function _isWebGLAvailable() {
 }
 function _detectBrowserEngine(userAgent) {
     const ua = userAgent.toLowerCase();
-    // 检测 Gecko (Firefox)
+    // 1. 检测 Gecko (Firefox)
     if (/firefox/i.test(ua) && !/seamonkey/i.test(ua)) {
         return 'gecko';
     }
-    // 检测 WebKit (Safari, iOS browsers)
-    // Safari 的特征：有 Safari 但没有 Chrome
-    if (/safari/i.test(ua) && !/chrome|chromium|crios|edge|edgios|edg|brave|opera|vivaldi|whale|arc|yabrowser|samsung|kiwi|ghostery/i.test(ua)) {
+    // 2. 检测 WebKit
+    // 包括：Safari、iOS 浏览器、以及那些虽然包含 Chrome 标识但实际是 WebKit 的浏览器（Quark、支付宝、微信等）
+    if (/webkit/i.test(ua)) {
+        // WebKit 特征明显，包括以下几种情况：
+        // - 真正的 Safari（有 Safari 标识）
+        // - iOS 浏览器（有 Mobile Safari 标识）
+        // - Quark、支付宝、微信等虽然包含 Chrome 标识但是基于 WebKit 的浏览器
         return 'webkit';
     }
-    // 检测 Chromium/Blink
+    // 3. 检测 Chromium/Blink
     // Chrome-based browsers: Chrome, Chromium, Edge, Brave, Opera, Vivaldi, Whale, Arc, etc.
     if (/chrome|chromium|crios|edge|edgios|edg|brave|opera|vivaldi|whale|arc|yabrowser|samsung|kiwi|ghostery/i.test(ua)) {
         return 'chromium';
     }
-    // 默认为 other
+    // 4. 其他浏览器 - 保守方案，使用 WASM
     return 'other';
 }
 function _getOptimalBackendForEngine(engine) {
@@ -570,8 +574,9 @@ function getCvSync() {
  * @returns Promise that resolves with Human instance
  */
 async function loadHuman(modelPath, wasmPath, preferredBackend) {
+    const selectedBackend = _detectOptimalBackend(preferredBackend);
     const config = {
-        backend: _detectOptimalBackend(preferredBackend),
+        backend: selectedBackend,
         face: {
             enabled: true,
             detector: { rotation: false, return: true },
@@ -607,7 +612,13 @@ async function loadHuman(modelPath, wasmPath, preferredBackend) {
     }
     catch (error) {
         const errorMsg = error instanceof Error ? error.message : 'Unknown error during Human instantiation';
-        console.error('[FaceDetectionEngine] Failed to create Human instance:', errorMsg);
+        const stack = error instanceof Error ? error.stack : 'N/A';
+        console.error('[FaceDetectionEngine] Failed to create Human instance:', {
+            errorMsg,
+            stack,
+            backend: config.backend,
+            userAgent: navigator.userAgent
+        });
         throw new Error(`Human instantiation failed: ${errorMsg}`);
     }
     const instanceCreateTime = performance.now() - initStartTime;
@@ -616,6 +627,10 @@ async function loadHuman(modelPath, wasmPath, preferredBackend) {
     if (!human) {
         throw new Error('Human instance is null after creation');
     }
+    // 验证 Human 实例结构（早期检测 WASM 问题）
+    if (!human.config) {
+        console.warn('[FaceDetectionEngine] Warning: human.config is missing');
+    }
     console.log('[FaceDetectionEngine] Loading Human.js models...');
     const modelLoadStartTime = performance.now();
     try {
@@ -626,10 +641,29 @@ async function loadHuman(modelPath, wasmPath, preferredBackend) {
             }, 60000);
         });
         // 竞速：哪个先完成就用哪个
-        await Promise.race([
-            human.load(),
-            loadTimeout
-        ]);
+        try {
+            await Promise.race([
+                human.load(),
+                loadTimeout
+            ]);
+        }
+        catch (raceError) {
+            // 如果是超时错误，直接抛出
+            if (raceError instanceof Error && raceError.message.includes('timeout')) {
+                throw raceError;
+            }
+            // 其他错误，提供更多上下文
+            const raceErrorMsg = raceError instanceof Error ? raceError.message : 'Unknown error';
+            const raceErrorStack = raceError instanceof Error ? raceError.stack : 'N/A';
+            console.error('[FaceDetectionEngine] Error during human.load():', {
+                errorMsg: raceErrorMsg,
+                stack: raceErrorStack,
+                backend: config.backend,
+                hasModels: !!human.models,
+                modelsKeys: human.models ? Object.keys(human.models).length : 0
+            });
+            throw new Error(`Model loading error: ${raceErrorMsg}`);
+        }
         const loadTime = performance.now() - modelLoadStartTime;
         const totalTime = performance.now() - initStartTime;
         console.log('[FaceDetectionEngine] Human.js loaded successfully', {
@@ -645,26 +679,66 @@ async function loadHuman(modelPath, wasmPath, preferredBackend) {
         if (!human.version) {
             console.warn('[FaceDetectionEngine] Human.js loaded but version is missing');
         }
+        // 关键验证：检查模型是否真的加载了
+        if (!human.models || Object.keys(human.models).length === 0) {
+            console.error('[FaceDetectionEngine] CRITICAL: human.models is empty after loading!');
+            throw new Error('No models were loaded - human.models is empty');
+        }
+        // 详细检查每个关键模型及其结构
+        const criticalModels = ['face', 'antispoof', 'liveness'];
+        const missingModels = [];
+        for (const modelName of criticalModels) {
+            const model = human.models[modelName];
+            if (!model) {
+                missingModels.push(modelName);
+                console.error(`[FaceDetectionEngine] CRITICAL: Model '${modelName}' is missing!`);
+            }
+            else {
+                const isLoaded = model.loaded || model.state === 'loaded' || !!model.model;
+                // 检查模型是否有必要的内部结构（防止 "Cannot read properties of undefined (reading 'inputs')" 错误）
+                const hasExecutor = !!model['executor'];
+                const hasInputs = !!model.inputs && Array.isArray(model.inputs) && model.inputs.length > 0;
+                const hasModelUrl = !!model['modelUrl'];
+                console.log(`[FaceDetectionEngine] Model '${modelName}':`, {
+                    loaded: isLoaded,
+                    state: model.state,
+                    hasModel: !!model.model,
+                    hasExecutor,
+                    hasInputs,
+                    hasModelUrl,
+                    inputsType: typeof model.inputs,
+                    inputsLength: Array.isArray(model.inputs) ? model.inputs.length : 'N/A'
+                });
+                // 严格检查：模型必须有以下结构才能正常工作
+                if (!isLoaded || !hasExecutor || !hasModelUrl) {
+                    missingModels.push(`${modelName} (incomplete)`);
+                    console.error(`[FaceDetectionEngine] WARNING: Model '${modelName}' may not be fully loaded - missing structure`);
+                }
+                // 如果 inputs 未定义会导致 "Cannot read properties of undefined (reading 'inputs')" 错误
+                if (!hasInputs && modelName !== 'antispoof') {
+                    console.warn(`[FaceDetectionEngine] WARNING: Model '${modelName}' has no inputs - may cause errors during detection`);
+                    missingModels.push(`${modelName} (no inputs)`);
+                }
+            }
+        }
+        if (missingModels.length > 0) {
+            console.error('[FaceDetectionEngine] Some critical models failed to load:', missingModels);
+            throw new Error(`Critical models not loaded: ${missingModels.join(', ')}`);
+        }
         // 打印加载的模型信息
         if (human.models) {
             const loadedModels = Object.entries(human.models).map(([name, model]) => ({
                 name,
                 loaded: model?.loaded || model?.state === 'loaded',
-                type: typeof model
+                type: typeof model,
+                hasModel: !!model?.model
             }));
-            console.log('[FaceDetectionEngine] Loaded models:', {
+            console.log('[FaceDetectionEngine] All loaded models:', {
                 totalModels: Object.keys(human.models).length,
                 models: loadedModels,
-                allModels: Object.keys(human.models)
+                allModelNames: Object.keys(human.models)
             });
         }
-        else {
-            console.warn('[FaceDetectionEngine] human.models is not available');
-        }
-        // 额外验证：检查模型是否加载成功
-        if (!human.models || Object.keys(human.models).length === 0) {
-            console.warn('[FaceDetectionEngine] Warning: human.models appears to be empty after loading');
-        }
         return human;
     }
     catch (error) {
@@ -676,8 +750,25 @@ async function loadHuman(modelPath, wasmPath, preferredBackend) {
             userAgent: navigator.userAgent,
             platform: navigator.platform,
             humanVersion: human?.version,
-            humanConfig: human?.config
+            humanConfig: human?.config,
+            backend: config.backend
         });
+        // 如果是 WASM 后端失败，尝试降级到 WebGL
+        if (selectedBackend === 'wasm' && !errorMsg.includes('timeout') && _isWebGLAvailable()) {
+            console.warn('[FaceDetectionEngine] WASM backend failed, attempting fallback to WebGL...');
+            config.backend = 'webgl';
+            try {
+                console.log('[FaceDetectionEngine] Retrying with WebGL backend');
+                human = new Human(config);
+                await human.load();
+                console.log('[FaceDetectionEngine] Successfully loaded with WebGL fallback');
+                return human;
+            }
+            catch (fallbackError) {
+                const fallbackMsg = fallbackError instanceof Error ? fallbackError.message : 'Unknown error';
+                console.error('[FaceDetectionEngine] WebGL fallback also failed:', fallbackMsg);
+            }
+        }
         throw new Error(`Human.js loading failed: ${errorMsg}`);
     }
 }
@@ -1719,28 +1810,59 @@ class FaceDetectionEngine extends SimpleEventEmitter {
             }
             catch (humanError) {
                 const errorMsg = humanError instanceof Error ? humanError.message : 'Unknown error';
-                console.error('[FaceDetectionEngine] Human.js loading failed with error:', errorMsg);
-                this.emitDebug('initialization', 'Human.js loading failed with exception', {
+                const stack = humanError instanceof Error ? humanError.stack : 'N/A';
+                // 分析错误类型，提供针对性的建议
+                let errorContext = {
                     error: errorMsg,
-                    stack: humanError instanceof Error ? humanError.stack : 'N/A',
+                    stack,
                     userAgent: navigator.userAgent,
                     platform: navigator.platform,
-                    browser: this.detectBrowserInfo()
-                }, 'error');
+                    browser: this.detectBrowserInfo(),
+                    backend: this.config.tensorflow_backend,
+                    source: 'human.js'
+                };
+                // 特定错误类型的诊断
+                if (errorMsg.includes('inputs')) {
+                    errorContext.diagnosis = 'Human.js internal error: Model structure incomplete';
+                    errorContext.rootCause = 'Human.js library issue - models not fully loaded or WASM backend initialization incomplete';
+                    errorContext.suggestion = 'This is a Human.js library issue. Models may not have proper executor or inputs structure. Check WASM initialization and model integrity.';
+                }
+                else if (errorMsg.includes('timeout')) {
+                    errorContext.diagnosis = 'Model loading timeout';
+                    errorContext.suggestion = 'Network issue or model file too large - check network conditions';
+                }
+                else if (errorMsg.includes('Critical models not loaded')) {
+                    errorContext.diagnosis = 'Human.js failed to load required models';
+                    errorContext.rootCause = 'Models (face, antispoof, liveness) are missing or incomplete';
+                    errorContext.suggestion = 'Check model files and ensure WASM backend is properly initialized';
+                }
+                else if (errorMsg.includes('empty')) {
+                    errorContext.diagnosis = 'Models object is empty after loading';
+                    errorContext.suggestion = 'Model path may be incorrect or HTTP response failed';
+                }
+                else if (errorMsg.includes('incomplete')) {
+                    errorContext.diagnosis = 'Models loaded but structure is incomplete';
+                    errorContext.rootCause = 'Human.js internal issue - missing executor, inputs, or modelUrl';
+                    errorContext.suggestion = 'Ensure all model resources are fully loaded and accessible';
+                }
+                console.error('[FaceDetectionEngine] Human.js loading failed with detailed error:', errorContext);
+                this.emitDebug('initialization', 'Human.js loading failed with exception', errorContext, 'error');
                 this.emit('detector-loaded', {
                     success: false,
-                    error: `Failed to load Human.js: ${errorMsg}`
+                    error: `Failed to load Human.js: ${errorMsg}`,
+                    details: errorContext
                 });
                 this.emit('detector-error', {
                     code: ErrorCode.DETECTOR_NOT_INITIALIZED,
-                    message: `Human.js loading error: ${errorMsg}`
+                    message: `Human.js loading error: ${errorMsg}`,
+                    details: errorContext
                 });
                 return;
             }
             const humanLoadTime = performance.now() - humanStartTime;
             if (!this.human) {
                 const errorMsg = 'Failed to load Human.js: instance is null';
-                console.log('[FaceDetectionEngine] ' + errorMsg);
+                console.error('[FaceDetectionEngine] ' + errorMsg);
                 this.emitDebug('initialization', errorMsg, { loadTime: humanLoadTime }, 'error');
                 this.emit('detector-loaded', {
                     success: false,