คู่มือการตรวจหาจุดสังเกตของมือสำหรับเว็บ

งานเครื่องมือจุดสังเกตของมือ MediaPipe จะช่วยให้คุณตรวจหาจุดสังเกตของมือในรูปภาพได้ คำแนะนำเหล่านี้แสดงวิธีการใช้เครื่องมือไฮไลต์ด้วยมือ สำหรับเว็บและแอป JavaScript

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่า ของงานนี้ โปรดดูภาพรวม

ตัวอย่างโค้ด

โค้ดตัวอย่างสำหรับ Handจุดสังเกต คือการติดตั้งโค้ดนี้โดยสมบูรณ์ ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และรับ เริ่มสร้างแอปตรวจจับจุดสังเกต ของคุณเองด้วยมือ คุณสามารถดู เรียกใช้ และ แก้ไขโค้ดตัวอย่างของเครื่องมือไฮไลต์ด้วยมือ โดยใช้แค่เว็บเบราว์เซอร์

ตั้งค่า

ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ สำหรับใช้ Handmarker โดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับ การตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์เว็บและ JavaScript รวมถึง โปรดดูข้อกำหนดเวอร์ชันของแพลตฟอร์ม คู่มือการตั้งค่าสำหรับเว็บ

แพ็กเกจ JavaScript

โค้ดเครื่องมือจุดสังเกตแบบมือพร้อมใช้งานผ่าน MediaPipe @mediapipe/tasks-vision แพ็กเกจ NPM คุณสามารถ ให้ค้นหาและดาวน์โหลดไลบรารีเหล่านี้โดยทำตามวิธีการในแพลตฟอร์ม คู่มือการตั้งค่า

คุณสามารถติดตั้งแพ็กเกจที่จำเป็นผ่าน NPM โดยใช้คำสั่งต่อไปนี้

npm install @mediapipe/tasks-vision

หากต้องการนำเข้ารหัสงานผ่านเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ใน <head> ในไฟล์ 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>

รุ่น

งานเครื่องมือจุดสังเกตแบบมือของ MediaPipe ต้องการโมเดลที่ผ่านการฝึก ซึ่งสามารถใช้ร่วมกับ งาน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกสำหรับเครื่องมือจุดสังเกตของมือ โปรดดูที่ ภาพรวมงานส่วนโมเดล

เลือกและดาวน์โหลดโมเดล แล้วเก็บไว้ในไดเรกทอรีโปรเจ็กต์ของคุณ:

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

สร้างงาน

ใช้ฟังก์ชันของเครื่องมือจุดสังเกต createFrom...() เพื่อ เตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ createFromModelPath() ที่มีเส้นทางแบบสัมพัทธ์หรือสัมบูรณ์ไปยังไฟล์โมเดลที่ฝึก หากโมเดลโหลดลงในหน่วยความจำแล้ว คุณสามารถใช้ createFromModelBuffer() วิธี

ตัวอย่างโค้ดด้านล่างสาธิตการใช้ฟังก์ชัน createFromOptions() เพื่อ ตั้งค่างาน ฟังก์ชัน createFromOptions จะช่วยให้คุณสามารถกำหนดค่า เครื่องมือไฮไลต์ด้วยมือพร้อมตัวเลือกการกำหนดค่า ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า โปรดดูตัวเลือกที่หัวข้อตัวเลือกการกำหนดค่า

โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานด้วย ตัวเลือก:

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
    });

ตัวเลือกการกำหนดค่า

งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บและ JavaScript แอปพลิเคชัน:

ชื่อตัวเลือก คำอธิบาย ช่วงค่า ค่าเริ่มต้น
runningMode ตั้งค่าโหมดการทำงานสำหรับงาน มี 2 แบบ โหมด:

รูปภาพ: โหมดสำหรับอินพุตรูปภาพเดียว

วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของ วิดีโอหรือสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง		 {IMAGE, VIDEO} IMAGE
numHands จำนวนมือสูงสุดที่ตัวตรวจจับจุดสังเกตของมือตรวจพบ Any integer > 0 1
minHandDetectionConfidence คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับมือ โมเดลการตรวจจับฝ่ามือประสบความสำเร็จ 0.0 - 1.0 0.5
minHandPresenceConfidence คะแนนความเชื่อมั่นขั้นต่ำสำหรับคะแนนการตรวจหาบุคคลในมือ โมเดลการตรวจจับจุดสังเกต ในโหมดวิดีโอและโหมดสตรีมแบบสด หากคะแนนความเชื่อมั่นของมือจากโมเดลจุดสังเกตของมืออยู่ต่ำกว่า เครื่องมือจุดสังเกตของมือจะทริกเกอร์โมเดลการตรวจจับฝ่ามือ มิเช่นนั้น อัลกอริทึมการติดตามมือที่มีน้ำหนักเบา จะระบุตำแหน่งของ สำหรับการตรวจหาจุดสังเกตในภายหลัง 0.0 - 1.0 0.5
minTrackingConfidence คะแนนความเชื่อมั่นขั้นต่ำสำหรับการติดตามมือที่จะพิจารณา สำเร็จ นี่คือเกณฑ์ IoU ของกรอบล้อมรอบระหว่างมือใน เฟรมปัจจุบันกับเฟรมสุดท้าย ในโหมดวิดีโอและโหมดสตรีมของ เครื่องมือแลนด์มาร์กด้วยมือ หากการติดตามล้มเหลว เครื่องมือจุดสังเกตของมือจะเรียกใช้มือ การตรวจจับ ไม่เช่นนั้นระบบจะข้ามการตรวจจับมือ 0.0 - 1.0 0.5

เตรียมข้อมูล

เครื่องมือไฮไลต์ด้วยมือสามารถตรวจจับจุดสังเกตของมือในรูปภาพในรูปแบบใดก็ได้ที่ เบราว์เซอร์โฮสต์ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้าด้วย ซึ่งรวมถึง การปรับขนาด การหมุนเวียน และการปรับค่าให้เป็นมาตรฐาน วิธีตรวจหาจุดสังเกตของมือในวิดีโอ คุณสามารถใช้ API เพื่อประมวลผลทีละเฟรมอย่างรวดเร็ว โดยใช้การประทับเวลา ของเฟรมเพื่อกำหนดว่าจะให้จุดสังเกตของมือปรากฏขึ้นภายในวิดีโอเมื่อใด

เรียกใช้งาน

เครื่องมือไฮไลต์รูปมือใช้ detect() (พร้อมโหมดการวิ่ง image) และ detectForVideo() (โดยมี video ในโหมดทำงาน) เมธอดเพื่อทริกเกอร์ การอนุมาน งานนี้จะประมวลผลข้อมูล พยายามตรวจหาจุดสังเกตของมือ และ จากนั้นรายงานผลลัพธ์

การเรียกเครื่องมือจุดสังเกต detect() และจะเรียกใช้ detectForVideo() เมธอด พร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากตรวจหาจุดสังเกตของมือ ในเฟรมวิดีโอจากกล้องของอุปกรณ์ การตรวจหาแต่ละครั้งจะบล็อก ชุดข้อความ คุณสามารถป้องกันปัญหานี้ได้โดยให้ผู้ปฏิบัติงานบนเว็บเรียกใช้ detect() และ detectForVideo() เมธอดในชุดข้อความอื่น

โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน

รูปภาพ

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

วิดีโอ

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();
  });
}

สำหรับการปรับใช้งานเครื่องมือจุดสังเกตแบบมือที่สมบูรณ์ยิ่งขึ้น โปรดดูที่ ตัวอย่างโค้ด

จัดการและแสดงผลลัพธ์

เครื่องมือไฮไลต์ด้วยมือจะสร้างออบเจ็กต์ผลลัพธ์ที่เป็นจุดสังเกตสำหรับมือสำหรับการตรวจหาแต่ละครั้ง วิ่งได้ วัตถุผลลัพธ์มีจุดสังเกตของมือในพิกัดรูปภาพ มือ จุดสังเกตในพิกัดโลกและความถนัดของมือ(ซ้าย/ขวา) ของที่ตรวจพบ มือ

ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้

เอาต์พุต HandLandmarkerResult มี 3 คอมโพเนนต์ คอมโพเนนต์แต่ละรายการคืออาร์เรย์ โดยที่องค์ประกอบแต่ละรายการจะมีผลลัพธ์ต่อไปนี้สำหรับมือข้างเดียวที่ตรวจพบ

  • ความถนัดของมือ

    ความถนัดของมือแสดงให้เห็นว่ามือที่ตรวจพบเป็นมือซ้ายหรือมือขวา

  • จุดสังเกต

    มีจุดสังเกต 21 จุด แต่ละรายการประกอบด้วยพิกัด x, y และ z พิกัด x และ y จะได้รับการปรับให้เป็น [0.0, 1.0] ตามความกว้างของภาพและ ตามลำดับ พิกัด z แสดงความลึกของจุดสังเกต โดยมี ความลึกที่ข้อมือซึ่งเป็นจุดเริ่มต้น ยิ่งค่าน้อยเท่าไหร่ ก็ยิ่งใกล้ ที่สำคัญคือกล้อง ขนาดของ z ใช้มาตราส่วนใกล้เคียงกับ x

  • สถานที่สำคัญของโลก

    นอกจากนี้ สัญลักษณ์มือ 21 ข้างยังแสดงเป็นพิกัดของโลกด้วย จุดสังเกตแต่ละแห่ง ประกอบด้วย x, y และ z ซึ่งจะแสดงพิกัด 3 มิติตามจริงใน เมตรที่มีจุดกำเนิดอยู่ที่จุดศูนย์กลางเรขาคณิตของมือ

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)

รูปภาพต่อไปนี้แสดงการแสดงภาพเอาต์พุตของงาน

โค้ดตัวอย่างของเครื่องมือไฮไลต์ด้วยมือสาธิตวิธีการแสดง ผลลัพธ์ที่ส่งคืนจากงาน โปรดดู ตัวอย่างโค้ด