tt.createHandDetector

收藏

我的收藏

tt.createHandDetector()

function draw() {
  let camera = tt.createCamera();
  camera.start("front", true, { gesture: true }).then((video) => {
    drawHand(video);
  });
  function drawHand(video) {
    const canvas = tt.createCanvas();
    const ctx = canvas.getContext("2d");
    const detector = tt.createHandDetector();
    const { width, height } = canvas;
    const scalar = width / video.videoWidth;
    video.height = (video.videoHeight * width) / video.videoWidth;
    video.width = width;
    var handInfo;
    function doHandDetect() {
      handInfo = detector.detect(video);
      setTimeout(doHandDetect, 30);
    }
    function draw() {
      requestAnimationFrame(draw);
      video.paintTo(canvas, 0, 0, 0, 0, video.width, video.height);
      ctx.textBaseline = "middle";
      const txtarr = ["", "击拳", "鼓掌"];
      if (handInfo) {
        for (let i = 0; i < handInfo.length; i++) {
          const y = i * 80 + 160;
          var boundingBox = handInfo[i].boundingBox;
          var txt =
            "手势 " + (i + 1) + ": " + handInfo[i].actions + " 动态：" + handInfo[i].seqAction;
          if (handInfo[i].seqAction > 0) {
            ctx.font = "120px monospace";
            ctx.fillStyle = "red";
            ctx.fillText(
              txtarr[handInfo[i].seqAction],
              boundingBox.x * scalar,
              boundingBox.y * scalar - 50,
            );
          }
          ctx.font = "27px monospace";
          ctx.lineWidth = 1;
          ctx.fillStyle = "red";
          ctx.fillRect(0, y - 20, ctx.measureText(txt).width + 30, 41);
          ctx.fillStyle = "white";
          ctx.fillText(txt, 20, y);
          ctx.strokeStyle = "rgba(255,255,0,0.6)";
          ctx.lineWidth = 3;
          ctx.beginPath();
          ctx.rect(
            boundingBox.x * scalar,
            boundingBox.y * scalar,
            boundingBox.width * scalar,
            boundingBox.height * scalar,
          );
          ctx.stroke();
          ctx.lineWidth = 3;
          ctx.strokeStyle = "rgba(215, 255, 255,0.6)";
          let keypoints = handInfo[i].keyPoints;
          for (let i = 0; i < keypoints.length; i++) {
            if (i == 0 || i == 5 || i == 9 || i == 13 || i == 17) {
              if (i != 0) {
                ctx.stroke();
              }
              ctx.beginPath();
              ctx.moveTo(keypoints[0].x * scalar, keypoints[0].y * scalar);
            }
            if (
              i <= 4 ||
              (i > 4 && i <= 8) ||
              (i > 8 && i <= 12) ||
              (i > 12 && i <= 16) ||
              (i > 16 && i <= 20)
            ) {
              ctx.lineTo(keypoints[i].x * scalar, keypoints[i].y * scalar);
            }
            ctx.fillStyle = "purple";
            ctx.fillText(i, keypoints[i].x * scalar + 10, keypoints[i].y * scalar);
            ctx.fillStyle = "red";
            ctx.fillRect(keypoints[i].x * scalar - 6, keypoints[i].y * scalar, 10, 10);
          }
          ctx.stroke();
        }
      }
    }
    draw();
    doHandDetect();
  }
}
draw();

const { width, height } = canvas; //要绘制的canvas
const scalar = width / video.videoWidth; //video为摄像头返回的视频流对象
//例如，使用包围盒时，需要以下处理：
var boundindBoxX = boundingBox.x * scalar;

1. 矩形框通过HandInfo.boundingBox画出
2. 22个手部关键点由HandInfo.key_points画出
3. 输出的 hand_open 为HandInfo.actions值