งานเครื่องมือจุดสังเกตของ 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 ใช้สเกลใกล้เคียงกับxvisibility: แนวโน้มที่จุดสังเกตจะปรากฏในรูปภาพ
เอาต์พุตจะมีพิกัดโลกดังต่อไปนี้ (WorldLandmarks)
x,yและz: พิกัด 3 มิติในโลกจริง หน่วยเป็นเมตร จุดกึ่งกลางของสะโพกเป็นจุดกำเนิดvisibility: แนวโน้มที่จุดสังเกตจะปรากฏในรูปภาพ
รูปภาพต่อไปนี้แสดงการแสดงภาพเอาต์พุตของงาน
มาสก์การแบ่งกลุ่มตัวเลือกจะแสดงแนวโน้มของพิกเซลแต่ละพิกเซลที่อยู่ใน แก่บุคคลที่ตรวจจับได้ รูปภาพต่อไปนี้คือมาสก์การแบ่งกลุ่มของ เอาต์พุตของงาน:
โค้ดตัวอย่างเครื่องมือจุดสังเกตของโพสสาธิตวิธีการแสดง ผลลัพธ์ที่ส่งคืนจากงาน โปรดดู ตัวอย่างโค้ด