Base on this here is a tutorial to use PoseTracker in a Mobile App :
Start a new Expo project
npx create-expo-app my-app
cd my-app
yarn install
Install dependencies for the webview
npx expo install expo-camera react-native-webview
Start and run the project on your Phone or a Simulator
For this part we recommend to use your phone with Expo Go App as described in Expo Documentation. Because we will need to access a camera with a human to track.
That use posetracker_url who's build with PoseTracker params.
π§ Important point : Data exchange between PoseTracker and your Application π§
We use what you are sending throw injectedJavaScript to send back data to our App. So we create a bridge between PoseTracker API frontend and YOUR actual App with :
injectedJavaScript={jsBridge}
// This is a basic js bridge
// We need a bridge to transit data between the ReactNative app and our WebView
// The WebView will use this function define here to send info that we will use later
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
`;
Then we use your bridge to send you some information, and here we handle it with: