Блог

Я работаю над модулем, в котором я должен интегрировать обнаружение позы в наше мобильное приложение. Мобильное приложение разработано с использованием платформы react native, а проект управляется expo. Мы работаем с библиотекой @mediapipe / pose (MediaPipe pose). Библиотека была установлена через 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

Любая помощь будет оценена. Спасибо.