MediaPipe的Hands在vue中，没有触发results回调，给个相关实例

以下是一个使用MediaPipe Hands的Vue实例，其中包含一个video元素和一个canvas元素，用于显示检测到的手部关键点：

<template>
  <div>
    <video ref="video" width="640" height="480"></video>
    <canvas ref="canvas" width="640" height="480"></canvas>
  </div>
</template>

<script>
import * as Hands from '@mediapipe/hands';

export default {
  data() {
    return {
      hands: null,
      video: null,
      canvas: null
    };
  },
  mounted() {
    this.hands = new Hands.Hands({
      locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
      }
    });
    this.video = this.$refs.video;
    this.canvas = this.$refs.canvas;
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        this.video.srcObject = stream;
        this.video.onloadedmetadata = () => {
          this.video.play();
          this.hands.initialize();
          this.hands.onResults(this.onResults);
          requestAnimationFrame(this.draw);
        };
      });
  },
  methods: {
    onResults(results) {
      console.log(results);
      // 在这里处理检测到的手部关键点数据
    },
    draw() {
      const canvasCtx = this.canvas.getContext('2d');
      canvasCtx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
      if (this.hands) {
        this.hands.send({ image: this.video });
      }
      requestAnimationFrame(this.draw);
    }
  }
};
</script>

在这个例子中，我们在mounted钩子中初始化了MediaPipe Hands，并使用getUserMedia获取视频流。一旦视频流被加载，我们调用hands.initialize()来初始化MediaPipe Hands，并使用hands.onResults()函数来注册回调函数this.onResults()。在draw()函数中，我们使用hands.send()函数发送视频帧，以便进行手部关键点检测。每次绘制时，我们都会调用requestAnimationFrame()函数来更新画布。当检测到手部关键点时，onResults()函数将被调用，并将检测结果作为参数传递给它。在这里，我们只是简单地将结果打印到控制台中。你可以根据需要修改这个函数来执行其他操作。