MediaPipe HandLandmarker在JavaScript中返回空数组的解决方案

问题背景

在使用MediaPipe的HandLandmarker进行手势识别时，开发者可能会遇到一个常见问题：即使摄像头正常工作且能够看到手部动作，HandLandmarker的检测结果却始终返回空数组（{"landmarks":[],"worldLandmarks":[],"handednesses":[],"handedness":[]}）。

问题分析

经过技术分析，这个问题通常由以下几个原因导致：

1. 初始帧检测条件过于严格：原始代码中使用了video.currentTime > 0 && video.currentTime !== this.lastVideoTime作为检测条件，这可能导致第一帧被跳过。

2. 绘图函数参数顺序错误：drawConnectors和drawLandmarks函数的第一个参数应该是Canvas上下文对象，而不是landmarks数据。

3. HAND_CONNECTIONS引用错误：HandLandmarker本身不包含HAND_CONNECTIONS，这个常量应该从@mediapipe/hands中导入。

4. 设备兼容性问题：在某些设备上，JavaScript模块可能无法正确读取Tensor数据，导致检测失败。

解决方案

1. 修改检测条件

将严格的检测条件简化为仅比较当前时间与上次检测时间：

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

2. 修正绘图函数调用

确保正确传递Canvas上下文作为第一个参数：

drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {
    color: '#00FF00',
    lineWidth: 5
});
drawLandmarks(canvasCtx, landmarks, { color: '#FF0000', lineWidth: 2 });

3. 正确导入HAND_CONNECTIONS

从正确的模块导入HAND_CONNECTIONS：

import { HAND_CONNECTIONS } from '@mediapipe/hands';

4. 设备兼容性检查

如果上述修改后问题仍然存在，建议：

• 检查设备是否支持WebGL
• 确保浏览器版本兼容
• 测试不同设备以确认是否为特定硬件问题

实现要点

1. 持续帧检测：使用requestAnimationFrame确保持续检测视频帧。

2. Canvas设置：正确设置Canvas尺寸以匹配视频尺寸：

canvasElement.style.width = video.videoWidth.toString();
canvasElement.style.height = video.videoHeight.toString();
canvasElement.width = video.videoWidth;
canvasElement.height = video.videoHeight;

3. 上下文管理：使用save()和restore()保护Canvas状态。

总结

MediaPipe的HandLandmarker在JavaScript环境中使用时，需要注意正确的初始化、帧检测逻辑和绘图函数调用。通过修正检测条件、绘图参数和模块引用，大多数空数组问题都能得到解决。对于设备兼容性问题，建议进行多设备测试以确保功能稳定性。