คำแนะนำในการตรวจจับตำแหน่งจุดสังเกตสำหรับเว็บ

งานเครื่องมือจุดสังเกตของ MediaPipe Pose ช่วยให้คุณตรวจหาจุดสังเกตต่างๆ ของร่างกายมนุษย์ในรูปภาพหรือ ในการสร้างสรรค์วิดีโอ คุณสามารถใช้งานนี้เพื่อระบุตำแหน่งของร่างกายที่สำคัญ วิเคราะห์ท่าทาง และจำแนกการเคลื่อนไหว งานนี้ใช้โมเดลแมชชีนเลิร์นนิง (ML) ที่ ทำงานร่วมกับรูปภาพหรือวิดีโอรายการเดียว งานจะแสดงเนื้อหาลักษณะจุดสังเกตในรูปภาพ และพิกัดโลก 3 มิติ

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

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

npm install @mediapipe/tasks-vision

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

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

รุ่น

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

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

<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 poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

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

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

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

วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของ วิดีโอหรือสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง		 {IMAGE, VIDEO} IMAGE
numPoses จำนวนท่าทางสูงสุดที่ตรวจพบโดย เครื่องมือแนะนำท่าโพส Integer > 0 1
minPoseDetectionConfidence คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับท่าทาง ถือว่าประสบความสำเร็จ Float [0.0,1.0] 0.5
minPosePresenceConfidence คะแนนความเชื่อมั่นขั้นต่ำของการแสดงท่าทาง ในการตรวจหาจุดสังเกตของท่าทาง Float [0.0,1.0] 0.5
minTrackingConfidence คะแนนความเชื่อมั่นขั้นต่ำสำหรับการติดตามท่าทาง จะถือว่าประสบความสำเร็จ Float [0.0,1.0] 0.5
outputSegmentationMasks เครื่องมือจุดสังเกตของท่าทางจะแสดงมาสก์การแบ่งกลุ่มสำหรับที่ตรวจพบหรือไม่ โพสท่า Boolean False

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

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

เรียกใช้งาน

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

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

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

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

วิดีโอ

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

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

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

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

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

เอาต์พุตมีทั้งพิกัดมาตรฐาน (Landmarks) และพิกัดโลก พิกัด (WorldLandmarks) สำหรับแต่ละจุดสังเกต

เอาต์พุตมีพิกัดมาตรฐานต่อไปนี้ (Landmarks):

  • x และ y: พิกัดแลนด์มาร์กที่ปรับให้เป็นมาตรฐานระหว่าง 0.0 ถึง 1.0 ตามค่า ความกว้าง (x) และความสูงของรูปภาพ (y)

  • z: ความลึกที่สำคัญ โดยมีความลึกที่กึ่งกลางของสะโพกเท่ากับ ยิ่งค่าน้อย จุดสังเกตก็ยิ่งอยู่ใกล้กล้อง ขนาด z ใช้สเกลใกล้เคียงกับ x

  • visibility: แนวโน้มที่จุดสังเกตจะปรากฏในรูปภาพ

เอาต์พุตจะมีพิกัดโลกดังต่อไปนี้ (WorldLandmarks)

  • x, y และ z: พิกัด 3 มิติในโลกจริง หน่วยเป็นเมตร จุดกึ่งกลางของสะโพกเป็นจุดกำเนิด

  • visibility: แนวโน้มที่จุดสังเกตจะปรากฏในรูปภาพ

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

มาสก์การแบ่งกลุ่มตัวเลือกจะแสดงแนวโน้มของพิกเซลแต่ละพิกเซลที่อยู่ใน แก่บุคคลที่ตรวจจับได้ รูปภาพต่อไปนี้คือมาสก์การแบ่งกลุ่มของ เอาต์พุตของงาน:

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