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 = `
(function() {
window.webViewCallback = function(info) {
window.ReactNativeWebView.postMessage(JSON.stringify(info));
}
})();
`
Then we use your bridge to send you some information, and here we handle it with:
onMessage={(event) => {
const info = JSON.parse(event.nativeEvent.data)
webViewCallback(info)
}}
const handleCounter = (count) => {
setRepsCounter(count)
}
const handleInfos = (infos) => {
setCurrentPoseTrackerInfos(infos)
}
//This is the function pass to the WebView to listen info from the WebView
const webViewCallback = (info) => {
switch (info.type) {
case 'counter':
return handleCounter(info.current_count)
default:
return handleInfos(info)
}
}