How to Add Real-Time Pose Estimation and Human Body Detection in mobile apps Without SDKs or Libraries in 2025

Integrating real-time pose estimation and human body detection into mobile and web applications has long been a challenge for developers. Packages like TensorFlow.js, mediapipe offer incredible capabilities, but stabilizing them across platforms like iOS and Android often becomes a frustrating process...

‍

At Movelytics, we experienced these challenges firsthand, and that’s why we created the PoseTracker API. Our API simplifies pose estimation, eliminating the need for cumbersome SDKs or packages while providing a seamless integration experience.

‍

‍What if I told you that you could add pose estimation with just one line of code? Try it =>

‍

<iframe 
  id="poseTrackerFrame"
  src="https://app.posetracker.com/pose_tracker/tracking?token=020ad449-5b0d-4468-8426-717c20da55d9&exercise=squat"
  allow="camera *;" 
/>

‍

‍

How do pose estimation and human body detection work with PoseTracker?

We offer two tools:

• The first one integrates all the pose estimation technology and connects directly to the user's camera through an iframe.

• The second is a tracking pixel that loads all the pose estimation packages and our logic, allowing your application to process images and receive pose estimation and motion analysis data.

Why Choose PoseTracker API?

‍

PoseTracker is the first API designed specifically for developers looking to integrate real-time pose estimation and motion tracking into their applications. Whether you’re building for React Native, TensorFlow, or other platforms, PoseTracker allows you to focus on creating user-friendly experiences without worrying about pose estimation SDKs complexity.

‍

Key Features:

• Cross-Platform Compatibility: Works effortlessly on iOS, Android, and web applications.
• Pre-Trained Exercise Analysis: Includes motion analysis tools for exercises like squats, push-ups, lunges, and more.
• Real-Time Feedback: Provides actionable insights on movement quality and repetitions.
• Customizable Use Cases: Developers can create their own motion analysis tools tailored to specific needs.
• Lightweight Integration: No SDKs needed—simply call our API via a WebView or iframe.

‍

Getting Started with PoseTracker API

‍

Here’s how you can integrate PoseTracker into a React Native application using our free endpoint.

‍

Step 1: Setting Up Your Project

‍

Create a new React Native project using Expo. Install the necessary packages:

‍‍

npx create-expo-app my-app
cd my-app
yarn add react-native-webview expo-camera

‍

Here, we will only need the expo-camera library to handle permissions.

‍

Step 2: Setting Up the Camera

‍

Allow your app to access the device’s camera:

import { Camera } from 'expo-camera';
import { useEffect, useState } from 'react';

const [hasPermission, setHasPermission] = useState(false);

useEffect(() => {
  const requestCameraPermission = async () => {
    try {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    } catch (error) {
      console.error("Failed to request camera permission:", error);
    }
  };

  requestCameraPermission();
}, []);

if (!hasPermission) {  
return (<View style={styles.container}><Text>The app needs access to your camera. Allow it in your device settings.</Text></View>  );}

‍


‍

Step 3: Integrating PoseTracker WebView

‍

PoseTracker provides a lightweight WebView solution for rendering pose estimation results. Add this code to your app:

import { WebView } from 'react-native-webview';

//Define the sizes for the you webview and so the camera
const width = 300;
const height = 300;

// Create a bridge to handle communication between the iframe and your app
// By default posetracker will post message into the iframe with a window.postMessage(data) but react native app cannot access it.

const jsBridge = `
    window.addEventListener('message', function(event) {
      window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
    });

    window.webViewCallback = function(data) {
      window.ReactNativeWebView.postMessage(JSON.stringify(data));
    };

    const originalPostMessage = window.postMessage;
    window.postMessage = function(data) {
      window.ReactNativeWebView.postMessage(typeof data === 'string' ? data : JSON.stringify(data));
    };

    true; // Important for a correct injection
  `;

// Handle message from posetracker iframe 
const onMessage = (event) => {
  try {
    let parsedData;
    if (typeof event.nativeEvent.data === 'string') {
      parsedData = JSON.parse(event.nativeEvent.data);
    } else {
      parsedData = event.nativeEvent.data;
    }
      
    console.log('Parsed data:', parsedData);
    //webViewCallback(parsedData); // Process the data
  } catch (error) {
    console.error('Error processing message:', error);
    console.log('Problematic data:', event.nativeEvent.data);
  }
};

return (
  <WebView
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowsInlineMediaPlayback={true}
      mediaPlaybackRequiresUserAction={false}
      style={styles.webView}
      source={{ uri: posetracker_url }}
      originWhitelist={['*']}
      injectedJavaScript={jsBridge}
      onMessage={onMessage}
      // Activer le debug pour voir les logs WebView
      debuggingEnabled={true}
      // Permettre les communications mixtes HTTP/HTTPS si nécessaire
      mixedContentMode="compatibility"
      // Ajouter un gestionnaire d'erreurs
      onError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        console.warn('WebView error:', nativeEvent);
      }}
      // Ajouter un gestionnaire pour les erreurs de chargement
      onLoadingError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        console.warn('WebView loading error:', nativeEvent);
      }}
    />
)

‍

‍

Step 4: Handle Pose Estimation and Motion Analysis data

‍

Use the data received to create your own users experiences !

‍

PoseTracker will essentially provide data for fitness exercise repetition counting and real-time feedback on the execution of each exercise.

‍

You can find the full code for this tutorial on our Github: https://github.com/Movelytics/PoseTracker-Example-ReactNative-Expo

‍

‍

Applications of PoseTracker API

‍

PoseTracker API is perfect for:

• Fitness Apps: Track form and count reps for exercises.
• Rehabilitation: Monitor recovery progress and ensure correct movements.
• Gaming: Add motion-controlled gameplay to your apps.
• Yoga Training: Guide users through poses with real-time feedback.

‍

Why PoseTracker Stands Out

Unlike competitors like PoseNet, MoveNet, or OpenPose, PoseTracker doesn’t require complex SDKs or large installations. It’s designed for plug-and-play integration, making it the most developer-friendly solution on the market.

Try PoseTracker API today and take your fitness or health app to the next level!

Visit PoseTracker to learn more.

‍