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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ด Hand Marker พร้อมให้ใช้งานผ่านแพ็กเกจ 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 Hand Marker ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกแล้วสำหรับ Handจุดสังเกตได้ที่ภาพรวมงานส่วนโมเดล

เลือกและดาวน์โหลดโมเดล แล้วจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์ โดยทำดังนี้

<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: โหมดสำหรับการป้อนข้อมูลรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของวิดีโอหรือในสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง	{`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) เพื่อทริกเกอร์การอนุมาน งานจะประมวลผลข้อมูล พยายามตรวจหาจุดสังเกตของมือ จากนั้นรายงานผลลัพธ์

การเรียกเมธอด Handจุดสังเกต detect() และ detectForVideo() จะทำงานแบบซิงโครนัสและบล็อกเทรดอินเทอร์เฟซผู้ใช้ หากคุณตรวจหาจุดสังเกตของมือในเฟรมวิดีโอจากกล้องของอุปกรณ์ การตรวจจับแต่ละรายการจะบล็อกเทรดหลัก คุณป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้เมธอด 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();
  });
}

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

แฮนเดิลและแสดงผลลัพธ์

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

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

เอาต์พุต 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)

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

โค้ดตัวอย่าง Hand Marker จะแสดงวิธีแสดงผลลัพธ์ ที่ได้จากงาน ดูตัวอย่างโค้ด