MediaPipe JavaScript手部关键点检测问题分析与解决

问题背景

在使用MediaPipe的JavaScript版本进行手部关键点检测(HandLandmarker)时，开发者遇到了一个常见问题：检测结果始终返回空数组，即{"landmarks":[],"worldLandmarks":[],"handednesses":[],"handedness":[]}，即使摄像头已经正常工作并能看到手部画面。

问题分析

1. 初始化代码检查

从开发者提供的代码片段来看，HandLandmarker的初始化部分看起来是正确的：

async createGestureRecognizer() {
    const vision = await FilesetResolver.forVisionTasks('wasm文件路径');
    this.handLandmarker = await HandLandmarker.createFromModelPath(vision, '模型路径');
}

这段代码没有报错，说明WASM模块和模型文件加载正常。

2. 检测循环实现问题

在预测循环中，开发者使用了以下关键代码：

if (video.currentTime > 0 && video.currentTime !== this.lastVideoTime) {
    this.lastVideoTime = video.currentTime;
    this.results = this.handLandmarker.detectForVideo(video, nowInMs);
}

这里存在几个潜在问题：

1. video.currentTime > 0条件可能过于严格，导致第一帧无法被处理
2. 时间戳管理可能不够精确
3. 没有正确处理异步操作

3. 绘图函数使用问题

在绘制关键点和连接线时，开发者使用了不正确的参数顺序：

drawingUtils.drawConnectors(landmarks, HandLandmarker.HAND_CONNECTIONS, {...});

正确的应该是将canvas上下文作为第一个参数。

解决方案

1. 修改检测条件

移除过于严格的检测条件，改为：

if (video.currentTime !== this.lastVideoTime) {
    this.lastVideoTime = video.currentTime;
    this.results = this.handLandmarker.detectForVideo(video, nowInMs);
}

2. 正确使用绘图函数

确保绘图函数的参数顺序正确：

drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {...});
drawLandmarks(canvasCtx, landmarks, {...});

注意：HAND_CONNECTIONS需要从@mediapipe/hands导入。

3. 完整实现示例

一个更健壮的实现应该包括：

1. 正确的初始化
2. 合理的帧处理逻辑
3. 准确的绘图方法
4. 适当的错误处理

async function predictWebcam() {
    const nowInMs = performance.now();
    const video = document.getElementById('webcam');
    
    if (video.currentTime !== lastVideoTime) {
        lastVideoTime = video.currentTime;
        const results = handLandmarker.detectForVideo(video, nowInMs);
        
        // 处理结果
        if (results.landmarks) {
            // 绘制关键点和连接线
        }
    }
    
    window.requestAnimationFrame(predictWebcam);
}

设备兼容性考虑

值得注意的是，在某些设备上，特别是性能较低的设备或某些移动设备上，MediaPipe的JavaScript实现可能会遇到兼容性问题。这可能是由于：

1. WebAssembly执行环境限制
2. 硬件加速支持不足
3. 浏览器兼容性问题

总结

MediaPipe的JavaScript实现为Web开发者提供了强大的计算机视觉能力，但在实际使用中需要注意：

1. 正确的API使用方法
2. 合理的帧处理逻辑
3. 设备兼容性考虑
4. 性能优化

通过上述解决方案，开发者应该能够解决手部关键点检测返回空数组的问题，并在Web应用中实现稳定的手部追踪功能。