งาน 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 จะแสดงวิธีแสดงผลลัพธ์ ที่ได้จากงาน ดูตัวอย่างโค้ด