如何在Posenet应用程序中显示关键点？

Question

所以我想用Posenet和ThreeJS制作游戏。您将需要动手来“杀死”飞行的ThreeJS对象。认为它像是水果忍者。

Posenet有效，但是我看不到关键点。我可以记录它们，但是我希望玩家看到他的手在哪里，所以我想要看到点。

我尝试实现Tensorflow演示的代码，但是由于某些原因它无法正常工作。

import * as posenet from '@tensorflow-models/posenet';
import Stats from 'stats.js';
import {drawKeypoints} from './demo_util';

const stats = new Stats();

const videoWidth = 800;
const videoHeight = 800;

const guiState = {
  algorithm: 'single-pose',
  input: {
    // mobileNetArchitecture: isMobile() ? '0.50' : '0.75',
    mobileNetArchitecture: 0.75,
    outputStride: 16,
    imageScaleFactor: 0.3,
  },
  singlePoseDetection: {
    minPoseConfidence: 0.25,
    minPartConfidence: 0.5,
  },
  multiPoseDetection: {
    maxPoseDetections: 5,
    minPoseConfidence: 0.15,
    minPartConfidence: 0.1,
    nmsRadius: 30.0,
  },
  output: {
    showVideo: false,
    showSkeleton: false,
    showPoints: true,
  },
  net: null,
};

export default class Posenet {

  // function to boot every process
  async bindPage() {
    const input = document.querySelector(`#input`);
    const scaleFactor = 0.5;
    const flipHorizontal = false;
    const outputStride = 16;

    // loading posenet
    console.log(`booting posenet...`);
    const net = await posenet.load();

    // initialising webcam
    console.log(`initialising webcam...`);
    await this._initWebcam();

    // estimating pose in webcam
    console.log(`estimating...`);
    this._estimatePose(net, input, scaleFactor, flipHorizontal, outputStride);
    const video = document.querySelector(`#input`);
    this.detectPoseInRealTime(video);
  }

  // function to estimate your pose through the webcam
  async _estimatePose(net, input, scaleFactor, flipHorizontal, outputStride) {
    try {
      const pose = await net.estimateSinglePose(
        input,
        scaleFactor,
        flipHorizontal,
        outputStride
      );

      const left = pose.keypoints[9];
      const right = pose.keypoints[10];

      if (left.score >= 0.60 && right.score >= 0.60) {
        console.log(`${left.part} : X = ${800 - left.position.x} --- Y = ${left.position.y}`);
        console.log(`${right.part} : X = ${800 - right.position.x} --- Y = ${right.position.y}`);
      } else {
        console.log(`failed`);
      }
    } catch (e) {
      console.log(e);
    }

    // this loops the pose estimation
    window.requestAnimationFrame(() => { this._estimatePose(net, input, scaleFactor, flipHorizontal, outputStride); });
  }

  // check on the device that you are viewing it from
  isAndroid() {
    return /Android/i.test(navigator.userAgent);
  }

  isiOS() {
    return /iPhone|iPad|iPod/i.test(navigator.userAgent);
  }

  isMobile() {
    return this.isAndroid() || this.isiOS();
  }

  // function to initialise the webcam
  async _initWebcam() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      throw new Error(
        'Browser API navigator.mediaDevices.getUserMedia not available');
    }
    const video = document.querySelector(`#input`);
    await navigator.mediaDevices
      .getUserMedia({
        audio: false,
        video: {
          height: 800,
          width: 800,
          facingMode: `user`
        }
      })
      .then(stream => {
        if (`srcObject` in video) {
          video.srcObject = stream;
          video.play();
        } else {
          video.src = window.URL.createObjectURL(stream);
          video.play();
        }
      })
      .then(() => new Promise(resolve => (video.onloadedmetadata = resolve)));
  }

  detectPoseInRealTime(video) {
    const canvas = document.querySelector(`#output`);
    const ctx = canvas.getContext('2d');

    const flipPoseHorizontal = true;

    canvas.width = videoWidth;
    canvas.height = videoHeight;

    async function poseDetectionFrame() {
      stats.begin();
      let poses = [];
      let minPoseConfidence = 0;
      let minPartConfidence = 0;

      const pose = await guiState.net.estimatePoses(video, {
        flipHorizontal: flipPoseHorizontal,
        decodingMethod: 'single-person'
      });
      poses = poses.concat(pose);
      minPoseConfidence = + guiState.singlePoseDetection.minPoseConfidence;
      minPartConfidence = + guiState.singlePoseDetection.minPartConfidence;

      ctx.clearRect(0, 0, videoWidth, videoHeight);

      if (guiState.output.showVideo) {
        ctx.save();
        ctx.scale(- 1, 1);
        ctx.translate(- videoWidth, 0);
        ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
        ctx.restore();
      }

      // For each pose (i.e. person) detected in an image, loop through the poses
      // and draw the resulting skeleton and keypoints if over certain confidence
      // scores
      poses.forEach(({score, keypoints}) => {
        if (score >= minPoseConfidence) {
          if (guiState.output.showPoints) {
            drawKeypoints(keypoints, minPartConfidence, ctx);
          }
        }
      });

      // End monitoring code for frames per second
      stats.end();

      requestAnimationFrame(poseDetectionFrame);
    }
    poseDetectionFrame();
  }
}

因此，以下行给我带来了问题（无法读取null的属性“ estimatePoses”），这是因为我有一个不同且相似的功能。但我只是想不通。有人可以帮我显示点吗？

const pose = await guiState.net.estimatePoses(video, {
        flipHorizontal: flipPoseHorizontal,
        decodingMethod: 'single-person'
      });