expo-pose-landmarks

Pose landmarks detection for Expo using MediaPipe and Vision Camera.

Features

• Real-time pose detection using MediaPipe
• Vision Camera Frame Processor integration
• TypeScript support
• Event-driven architecture
• Expo managed workflow compatible

Installation

npm install expo-pose-landmarks

Usage

Basic Setup

import { 
  initPoseLandmarks, 
  addPoseDetectedListener, 
  addStatusListener, 
  addErrorListener,
  removeAllListeners 
} from 'expo-pose-landmarks';

// Initialize the model
await initPoseLandmarks();

// Add listeners
addPoseDetectedListener((result) => {
  console.log('Pose detected:', result);
  // result.landmarks contains array of pose landmarks
  // result.frameWidth and result.frameHeight for frame dimensions
});

addStatusListener((status) => {
  console.log('Status:', status.status);
});

addErrorListener((error) => {
  console.error('Error:', error.error);
});

// Cleanup
removeAllListeners();

With Vision Camera

import { Camera, useFrameProcessor } from 'react-native-vision-camera';
import { poseLandmarker } from 'expo-pose-landmarks';

function PoseDetectionScreen() {
  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    poseLandmarker(frame);
  }, []);

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={isActive}
      frameProcessor={frameProcessor}
    />
  );
}

API Reference

Functions

initPoseLandmarks(): Promise<void>

Initialize the pose landmarker model.

addPoseDetectedListener(listener: (result: PoseLandmarksResult) => void)

Add listener for pose detection results.

addStatusListener(listener: (status: PoseLandmarksStatus) => void)

Add listener for status updates.

addErrorListener(listener: (error: PoseLandmarksError) => void)

Add listener for error events.

removeAllListeners()

Remove all event listeners.

Types

PoseLandmark

interface PoseLandmark {
  keypoint: number;
  x: number;
  y: number;
  z: number;
  visibility: number;
  presence: number;
}

PoseLandmarksResult

interface PoseLandmarksResult {
  landmarks: PoseLandmark[][];
  frameWidth: number;
  frameHeight: number;
}

Configuration

Add the plugin to your app.json:

{
  "expo": {
    "plugins": [
      "expo-pose-landmarks"
    ]
  }
}

Requirements

• Expo SDK 49+
• React Native Vision Camera
• MediaPipe (included in the plugin)

License

MIT