Hướng dẫn phát hiện mốc trên tay cho web

Nhiệm vụ Điểm mốc bằng tay MediaPipe cho phép bạn phát hiện các địa danh của bàn tay trong hình ảnh. Những hướng dẫn này chỉ cho bạn cách sử dụng Thiết bị xác định vị trí bằng tay cho ứng dụng web và JavaScript.

Để biết thêm thông tin về tính năng, kiểu máy và các lựa chọn cấu hình của nhiệm vụ này, xem phần Tổng quan.

Ví dụ về mã

Mã mẫu cho tính năng Mốc ranh giới bằng tay cung cấp cách triển khai hoàn chỉnh trong JavaScript để bạn tham khảo. Mã này giúp bạn kiểm thử công việc này và đã bắt đầu xây dựng ứng dụng phát hiện điểm mốc bằng tay của riêng bạn. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ của tính năng Mốc ranh giới bằng tay chỉ bằng trình duyệt web.

Thiết lập

Phần này mô tả các bước chính để thiết lập môi trường phát triển dành riêng cho việc sử dụng Công cụ đánh dấu bằng tay. Để biết thông tin chung về thiết lập môi trường phát triển web và JavaScript, bao gồm yêu cầu về phiên bản nền tảng, hãy xem Hướng dẫn thiết lập cho web.

Gói JavaScript

Mã Cột mốc bằng tay được cung cấp qua MediaPipe @mediapipe/tasks-vision Gói Trạng thái đã hiển thị Bạn có thể tìm và tải các thư viện này xuống bằng cách làm theo hướng dẫn trong nền tảng Hướng dẫn thiết lập.

Bạn có thể cài đặt các gói bắt buộc thông qua kháng nghị bằng lệnh sau:

npm install @mediapipe/tasks-vision

Nếu bạn muốn nhập mã tác vụ qua mạng phân phối nội dung (CDN) hãy thêm mã sau vào <head> trong tệp HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Tác vụ tạo điểm mốc bằng tay MediaPipe cần có một mô hình đã qua đào tạo tương thích với công việc. Để biết thêm thông tin về các mô hình đã huấn luyện hiện có dành cho tính năng Xác định vị trí bằng tay, hãy xem tổng quan về nhiệm vụ phần Mô hình.

Chọn và tải mô hình xuống rồi lưu trữ mô hình đó trong thư mục dự án:

<dev-project-root>/app/shared/models/

Tạo việc cần làm

Sử dụng một trong các hàm createFrom...() của tính năng Xác định vị trí bằng tay để chuẩn bị tác vụ để chạy các dự đoán. Sử dụng createFromModelPath() có đường dẫn tương đối hoặc tuyệt đối đến tệp mô hình đã huấn luyện. Nếu mô hình đã được tải vào bộ nhớ, bạn có thể sử dụng phương thức createFromModelBuffer().

Ví dụ về mã bên dưới minh hoạ việc sử dụng hàm createFromOptions() để thiết lập việc cần làm. Hàm createFromOptions cho phép bạn tuỳ chỉnh Điểm mốc bằng tay với các lựa chọn cấu hình. Để biết thêm thông tin về cấu hình hãy xem phần Tuỳ chọn cấu hình.

Mã sau đây minh hoạ cách tạo và định cấu hình tác vụ bằng công cụ tuỳ chỉnh tùy chọn:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

Các lựa chọn về cấu hình

Tác vụ này có các lựa chọn cấu hình sau cho Web và JavaScript ứng dụng:

Tên lựa chọn Mô tả Khoảng giá trị Giá trị mặc định
runningMode Thiết lập chế độ chạy cho tác vụ. Có hai chế độ:

HÌNH ẢNH: Chế độ cho đầu vào một hình ảnh.

VIDEO: Chế độ cho khung đã giải mã của hoặc sự kiện phát trực tiếp dữ liệu đầu vào, chẳng hạn như từ camera.		 {IMAGE, VIDEO} IMAGE
numHands Số lượng tay tối đa mà trình phát hiện điểm chạm tay phát hiện. Any integer > 0 1
minHandDetectionConfidence Điểm tin cậy tối thiểu để phát hiện tay được coi là thành công trong mô hình phát hiện tì tay. 0.0 - 1.0 0.5
minHandPresenceConfidence Điểm số tin cậy tối thiểu cho điểm số về sự có mặt trên tay mô hình phát hiện mốc. Ở chế độ Video và chế độ Phát trực tiếp, nếu điểm số tin cậy về sự có mặt của bàn tay trong mô hình điểm mốc trên bàn tay ở bên dưới ngưỡng này, Công cụ đánh dấu bằng tay sẽ kích hoạt mô hình phát hiện tì tay. Nếu không, một thuật toán theo dõi cử chỉ tay nhẹ xác định vị trí của tay để phát hiện mốc tiếp theo. 0.0 - 1.0 0.5
minTrackingConfidence Điểm tin cậy tối thiểu để tính năng theo dõi cử chỉ tay được xem xét thành công. Đây là ngưỡng IoU hộp giới hạn giữa các tay trong khung hiện tại và khung cuối cùng. Ở chế độ Video và chế độ Phát trực tuyến của Điểm đánh dấu bằng tay, nếu quá trình theo dõi không thành công, thì tính năng Chấm điểm tay sẽ kích hoạt tay của bạn. Nếu không, Trợ lý sẽ bỏ qua bước phát hiện tay. 0.0 - 1.0 0.5

Chuẩn bị dữ liệu

Máy đánh dấu tay có thể phát hiện dấu mốc tay trong hình ảnh ở bất kỳ định dạng nào được hỗ trợ bởi trình duyệt chính. Tác vụ này cũng xử lý trước xử lý dữ liệu đầu vào, bao gồm đổi kích thước, xoay và chuẩn hoá giá trị. Cách phát hiện các dấu mốc trên bàn tay trong video: bạn có thể dùng API để xử lý nhanh từng khung hình bằng cách dùng dấu thời gian của khung hình để xác định thời điểm các điểm mốc bằng tay xảy ra trong video.

Chạy tác vụ

Điểm đánh dấu bằng tay sử dụng detect() (có chế độ chạy image) và Các phương thức detectForVideo() (với chế độ đang chạy video) để kích hoạt suy luận. Nhiệm vụ này sẽ xử lý dữ liệu, cố gắng phát hiện các điểm mốc trên tay và sau đó báo cáo kết quả.

Các lệnh gọi đến phương thức detect() và detectForVideo() của Trình phân cách tay sẽ chạy một cách đồng bộ và chặn luồng giao diện người dùng. Nếu bạn phát hiện thấy các điểm mốc trên tay trong khung hình video từ camera của thiết bị, mỗi lần phát hiện chặn chuỗi. Bạn có thể ngăn chặn điều này bằng cách triển khai trình thực thi web để chạy detect() và phương thức detectForVideo() trên một chuỗi khác.

Mã sau đây minh hoạ cách thực thi quá trình xử lý bằng mô hình tác vụ:

Bài đăng có hình ảnh

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

Video

await handLandmarker.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = handLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Để triển khai hoàn chỉnh hơn việc chạy tác vụ Xác định vị trí bằng tay, hãy xem mã ví dụ.

Xử lý và hiện kết quả

Trình tạo mốc cầm tay tạo ra một đối tượng kết quả cho phép tạo mốc cầm tay cho mỗi lần phát hiện chạy. Đối tượng kết quả chứa các điểm mốc bàn tay trong toạ độ hình ảnh, bàn tay địa danh tại các toạ độ và tay thuận trên thế giới(tay trái/phải) của các địa danh được phát hiện tay.

Sau đây là ví dụ về dữ liệu đầu ra của tác vụ này:

Dữ liệu đầu ra HandLandmarkerResult chứa 3 thành phần. Mỗi thành phần là một mảng, trong đó mỗi phần tử chứa các kết quả sau đây cho một bàn tay được phát hiện:

  • Tay thuận

    Tay thuận cho biết tay trái hay tay phải.

  • Địa danh

    Có 21 điểm mốc kim, mỗi điểm bao gồm các toạ độ x, y và z. Chiến lược phát hành đĩa đơn Toạ độ x và y được chuẩn hoá thành [0, 1, 1] theo chiều rộng của hình ảnh và chiều cao tương ứng. Toạ độ z biểu thị độ sâu của điểm mốc, với độ sâu ở cổ tay là điểm gốc. Giá trị càng nhỏ thì là đến máy ảnh. Độ lớn của z có cùng tỷ lệ với x

  • Điểm mốc Thế giới

    Các mốc 21 kim đồng hồ cũng được thể hiện trên toạ độ thế giới. Mỗi mốc bao gồm x, y và z, thể hiện các toạ độ 3D thực tế trong mét có gốc toạ độ ở tâm hình học của kim đồng hồ.

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

Hình ảnh sau đây minh hoạ kết quả của tác vụ:

Mã ví dụ về Mốc quan trọng bằng tay minh hoạ cách hiển thị kết quả được trả về từ tác vụ, hãy xem mã ví dụ