Hand-pose-detection react-native TypeError: Cannot read property 'prototype' of undefined about tfjs

[thiagodegan]

Update:
Switch to tfjs works.

const detectorConfig = {
        runtime: "tfjs",
        maxHands: 2,
        solutionPath: "https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection"
        //solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/hands/",
    };

Reference: https://discuss.tensorflow.org/t/typeerror-when-attempting-to-create-mediapipehands-detector/7602

[gaikwadrahul8]

Hi, @thiagodegan

I apologize for the delayed response and Good to hear that your issue has been resolved after changing the runtime to tfjs instead of mediapipe and if I'm not wrong it seems like this issue is happening from mediapipe end so internally we will discuss this issue with mediapipe team to fix this issue soon if possible.

If your issue got resolved then please feel free to close this issue. Thank you for your understanding and patience.

[cazrot335]

import React, { useRef, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import * as handpose from '@tensorflow-models/handpose';
import * as tf from '@tensorflow/tfjs';
import Webcam from 'react-webcam';
import RockImage from './assets/images/rock.png';
import PaperImage from './assets/images/paper.png';
import ScissorsImage from './assets/images/scissors.png';
import * as fp from 'fingerpose';
import { victoryDescription } from './assets/models/scissor';
import {Rock} from './assets/models/rock';
import {PaperGesture} from './assets/models/paper';

function Singleplayer() {

const location = useLocation();
const { selectedAvatar = '', username = '' } = location.state || {};
const choices = ['rock', 'paper', 'scissors'];
const choiceImages = { rock: RockImage, paper: PaperImage, scissors: ScissorsImage };
const [userScore, setUserScore] = useState(0);
const [botScore, setBotScore] = useState(0);
const [userChoice, setUserChoice] = useState(null);
const [botChoice, setBotChoice] = useState(null);

const webcamRef = useRef(null);
const canvasRef = useRef(null);

useEffect(() => {
const runHandpose = async () => {
await tf.setBackend('webgl');
const net = await handpose.load();
setInterval(() => {
detect(net);
}, 100);
};

runHandpose();

}, []);

const detect = async (net) => {
if (
typeof webcamRef.current !== 'undefined' &&
webcamRef.current !== null &&
webcamRef.current.video.readyState === 4
) {
const video = webcamRef.current.video;
const videoWidth = webcamRef.current.video.videoWidth;
const videoHeight = webcamRef.current.video.videoHeight;

  webcamRef.current.video.width = videoWidth;
  webcamRef.current.video.height = videoHeight;

  const hand = await net.estimateHands(video);
  if (hand.length > 0) {
    const GE = new fp.GestureEstimator([
      Rock, PaperGesture, victoryDescription
    ]);

    const gesture = await GE.estimate(hand[0].landmarks, 7.5);
    if (gesture.gestures !== undefined && gesture.gestures.length > 0) {
      const maxConfidence = gesture.gestures.reduce((maxIndex, currentGesture, index, array) => {
        return currentGesture.confidence > array[maxIndex].confidence ? index : maxIndex;
      }, 0);
      handleUserChoice(gesture.gestures[maxConfidence].name);
    }
  }
}

};

const handleUserChoice = (choice) => {
const botChoice = choices[Math.floor(Math.random() * choices.length)];
setUserChoice(choice);
setBotChoice(botChoice);

if ((choice === 'rock' && botChoice === 'scissors') ||
    (choice === 'scissors' && botChoice === 'paper') ||
    (choice === 'paper' && botChoice === 'rock')) {
  setUserScore(userScore + 1);
} else if (choice !== botChoice) {
  setBotScore(botScore + 1);
}

};

return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', maxWidth: '800px' }}>

{username}

{userChoice && }

Score: {userScore} - {botScore}

<button onClick={() => handleUserChoice('rock')}>Rock
<button onClick={() => handleUserChoice('paper')}>Paper
<button onClick={() => handleUserChoice('scissors')}>Scissors

Bot

{botChoice && }

<Webcam ref={webcamRef} style={{ marginTop: '20px', width: 320, height: 240 }} />
<canvas ref={canvasRef} style={{ position: 'absolute', marginLeft: 'auto', marginRight: 'auto', left: 0, right: 0, textAlign: 'center', zindex: 9, width: 320, height: 240 }} />

);
}

export default Singleplayer;
for this code i am getting this error
Cannot read properties of undefined (reading 'matchAgainst')
TypeError: Cannot read properties of undefined (reading 'matchAgainst')
at t.value (http://localhost:3000/static/js/bundle.js:140458:23)
at detect (http://localhost:3000/static/js/bundle.js:664:34)

arising due to this line how to fix plzz help
const gesture = await GE.estimate(hand[0].landmarks, 7.5);

[google-ml-butler]

Are you satisfied with the resolution of your issue?
Yes
No