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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

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

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

สร้างงาน

ใช้ฟังก์ชัน Poseจุดสังเกต 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: โหมดสำหรับการป้อนข้อมูลรูปภาพเดียว

วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของวิดีโอหรือในสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง
{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 Poseจุดสังเกตแสดงมาสก์การแบ่งกลุ่มสำหรับท่าทางที่ตรวจพบหรือไม่ Boolean False

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

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

เรียกใช้งาน

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

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

ดูตัวอย่างโค้ดเพื่อติดตั้งใช้งานงาน Pose Marker ที่สมบูรณ์ยิ่งขึ้น

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

Pose Landinger จะแสดงผลออบเจ็กต์ 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: แนวโน้มที่จุดสังเกตจะปรากฏให้เห็นภายในรูปภาพ

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

มาสก์การแบ่งกลุ่ม (ไม่บังคับ) แสดงถึงความเป็นไปได้ที่พิกเซลแต่ละพิกเซลจะเป็นของบุคคลที่ตรวจพบ รูปภาพต่อไปนี้คือมาสก์การแบ่งกลุ่มของเอาต์พุตงาน

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