WordPress插件TensorFlow.js报错：Cannot read properties of undefined (reading 'mediapipeFacemesh')

控制台错误“Cannot read properties of undefined (reading 'mediapipeFacemesh')”直接指向MediaPipe FaceMesh依赖未正确初始化或加载，这是面部关键点检测失败、眼镜无法随面部移动的核心原因；眼镜固定在顶部，说明代码未成功获取双眼坐标数据，只能使用默认固定位置。

1. 修复MediaPipe依赖加载问题 #

正确的CDN导入顺序与地址 #

MediaPipe FaceMesh需依赖TensorFlow.js核心库，必须保证加载顺序正确：

<!-- 先加载TensorFlow.js核心依赖 -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@4.10.0/dist/tf-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@4.10.0/dist/tf-converter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@4.10.0/dist/tf-backend-webgl.min.js"></script>
<!-- 再加载MediaPipe FaceMesh -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js"></script>

等待依赖加载完成后执行代码 #

不要在DOM未加载完成时直接调用FaceMesh，可通过事件监听确保资源就绪：

document.addEventListener('DOMContentLoaded', async () => {
  // 此处初始化FaceMesh与摄像头逻辑
});

2. 修正面部关键点获取与眼镜定位逻辑 #

依赖加载正常后，需正确获取双眼关键点（FaceMesh中左眼索引33、右眼索引263），并将眼镜位置绑定到双眼相对坐标：

// 初始化FaceMesh
const faceMesh = new window.FaceMesh({locateFile: (file) => {
  return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/${file}`;
}});

faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5
});

faceMesh.onResults((results) => {
  if (!results.multiFaceLandmarks) return;
  
  // 获取双眼坐标
  const leftEye = results.multiFaceLandmarks[0][33];
  const rightEye = results.multiFaceLandmarks[0][263];
  
  // 关联视频元素与眼镜元素
  const video = document.getElementById('camera-feed');
  const glasses = document.getElementById('glasses-overlay');
  
  // 转换归一化坐标为视频实际像素位置
  const midX = (leftEye.x + rightEye.x) / 2 * video.offsetWidth;
  const midY = (leftEye.y + rightEye.y) / 2 * video.offsetHeight;
  
  // 调整眼镜位置（根据图片尺寸偏移，确保居中在双眼上方）
  glasses.style.left = `${midX - glasses.offsetWidth / 2}px`;
  glasses.style.top = `${midY - glasses.offsetHeight / 1.5}px`;
});

3. WordPress插件专属优化 #

• 通过wp_enqueue_scripts管理脚本依赖，确保加载顺序：

function enqueue_facemesh_deps() {
  wp_enqueue_script('tf-core', 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@4.10.0/dist/tf-core.min.js', array(), '4.10.0', false);
  wp_enqueue_script('tf-converter', 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@4.10.0/dist/tf-converter.min.js', array('tf-core'), '4.10.0', false);
  wp_enqueue_script('tf-backend', 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@4.10.0/dist/tf-backend-webgl.min.js', array('tf-core'), '4.10.0', false);
  wp_enqueue_script('mediapipe-facemesh', 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js', array('tf-core', 'tf-converter', 'tf-backend'), '0.4.1633559619', false);
  wp_enqueue_script('plugin-main', plugin_dir_url(__FILE__) . 'js/main.js', array('mediapipe-facemesh'), '1.0.0', false);
}
add_action('wp_enqueue_scripts', 'enqueue_facemesh_deps');

• 确保视频容器与眼镜元素的CSS定位正确：

.camera-wrapper {
  position: relative;
  display: inline-block;
}

#camera-feed {
  width: 100%;
  height: auto;
}

#glasses-overlay {
  position: absolute;
  pointer-events: none; /* 避免遮挡摄像头交互 */
  width: 150px;
  height: auto;
}

1. 清除浏览器缓存后重新加载页面，检查控制台是否仍有mediapipeFacemesh相关错误。
2. 开启摄像头，查看控制台是否能打印results.multiFaceLandmarks数据。
3. 确认眼镜位置是否随面部移动同步变化。

内容的提问来源于stack exchange，提问作者Mohamed Jmal