ขอแนะนํา Google AI Edge Portal: เปรียบเทียบประสิทธิภาพ AI บนอุปกรณ์ขอบในวงกว้าง ลงชื่อสมัครใช้เพื่อขอสิทธิ์เข้าถึงในช่วงเวอร์ชันตัวอย่างก่อนเปิดตัว

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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

คุณติดตั้งแพ็กเกจที่จำเป็นผ่าน 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.mjs"
    crossorigin="anonymous"></script>
</head>

รุ่น

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

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

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

สร้างงาน

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

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

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

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`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับคะแนนการมีอยู่ของมือในโมเดลการตรวจจับ จุดสังเกตของมือ ในโหมดวิดีโอและโหมดไลฟ์สด หากคะแนนความเชื่อมั่นในการตรวจจับมือจากโมเดลแลนด์มาร์กของมือต่ำกว่า เกณฑ์นี้ Hand Landmarker จะทริกเกอร์โมเดลการตรวจจับฝ่ามือ ไม่เช่นนั้น อัลกอริทึมการติดตามการเคลื่อนไหวของมือแบบเบาจะกำหนดตำแหน่งของมือสำหรับการตรวจจับจุดสังเกตในภายหลัง	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการพิจารณาว่าการติดตามการเคลื่อนไหวของมือ ประสบความสำเร็จ นี่คือเกณฑ์ IOU ของกรอบล้อมรอบระหว่างมือในเฟรมปัจจุบันและเฟรมสุดท้าย ในโหมดวิดีโอและโหมดสตรีมของ Hand Landmarker หากการติดตามล้มเหลว Hand Landmarker จะทริกเกอร์การตรวจจับมือ ไม่เช่นนั้นระบบจะข้ามการตรวจจับมือ	`0.0 - 1.0`	`0.5`

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

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

เรียกใช้งาน

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

การเรียกใช้เมธอด Hand Landmarker 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();
  });
}

ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นในการเรียกใช้ Task Hand Landmarker ได้ที่ตัวอย่าง

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

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

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

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

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

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

โดยมีจุดสังเกตมือ 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 Landmarker แสดงวิธีแสดง ผลลัพธ์ที่ได้จากงาน โปรดดูตัวอย่าง