Expo集成TensorFlow.js人脸关键点检测报错：Cannot read property 'includes'

算力阿峰

2026-7-19

解决Expo托管应用中@tensorflow-models/face-landmarks-detection的navigator.userAgent未定义错误

问题根源

你遇到的错误是因为@mediapipe/face_mesh依赖浏览器环境的navigator.userAgent属性，但Expo/React Native属于原生应用环境，并不存在浏览器标准的navigator对象，导致调用includes方法时触发undefined报错。这个模型并非完全不能在Expo中使用，只是需要适配React Native的运行环境。

解决方案

1. 模拟缺失的浏览器API

在导入任何TensorFlow相关库之前，手动在全局作用域添加navigator对象的模拟，避免依赖报错。在应用入口文件（比如App.js）最顶部添加：

// 模拟浏览器环境的navigator对象
global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'React Native Expo';

2. 使用适配React Native的TFJS后端

原代码中使用的tfjs-backend-webgl是为浏览器设计的，在React Native环境下需要替换为专门的@tensorflow/tfjs-react-native后端：

安装适配依赖：

npm install @tensorflow/tfjs-react-native @tensorflow/tfjs-core @tensorflow-models/face-landmarks-detection @mediapipe/face_mesh

初始化后端并加载模型：

import * as tf from '@tensorflow/tfjs-react-native';
import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';
import '@mediapipe/face_mesh';

function App() {
  useEffect(() => {
    const initFaceDetection = async () => {
      // 等待TFJS React Native后端初始化完成
      await tf.ready();
      // 创建人脸检测器
      const detector = await faceLandmarksDetection.createDetector(
        faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh
      );
      // 后续可使用detector进行人脸 landmark 检测
    };

    initFaceDetection();
  }, []);

  // 组件其他逻辑...
}