2

我正在开发一个模块，我必须在我们的移动应用程序中集成姿势检测。移动应用程序是使用 react native 框架开发的，项目是由 expo 管理的。我们正在使用@mediapipe/pose（MediaPipe 姿势）库。该库是通过 npm 安装的。这是 App.js 文件的代码

import React, { useState, useEffect, useRef } from 'react'
import { StyleSheet, Text, View, useWindowDimensions, StatusBar } from 'react-native'
import { Camera } from 'expo-camera'
import Canvas from 'react-native-canvas'
import { drawConnectors, drawLandmarks } from '@mediapipe/drawing_utils'
import { Pose } from '@mediapipe/pose'

export default function App() {

  const [ permission, setPermission ] = useState(null)

  const cameraRef = useRef(null)

  const canvasRef = useRef(null)

  var camera = null

  const { width, height } = useWindowDimensions()

  useEffect(() => {

    (async () => {
      
      const { status } = await Camera.requestCameraPermissionsAsync()
      setPermission(status === 'granted')

    })()

  }, [])

  useEffect(() => {

    const pose = new Pose({
        locateFile: (file) => {
          return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
        }
    })
    
    // pose.setOptions({
    //   modelComplexity: 1,
    //   smoothLandmarks: true,
    //   enableSegmentation: true,
    //   smoothSegmentation: true,
    //   minDetectionConfidence: 0.5,
    //   minTrackingConfidence: 0.5
    // })

    // const canvas = canvasRef.current
    // const context = canvas.getContext('2d')
    // context.fillStyle = 'red'
    // context.fillRect(100, 100, canvasRef.current.width, canvasRef.current.height)

  }, [])

  if(permission === null)
  {
    return <View/>
  }

  if(permission === false)
  {
    return <View style = {{ justifyContent: 'center' }}>

      <Text style = {{ alignSelf: 'center' }}>Permission not granted</Text>

    </View>
  }

  return (
    <View style={styles.container}>
      
      <Camera style = {{ width, height, marginRight: 'auto', marginLeft: 'auto', left: 0, right: 0, zIndex: 9 }} ref = { cameraRef } ratio = '16:9' type = { Camera.Constants.Type.front }/>

      <Canvas style = {{ position: 'absolute', width, height, elevation: 1 }} ref = { canvasRef }>



      </Canvas>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

导入库不会产生任何错误，但调用 Pose 构造函数会产生错误。错误

TypeError: undefined is not a constructor (evaluating 'new _pose.Pose')

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:202:4 in runApplication

这是 github 项目的链接 [1]：https ://github.com/HimanshuChahal/MediaPipe-Pose/tree/master

任何帮助，将不胜感激。谢谢。

4

0 回答 0