Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[tfjs-react-native] cameraWithTensors shows a Black Screen after Software updates on both Android and iOS (CODE NEVER CHANGES)

See original GitHub issue

System information

Have I written custom code (as opposed to using a stock example script provided in TensorFlow.js): Exactly
OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Android and iOS
Mobile device: Both Android and iOS after latest software update
TensorFlow.js installed from (npm or script link): yarn
TensorFlow.js version (use command below):3.8.0
Tensorflow.js Converter Version: 3.8.0 (package.json is provided below)

Describe the current behavior I have done a project about pose estimation on mobile devices and successfully deploy it at Expo. However, after a few months without touching it, I came back and wanted to develop new features. So, I went to the Expo page with the QR code that I have deployed my app (link provided below) and tested it. Somehow, on the screen that is used to open the front camera and do pose detection, it’s not working properly. No errors were thrown, but the camera never opens (it shows the black screen). I have tried changing from cameraWithTensors to bare Camera component from expo-camera to check where the problem could be and the Camera component can work properly. I also tried changing the models that I have loaded to check whether there are any problems, but there is none. With that said, I think the problem should be the cameraWithTensors component. Moreover, I have cloned the Github repo of this project and tried it locally (WITHOUT ANY CODE AND PACKAGES CHANGES), it also shows the same behavior. So, I believe this is the problem with the package version that occurs after the Software/OS updates on devices. How to fix this and make it work again?

Describe the expected behavior Open the camera and models work properly

Standalone code to reproduce the issue My minimal version should be something similar to this example: https://github.com/tensorflow/tfjs/blob/master/tfjs-react-native/integration_rn59/components/webcam/realtime_demo.tsx But make it in pure js version, not typescript, and use hooks instead of those componentDidMount things. Full version (it’s long and some parts are quite messy): https://github.com/jomariya23156/Multi-Fit/blob/master/screens/Exercise.js OR https://drive.google.com/file/d/1LjvkqkKKKF94lttu1R-CGRZZ5T0iOLS0/view?usp=sharing Github repo: https://github.com/jomariya23156/Multi-Fit
If you have Expo Go installed and use devices with updated software, you can scan this QR code to observe this behavior: https://expo.dev/@ariya23156/Multifit If you scan the QR code above (or clone Github repo and start expo), this is what you should do to navigate to the page where this problem occurs:

You will see the orange screen with the loading progress circle. Just tap anywhere on the screen.
On the login page. Just type anything in both ID and Password and tab login
After the login page, tab the Tutorial button (second from the left side) on the bottom nav bar
Tab Squat.
Waiting for loading to finish, you will be directed to the play screen with an orange bar on top and an orange button on the bottom. On this page you don’t need to tab anything, the camera should open and you should see yourself with the keypoint detected displays.

package.json

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@mediapipe/pose": "^0.4.1624666670",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-navigation/bottom-tabs": "^6.0.1",
    "@react-navigation/native": "^6.0.1",
    "@react-navigation/native-stack": "^6.0.1",
    "@tensorflow-models/pose-detection": "0.0.3",
    "@tensorflow/tfjs": "^3.8.0",
    "@tensorflow/tfjs-backend-wasm": "^3.8.0",
    "@tensorflow/tfjs-backend-webgl": "^3.8.0",
    "@tensorflow/tfjs-converter": "^3.8.0",
    "@tensorflow/tfjs-react-native": "^0.6.0",
    "@types/react-native-vector-icons": "^6.4.8",
    "expo": "~42.0.1",
    "expo-av": "~9.2.3",
    "expo-camera": "~11.2.2",
    "expo-font": "~9.2.1",
    "expo-gl": "~10.4.1",
    "expo-gl-cpp": "~10.4.0",
    "expo-screen-orientation": "^3.2.1",
    "expo-sensors": "^10.2.2",
    "expo-status-bar": "~1.0.4",
    "lottie-react-native": "^4.0.3",
    "native-base": "^3.0.7",
    "package.json": "^2.0.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-fs": "^2.18.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-leaderboard": "^1.0.6",
    "react-native-paper": "^4.9.2",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-slideshow": "^1.0.1",
    "react-native-stopwatch-timer": "0.0.21",
    "react-native-svg": "12.1.1",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-unimodules": "^0.14.6",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.4",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5",
    "underscore": "^1.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}