1

当我尝试更新我的状态时，我的应用程序出现问题。我正在为班级构建一个健身应用程序，此时我想计算深蹲。我正在使用 tensorflowJS 和 react-webcam 来进行身体定位，然后根据用户的位置确定他们何时“向下”然后“向上”。如果他们这样做，计数器就会增加。我可以将它记录到控制台并且它工作正常 - 但是 - 当我尝试使用状态执行此操作时，它最终会导致应用程序崩溃。任何帮助都会很棒。

import React, { useRef, useState, useEffect } from 'react';
// import '../public/style.css';
import * as tf from '@tensorflow/tfjs';
import * as posenet from '@tensorflow-models/posenet';
import Webcam from 'react-webcam';
// import Counter from './Counter';

const Squat = () => {
  const [counter, setCounter] = useState(0);
  const webcamRef = useRef(null);

  const runPosenet = async () => {
    const net = await posenet.load({
      inputResolution: { width: 200, height: 200 },
      scale: 0.1,
    });
    setInterval(() => {
      detect(net);
    }, 100);
  };

  let array = [];
  let count = 0;
  let obj = {};
  let position = '';
  let positionArr = [];

  const detect = async (net, avgPosition = array, helperObj = obj) => {
    if (
      typeof webcamRef.current !== 'undefined' &&
      webcamRef.current !== null &&
      webcamRef.current.video.readyState === 4
    ) {
      // Get Video Properties
      const video = webcamRef.current.video;
      const videoWidth = webcamRef.current.video.videoWidth;
      const videoHeight = webcamRef.current.video.videoHeight;

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

      // Make Detections
      const pose = await net.estimateSinglePose(video);
      let leftShoulder = pose.keypoints[5].position.y;
      let rightShoulder = pose.keypoints[6].position.y;

      // Calculate user position
      const calculateAvg = (avgPosition, helperObj) => {
        if (pose.score > 0.5 && count <= 50) {
          avgPosition.push(leftShoulder);
          avgPosition.push(rightShoulder);
          const sum = avgPosition.reduce((a, b) => a + b, 0);
          helperObj.avg = sum / avgPosition.length || 0;
          helperObj.count = count;
          count++;
          return helperObj;
        } else {
          return helperObj;
        }
      };

      //Once user positition is calculated, use position to determine up and down
      const squat = () => {
        let squatObj = calculateAvg(avgPosition, helperObj);
        if (squatObj.count === 50) {
          console.log('running');
          if (leftShoulder && rightShoulder <= squatObj.avg + 50) {
            position = 'up';
          } else {
            position = 'down';
          }
        }
      };

      //Run function when pose score is good and avg is calculated
      if (pose.score > 0.4 && squat()) {
        squat();
      }
    }
  };

  const countFunc = () => {
    setInterval(() => {
      //let squatCounter = 0; for console.log
      if (position) {
        positionArr.push(position);
        console.log(positionArr);
        for (let i = 0; i < positionArr.length; i++) {
          if (positionArr[i - 1] === 'down' && positionArr[i] === 'up') {
            //squatCounter++; - for console.log
            setCounter(counter + 1);
          }
        }
        //console.log(squatCounter) - logs accurate number
      }
    }, 3000);
  };

  countFunc();
  runPosenet();
  return (
    <div>
      <div className="Squat">
        <header className="Squat-header">
          <Webcam
            ref={webcamRef}
            style={{
              position: 'absolute',
              marginLeft: 'auto',
              marginRight: 'auto',
              left: 0,
              right: 0,
              textAlign: 'center',
              zindex: 9,
              width: 480,
              height: 240,
            }}
          />
        </header>
      </div>
      Count: {counter}
    </div>
  );
};

export default Squat;
4

0 回答 0