@raznak/react-native-mediapipe
v0.0.27TypeScript
Raznak MediaPipe package for React Native
13/weekUpdated 2 weeks agoMITUnpacked: 19.1 MB
Published by Olivier de Régis
npm install @raznak/react-native-mediapipeReact Native Mediapipe
The ThinkSys Mediapipe enables pose detection for React Native apps, providing a comprehensive solution for both iOS and Android developers. It offers real-time motion tracking, seamless integration, and customizable features, ideal for fitness, healthcare, and interactive applications. By combining MediaPipe's advanced capabilities with React Native's cross-platform framework, developers can easily build immersive, motion-based apps across both mobile platforms.
Requirement
* iOS 13 or higher
* Gradle minimum SDK 24 or higher
* Android SDK Version 26 or higher
Installation
``
npm install @thinksys/react-native-mediapipe
iOS setup
1. Add camera usage permission in Info.plist in example/ios
NSCameraUsageDescription
This app uses camera to get pose landmarks that appear in the camera feed.
2. Run cd ios && pod install`
Android setup
Add these to your project's manifest.
Props
| Prop | Description |
|-------------|-------------------------------------------------------------------------------------------------|
|
| Sets the camera view width. |
| height | Sets the camera view height. |
| onLandmark| Callback function to retrieve body landmark data. |
| frameLimit| set the frame rate during initialization(ios only). |
| face | Toggles visibility of the face in the body model. Affects the data provided by onLandmark. |
| leftArm | Toggles visibility of the left arm in the body model. Affects the data provided by onLandmark. |
| rightArm | Toggles visibility of the right arm in the body model. Affects the data provided by onLandmark. |
| leftWrist | Toggles visibility of the left wrist in the body model. Affects the data provided by onLandmark.|
| rightWrist| Toggles visibility of the right wrist in the body model. Affects the data provided by onLandmark.|
| torso | Toggles visibility of the torso in the body model. Affects the data provided by onLandmark. |
| leftLeg | Toggles visibility of the left leg in the body model. Affects the data provided by onLandmark. |
| rightLeg | Toggles visibility of the right leg in the body model. Affects the data provided by onLandmark. |
| leftAnkle | Toggles visibility of the left ankle in the body model. Affects the data provided by onLandmark.|
| rightAnkle| Toggles visibility of the right ankle in the body model. Affects the data provided by onLandmark.|
Usage
$3
`js
import { RNMediapipe } from '@thinksys/react-native-mediapipe';export default function App() {
return (
height={300}
/>
)
}
`$3
#### Used to show/hide any body part overlay
#### By default, the body prop is set to true
js
import { RNMediapipe } from '@thinksys/react-native-mediapipe';export default function App() {
return (
height={300}
face={true}
leftArm={true}
rightArm={true}
leftWrist={true}
rightWrist={true}
torso={true}
leftLeg={true}
rightLeg={true}
leftAnkle={true}
rightAnkle={true}
/>
)
}
`$3
js
import { RNMediapipe, switchCamera } from '@thinksys/react-native-mediapipe';export default function App() {
const onFlip = () => {
switchCamera();
};
return (
height={300}
/>
Switch Camera
)
}
`$3
js
import { RNMediapipe } from '@thinksys/react-native-mediapipe';export default function App() {
return (
height={300}
onLandmark={(data) => {
console.log('Body Landmark Data:', data);
}}
/>
)
}
``Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
---
🔗 Links
License
This project is licensed under a custom MIT License with restrictions - see the LICENSE file for details.