@sssxyd/face-liveness-detector 0.2.29 → 0.2.31

package/dist/index.esm.js

@@ -66,6 +66,7 @@ const DEFAULT_CONFIG = Object.freeze({
     // resource paths
     human_model_path: undefined,
     tensorflow_wasm_path: undefined,
+    tensorflow_backend: 'auto', // 'auto' | 'webgl' | 'wasm'
     // DetectionSettings defaults
     video_width: 640,
     video_height: 640,
@@ -118,6 +119,9 @@ function mergeConfig(userConfig) {
     if (userConfig.tensorflow_wasm_path !== undefined) {
         merged.tensorflow_wasm_path = userConfig.tensorflow_wasm_path;
     }
+    if (userConfig.tensorflow_backend !== undefined) {
+        merged.tensorflow_backend = userConfig.tensorflow_backend;
+    }
     if (userConfig.video_width !== undefined) {
         merged.video_width = userConfig.video_width;
     }
@@ -304,18 +308,68 @@ function _isWebGLAvailable() {
         return false;
     }
 }
-function _detectOptimalBackend() {
+function _detectBrowserEngine(userAgent) {
+    const ua = userAgent.toLowerCase();
+    // 检测 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)) {
+        return 'webkit';
+    }
+    // 检测 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
+    return 'other';
+}
+function _getOptimalBackendForEngine(engine) {
+    // 针对不同内核的优化策略
+    const backendConfig = {
+        chromium: 'webgl', // Chromium 内核：优先 WebGL
+        webkit: 'wasm', // WebKit（Safari、iOS）：使用 WASM
+        gecko: 'webgl', // Firefox：优先 WebGL
+        other: 'wasm' // 未知浏览器：保守使用 WASM
+    };
+    return backendConfig[engine];
+}
+function _detectOptimalBackend(preferredBackend) {
+    // If user explicitly specified a backend, honor it (unless it's 'auto')
+    if (preferredBackend && preferredBackend !== 'auto') {
+        console.log('[Backend Detection] Using user-specified backend:', {
+            backend: preferredBackend,
+            userAgent: navigator.userAgent
+        });
+        return preferredBackend;
+    }
     const userAgent = navigator.userAgent.toLowerCase();
-    // Special browsers: prefer WASM
-    if ((/safari/.test(userAgent) && !/chrome/.test(userAgent)) ||
-        /micromessenger/i.test(userAgent) ||
-        /alipay/.test(userAgent) ||
-        /qq/.test(userAgent) ||
-        /(wechat|alipay|qq)webview/i.test(userAgent)) {
-        return 'wasm';
-    }
-    // Desktop: prefer WebGL
-    return _isWebGLAvailable() ? 'webgl' : 'wasm';
+    const engine = _detectBrowserEngine(userAgent);
+    console.log('[Backend Detection] Detected browser engine:', {
+        engine,
+        userAgent: navigator.userAgent
+    });
+    // 获取该内核的推荐后端
+    let preferredBackendForEngine = _getOptimalBackendForEngine(engine);
+    // 对于 Chromium 和 Gecko，检查 WebGL 是否可用
+    if (preferredBackendForEngine === 'webgl') {
+        const hasWebGL = _isWebGLAvailable();
+        console.log('[Backend Detection] WebGL availability check:', {
+            engine,
+            hasWebGL,
+            selectedBackend: hasWebGL ? 'webgl' : 'wasm'
+        });
+        return hasWebGL ? 'webgl' : 'wasm';
+    }
+    // 对于 WebKit 和 other，直接使用 WASM
+    console.log('[Backend Detection] Using backend for engine:', {
+        engine,
+        backend: preferredBackendForEngine
+    });
+    return preferredBackendForEngine;
 }
 /**
  * 预加载 OpenCV.js 以确保全局 cv 对象可用
@@ -450,10 +504,6 @@ async function loadOpenCV(timeout = 30000) {
             try {
                 await opencvInitPromise;
                 cv = getCvSync();
-                if (cv && cv.Mat) {
-                    console.log('[FaceDetectionEngine] OpenCV.js loaded successfully');
-                    return { cv };
-                }
             }
             catch (error) {
                 // 失败后清除 Promise，允许重试
@@ -473,10 +523,6 @@ async function loadOpenCV(timeout = 30000) {
             try {
                 await opencvInitPromise;
                 cv = getCvSync();
-                if (cv && cv.Mat) {
-                    console.log('[FaceDetectionEngine] OpenCV.js loaded successfully');
-                    return { cv };
-                }
             }
             catch (error) {
                 // 失败后清除 Promise，允许重试
@@ -484,13 +530,17 @@ async function loadOpenCV(timeout = 30000) {
                 throw error;
             }
         }
-        // 如果到这里还没有返回，说明加载失败
-        console.error('[FaceDetectionEngine] OpenCV module is invalid:', {
-            hasMat: cv && cv.Mat,
-            type: typeof cv,
-            keys: cv ? Object.keys(cv).slice(0, 10) : 'N/A'
-        });
-        throw new Error('OpenCV.js loaded but module is invalid (no Mat class found)');
+        // 最终验证
+        if (!cv || !cv.Mat) {
+            console.error('[FaceDetectionEngine] OpenCV module is invalid:', {
+                hasMat: cv && cv.Mat,
+                type: typeof cv,
+                keys: cv ? Object.keys(cv).slice(0, 10) : 'N/A'
+            });
+            throw new Error('OpenCV.js loaded but module is invalid (no Mat class found)');
+        }
+        console.log('[FaceDetectionEngine] OpenCV.js loaded successfully');
+        return { cv };
     }
     catch (error) {
         console.error('[FaceDetectionEngine] Failed to load OpenCV.js:', error);
@@ -516,11 +566,12 @@ function getCvSync() {
  * Load Human.js
  * @param modelPath - Path to model files (optional)
  * @param wasmPath - Path to WASM files (optional)
+ * @param preferredBackend - Preferred TensorFlow backend: 'auto' | 'webgl' | 'wasm' (default: 'auto')
  * @returns Promise that resolves with Human instance
  */
-async function loadHuman(modelPath, wasmPath) {
+async function loadHuman(modelPath, wasmPath, preferredBackend) {
     const config = {
-        backend: _detectOptimalBackend(),
+        backend: _detectOptimalBackend(preferredBackend),
         face: {
             enabled: true,
             detector: { rotation: false, return: true },
@@ -544,30 +595,90 @@ async function loadHuman(modelPath, wasmPath) {
     console.log('[FaceDetectionEngine] Human.js config:', {
         backend: config.backend,
         modelBasePath: config.modelBasePath || '(using default)',
-        wasmPath: config.wasmPath || '(using default)'
+        wasmPath: config.wasmPath || '(using default)',
+        userAgent: navigator.userAgent,
+        platform: navigator.platform
     });
     const initStartTime = performance.now();
     console.log('[FaceDetectionEngine] Creating Human instance...');
-    const human = new Human(config);
+    let human;
+    try {
+        human = new Human(config);
+    }
+    catch (error) {
+        const errorMsg = error instanceof Error ? error.message : 'Unknown error during Human instantiation';
+        console.error('[FaceDetectionEngine] Failed to create Human instance:', errorMsg);
+        throw new Error(`Human instantiation failed: ${errorMsg}`);
+    }
     const instanceCreateTime = performance.now() - initStartTime;
     console.log(`[FaceDetectionEngine] Human instance created, took ${instanceCreateTime.toFixed(2)}ms`);
+    // 验证 Human 实例
+    if (!human) {
+        throw new Error('Human instance is null after creation');
+    }
     console.log('[FaceDetectionEngine] Loading Human.js models...');
     const modelLoadStartTime = performance.now();
     try {
-        await human.load();
+        // 添加超时机制防止无限等待
+        const loadTimeout = new Promise((_, reject) => {
+            const timeoutId = setTimeout(() => {
+                reject(new Error('Human.js load() timeout after 60 seconds - possible issue with model loading on mobile'));
+            }, 60000);
+        });
+        // 竞速：哪个先完成就用哪个
+        await Promise.race([
+            human.load(),
+            loadTimeout
+        ]);
         const loadTime = performance.now() - modelLoadStartTime;
         const totalTime = performance.now() - initStartTime;
         console.log('[FaceDetectionEngine] Human.js loaded successfully', {
             modelLoadTime: `${loadTime.toFixed(2)}ms`,
             totalInitTime: `${totalTime.toFixed(2)}ms`,
-            version: human.version
+            version: human.version,
+            config: human.config
         });
+        // 验证加载后的 Human 实例有必要的方法和属性
+        if (typeof human.detect !== 'function') {
+            throw new Error('Human.detect method not available after loading');
+        }
+        if (!human.version) {
+            console.warn('[FaceDetectionEngine] Human.js loaded but version is missing');
+        }
+        // 打印加载的模型信息
+        if (human.models) {
+            const loadedModels = Object.entries(human.models).map(([name, model]) => ({
+                name,
+                loaded: model?.loaded || model?.state === 'loaded',
+                type: typeof model
+            }));
+            console.log('[FaceDetectionEngine] Loaded models:', {
+                totalModels: Object.keys(human.models).length,
+                models: loadedModels,
+                allModels: 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) {
         const errorMsg = error instanceof Error ? error.message : 'Unknown error';
-        console.error('[FaceDetectionEngine] Human.js load failed:', errorMsg);
-        throw error;
+        const stack = error instanceof Error ? error.stack : 'N/A';
+        console.error('[FaceDetectionEngine] Human.js load failed:', {
+            errorMsg,
+            stack,
+            userAgent: navigator.userAgent,
+            platform: navigator.platform,
+            humanVersion: human?.version,
+            humanConfig: human?.config
+        });
+        throw new Error(`Human.js loading failed: ${errorMsg}`);
     }
 }
 /**
@@ -1603,7 +1714,29 @@ class FaceDetectionEngine extends SimpleEventEmitter {
             console.log('[FaceDetectionEngine] Loading Human.js models...');
             this.emitDebug('initialization', 'Loading Human.js...');
             const humanStartTime = performance.now();
-            this.human = await loadHuman(this.config.human_model_path, this.config.tensorflow_wasm_path);
+            try {
+                this.human = await loadHuman(this.config.human_model_path, this.config.tensorflow_wasm_path, this.config.tensorflow_backend);
+            }
+            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', {
+                    error: errorMsg,
+                    stack: humanError instanceof Error ? humanError.stack : 'N/A',
+                    userAgent: navigator.userAgent,
+                    platform: navigator.platform,
+                    browser: this.detectBrowserInfo()
+                }, 'error');
+                this.emit('detector-loaded', {
+                    success: false,
+                    error: `Failed to load Human.js: ${errorMsg}`
+                });
+                this.emit('detector-error', {
+                    code: ErrorCode.DETECTOR_NOT_INITIALIZED,
+                    message: `Human.js loading error: ${errorMsg}`
+                });
+                return;
+            }
             const humanLoadTime = performance.now() - humanStartTime;
             if (!this.human) {
                 const errorMsg = 'Failed to load Human.js: instance is null';
@@ -1619,13 +1752,35 @@ class FaceDetectionEngine extends SimpleEventEmitter {
                 });
                 return;
             }
+            // Verify Human.js instance has required properties
+            if (!this.human.version || typeof this.human.detect !== 'function') {
+                const errorMsg = 'Human.js instance is incomplete: missing version or detect method';
+                console.error('[FaceDetectionEngine] ' + errorMsg);
+                this.emitDebug('initialization', errorMsg, {
+                    hasVersion: !!this.human.version,
+                    hasDetect: typeof this.human.detect === 'function',
+                    instanceKeys: Object.keys(this.human || {})
+                }, 'error');
+                this.emit('detector-loaded', {
+                    success: false,
+                    error: errorMsg
+                });
+                this.emit('detector-error', {
+                    code: ErrorCode.DETECTOR_NOT_INITIALIZED,
+                    message: errorMsg
+                });
+                return;
+            }
             this.emitDebug('initialization', 'Human.js loaded successfully', {
                 loadTime: `${humanLoadTime.toFixed(2)}ms`,
-                version: this.human.version
+                version: this.human.version,
+                backend: this.human.config?.backend || 'unknown',
+                config: this.human.config
             });
             console.log('[FaceDetectionEngine] Human.js loaded successfully', {
                 loadTime: `${humanLoadTime.toFixed(2)}ms`,
-                version: this.human.version
+                version: this.human.version,
+                backend: this.human.config?.backend || 'unknown'
             });
             this.isReady = true;
             const loadedData = {
@@ -1902,13 +2057,31 @@ class FaceDetectionEngine extends SimpleEventEmitter {
         try {
             // Check video is ready
             if (this.videoElement.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
-                this.scheduleNextDetection(this.config.error_retry_delay); // ERROR_RETRY_DELAY
+                this.scheduleNextDetection(this.config.error_retry_delay);
                 return;
             }
             // Perform face detection
-            const result = await this.human.detect(this.videoElement);
+            let result;
+            try {
+                result = await this.human.detect(this.videoElement);
+            }
+            catch (detectError) {
+                const errorMsg = detectError instanceof Error ? detectError.message : 'Unknown error';
+                this.emitDebug('detection', 'Human.detect() call failed', {
+                    error: errorMsg,
+                    stack: detectError instanceof Error ? detectError.stack : 'N/A',
+                    hasHuman: !!this.human,
+                    humanVersion: this.human?.version,
+                    videoReadyState: this.videoElement?.readyState,
+                    videoWidth: this.videoElement?.videoWidth,
+                    videoHeight: this.videoElement?.videoHeight
+                }, 'error');
+                this.scheduleNextDetection(this.config.error_retry_delay);
+                return;
+            }
             if (!result) {
-                this.scheduleNextDetection(this.config.error_retry_delay); // DETECTION_FRAME_DELAY
+                this.emitDebug('detection', 'Face detection returned null result', {}, 'warn');
+                this.scheduleNextDetection(this.config.error_retry_delay);
                 return;
             }
             const faces = result.face || [];
@@ -1921,18 +2094,24 @@ class FaceDetectionEngine extends SimpleEventEmitter {
             }
         }
         catch (error) {
-            this.emitDebug('detection', 'Detection error', {
-                error: error.message,
-                stack: error.stack
+            const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+            this.emitDebug('detection', 'Unexpected error in detection loop', {
+                error: errorMsg,
+                stack: error instanceof Error ? error.stack : 'N/A'
             }, 'error');
-            this.scheduleNextDetection(this.config.error_retry_delay); // ERROR_RETRY_DELAY
+            this.scheduleNextDetection(this.config.error_retry_delay);
         }
     }
     getPerformActionCount() {
         if (this.config.liveness_action_count <= 0) {
+            this.emitDebug('config', 'liveness_action_count is 0 or negative', { count: this.config.liveness_action_count }, 'warn');
             return 0;
         }
-        return Math.min(this.config.liveness_action_count, this.config.liveness_action_list.length);
+        const actionListLength = this.config.liveness_action_list?.length ?? 0;
+        if (actionListLength === 0) {
+            this.emitDebug('config', 'liveness_action_list is empty', { actionListLength }, 'warn');
+        }
+        return Math.min(this.config.liveness_action_count, actionListLength);
     }
     /**
      * Handle single face detection
@@ -1984,6 +2163,7 @@ class FaceDetectionEngine extends SimpleEventEmitter {
     validateFaceBox(faceBox) {
         if (!faceBox) {
             console.warn('[FaceDetector] Face detected but no box/boxRaw property');
+            this.emitDebug('detection', 'Face box is missing - face detected but no box/boxRaw property', {}, 'warn');
             this.scheduleNextDetection(this.config.error_retry_delay);
             return false;
         }
@@ -2157,20 +2337,25 @@ class FaceDetectionEngine extends SimpleEventEmitter {
             this.detectionState.collectCount++;
             return;
         }
-        const frameImageData = this.captureFrame();
-        if (!frameImageData) {
-            this.emitDebug('detection', 'Failed to capture current frame image', {}, 'warn');
-            return;
+        try {
+            const frameImageData = this.captureFrame();
+            if (!frameImageData) {
+                this.emitDebug('detection', 'Failed to capture current frame image', { frameQuality, bestQualityScore: this.detectionState.bestQualityScore }, 'warn');
+                return;
+            }
+            const faceImageData = this.captureFrame(faceBox);
+            if (!faceImageData) {
+                this.emitDebug('detection', 'Failed to capture face image', { faceBox }, 'warn');
+                return;
+            }
+            this.detectionState.collectCount++;
+            this.detectionState.bestQualityScore = frameQuality;
+            this.detectionState.bestFrameImage = frameImageData;
+            this.detectionState.bestFaceImage = faceImageData;
         }
-        const faceImageData = this.captureFrame(faceBox);
-        if (!faceImageData) {
-            this.emitDebug('detection', 'Failed to capture face image', {}, 'warn');
-            return;
+        catch (error) {
+            this.emitDebug('detection', 'Error during image collection', { error: error.message }, 'error');
         }
-        this.detectionState.collectCount++;
-        this.detectionState.bestQualityScore = frameQuality;
-        this.detectionState.bestFrameImage = frameImageData;
-        this.detectionState.bestFaceImage = faceImageData;
     }
     emitLivenessDetected(passed, size, frontal = 0, quality = 0, real = 0, live = 0) {
         this.emit('face-detected', { passed, size, frontal, quality, real, live });
@@ -2181,6 +2366,7 @@ class FaceDetectionEngine extends SimpleEventEmitter {
     selectNextAction() {
         const availableActions = (this.config.liveness_action_list ?? []).filter(action => !this.detectionState.completedActions.has(action));
         if (availableActions.length === 0) {
+            this.emitDebug('liveness', 'No available actions to perform', { completedActions: Array.from(this.detectionState.completedActions), totalActions: this.config.liveness_action_list?.length ?? 0 }, 'warn');
             return;
         }
         let nextAction = availableActions[0];
@@ -2226,36 +2412,45 @@ class FaceDetectionEngine extends SimpleEventEmitter {
      * Detect specific action
      */
     detectAction(action, gestures) {
-        if (!gestures || gestures.length === 0)
+        if (!gestures || gestures.length === 0) {
+            this.emitDebug('liveness', 'No gestures detected for action verification', { action, gestureCount: gestures?.length ?? 0 }, 'info');
+            return false;
+        }
+        try {
+            switch (action) {
+                case LivenessAction.BLINK:
+                    return gestures.some(g => {
+                        if (!g.gesture)
+                            return false;
+                        return g.gesture.includes('blink');
+                    });
+                case LivenessAction.MOUTH_OPEN:
+                    return gestures.some(g => {
+                        const gestureStr = g.gesture;
+                        if (!gestureStr || !gestureStr.includes('mouth'))
+                            return false;
+                        const percentMatch = gestureStr.match(/mouth\s+(\d+)%\s+open/);
+                        if (!percentMatch || !percentMatch[1])
+                            return false;
+                        const percent = parseInt(percentMatch[1]) / 100; // Convert to 0-1 range
+                        return percent > (this.config.min_mouth_open_percent ?? 0.2);
+                    });
+                case LivenessAction.NOD:
+                    return gestures.some(g => {
+                        if (!g.gesture)
+                            return false;
+                        // Check for continuous head movement (up -> down or down -> up)
+                        const headPattern = g.gesture.match(/head\s+(up|down)/i);
+                        return !!headPattern && !!headPattern[1];
+                    });
+                default:
+                    this.emitDebug('liveness', 'Unknown action type in detection', { action }, 'warn');
+                    return false;
+            }
+        }
+        catch (error) {
+            this.emitDebug('liveness', 'Error during action detection', { action, error: error.message }, 'error');
             return false;
-        switch (action) {
-            case LivenessAction.BLINK:
-                return gestures.some(g => {
-                    if (!g.gesture)
-                        return false;
-                    return g.gesture.includes('blink');
-                });
-            case LivenessAction.MOUTH_OPEN:
-                return gestures.some(g => {
-                    const gestureStr = g.gesture;
-                    if (!gestureStr || !gestureStr.includes('mouth'))
-                        return false;
-                    const percentMatch = gestureStr.match(/mouth\s+(\d+)%\s+open/);
-                    if (!percentMatch || !percentMatch[1])
-                        return false;
-                    const percent = parseInt(percentMatch[1]) / 100; // Convert to 0-1 range
-                    return percent > (this.config.min_mouth_open_percent ?? 0.2);
-                });
-            case LivenessAction.NOD:
-                return gestures.some(g => {
-                    if (!g.gesture)
-                        return false;
-                    // Check for continuous head movement (up -> down or down -> up)
-                    const headPattern = g.gesture.match(/head\s+(up|down)/i);
-                    return !!headPattern && !!headPattern[1];
-                });
-            default:
-                return false;
         }
     }
     /**
@@ -2268,6 +2463,29 @@ class FaceDetectionEngine extends SimpleEventEmitter {
         };
         this.emit('status-prompt', promptData);
     }
+    /**
+     * Detect browser information for debugging
+     */
+    detectBrowserInfo() {
+        const ua = navigator.userAgent.toLowerCase();
+        if (/quark/i.test(ua))
+            return 'Quark Browser';
+        if (/micromessenger/i.test(ua))
+            return 'WeChat';
+        if (/alipay/i.test(ua))
+            return 'Alipay';
+        if (/qq/i.test(ua))
+            return 'QQ';
+        if (/safari/i.test(ua) && !/chrome/i.test(ua))
+            return 'Safari';
+        if (/chrome/i.test(ua))
+            return 'Chrome';
+        if (/firefox/i.test(ua))
+            return 'Firefox';
+        if (/edge/i.test(ua))
+            return 'Edge';
+        return 'Unknown';
+    }
     /**
      * Emit debug event
      */
@@ -2380,26 +2598,35 @@ class FaceDetectionEngine extends SimpleEventEmitter {
      */
     captureFrame(box) {
         if (!this.frameCanvasElement) {
+            this.emitDebug('capture', 'Frame canvas element is null, cannot capture frame', {}, 'error');
             return null;
         }
         if (!box) {
             return this.canvasToBase64(this.frameCanvasElement);
         }
-        const x = box[0], y = box[1], width = box[2], height = box[3];
-        // If cached canvas size does not match, recreate it
-        if (!this.faceCanvasElement || this.faceCanvasElement.width !== width || this.faceCanvasElement.height !== height) {
-            this.clearFaceCanvas();
-            this.faceCanvasElement = document.createElement('canvas');
+        try {
+            const x = box[0], y = box[1], width = box[2], height = box[3];
+            // If cached canvas size does not match, recreate it
+            if (!this.faceCanvasElement || this.faceCanvasElement.width !== width || this.faceCanvasElement.height !== height) {
+                this.clearFaceCanvas();
+                this.faceCanvasElement = document.createElement('canvas');
+                this.faceCanvasElement.width = width;
+                this.faceCanvasElement.height = height;
+                this.faceCanvasContext = this.faceCanvasElement.getContext('2d');
+            }
+            if (!this.faceCanvasContext) {
+                this.emitDebug('capture', 'Failed to get face canvas 2D context', { width, height }, 'error');
+                return null;
+            }
             this.faceCanvasElement.width = width;
             this.faceCanvasElement.height = height;
-            this.faceCanvasContext = this.faceCanvasElement.getContext('2d');
+            this.faceCanvasContext.drawImage(this.frameCanvasElement, x, y, width, height, 0, 0, width, height);
+            return this.canvasToBase64(this.faceCanvasElement);
         }
-        if (!this.faceCanvasContext)
+        catch (error) {
+            this.emitDebug('capture', 'Error during face frame capture', { box, error: error.message }, 'error');
             return null;
-        this.faceCanvasElement.width = width;
-        this.faceCanvasElement.height = height;
-        this.faceCanvasContext.drawImage(this.frameCanvasElement, x, y, width, height, 0, 0, width, height);
-        return this.canvasToBase64(this.faceCanvasElement);
+        }
     }
 }