งานโปรแกรมรู้จำท่าทางสัมผัส MediaPipe ช่วยให้คุณจำท่าทางสัมผัสของมือได้แบบเรียลไทม์ และ ให้ผลลัพธ์การใช้มือที่จดจำได้ และจุดสังเกตของมือ มือที่ตรวจพบ วิธีการเหล่านี้จะแสดงวิธีใช้การรู้จำท่าทางสัมผัส สำหรับเว็บและแอป JavaScript
คุณสามารถดูการทำงานนี้โดยดูที่ การสาธิต สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่า ของงานนี้ โปรดดูภาพรวม
ตัวอย่างโค้ด
โค้ดตัวอย่างสำหรับการจดจำท่าทางสัมผัสเป็นการใช้งานที่สมบูรณ์ ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และรับ เริ่มจากการสร้างแอป การจดจำท่าทางสัมผัสขึ้นมาเอง คุณสามารถดู เรียกใช้ และ แก้ไขโค้ดตัวอย่างโปรแกรมจดจำท่าทางสัมผัส โดยใช้แค่เว็บเบราว์เซอร์
ตั้งค่า
ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ เพื่อใช้การจดจำท่าทางสัมผัสโดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับ การตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์เว็บและ JavaScript รวมถึง โปรดดูข้อกำหนดเวอร์ชันของแพลตฟอร์ม คู่มือการตั้งค่าสำหรับเว็บ
แพ็กเกจ JavaScript
รหัสโปรแกรมจดจำท่าทางสัมผัสมีให้บริการผ่าน 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 ต้องใช้โมเดลที่ผ่านการฝึกซึ่งสามารถทำงานร่วมกับ งาน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกที่พร้อมใช้งานสำหรับการจดจำท่าทางสัมผัส โปรดดูที่ ภาพรวมงานส่วนโมเดล
เลือกและดาวน์โหลดโมเดล จากนั้นเก็บโมเดลไว้ในไดเรกทอรีโปรเจ็กต์ของคุณ:
<dev-project-root>/app/shared/models/
สร้างงาน
ใช้ฟังก์ชันโปรแกรมรู้จำท่าทางสัมผัส createFrom...() อย่างใดอย่างหนึ่งเพื่อ
เตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ createFromModelPath()
ที่มีเส้นทางแบบสัมพัทธ์หรือสัมบูรณ์ไปยังไฟล์โมเดลที่ฝึก
หากโมเดลโหลดลงในหน่วยความจำแล้ว คุณสามารถใช้
createFromModelBuffer() วิธี
ตัวอย่างโค้ดด้านล่างสาธิตการใช้ฟังก์ชัน createFromOptions() เพื่อ
ตั้งค่างาน ฟังก์ชัน createFromOptions จะช่วยให้คุณสามารถกำหนดค่า
โปรแกรมจดจำท่าทางสัมผัสพร้อมตัวเลือกการกำหนดค่า ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า
โปรดดูตัวเลือกที่หัวข้อตัวเลือกการกำหนดค่า
โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานด้วย ตัวเลือก:
// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
},
numHands: 2
});
ตัวเลือกการกำหนดค่า
งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บแอปพลิเคชัน
| ชื่อตัวเลือก | คำอธิบาย | ช่วงค่า | ค่าเริ่มต้น |
|---|---|---|---|
runningMode |
ตั้งค่าโหมดการทำงานสำหรับงาน มี 2 แบบ
โหมด: รูปภาพ: โหมดสำหรับอินพุตรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของ วิดีโอหรือสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง |
{IMAGE, VIDEO} |
IMAGE |
num_hands |
จำนวนมือสูงสุดที่ตรวจจับได้ด้วย
GestureRecognizer
|
Any integer > 0 |
1 |
min_hand_detection_confidence |
คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับมือ โมเดลการตรวจจับฝ่ามือประสบความสำเร็จ | 0.0 - 1.0 |
0.5 |
min_hand_presence_confidence |
คะแนนความเชื่อมั่นขั้นต่ำสำหรับคะแนนการตรวจหาบุคคลในมือ โมเดลการตรวจจับจุดสังเกต ในโหมดวิดีโอและโหมดสตรีมแบบสดของโปรแกรมจดจำท่าทางสัมผัส หากคะแนนความเชื่อมั่นขณะแสดงด้วยมือจากรูปของมือ โมเดลจุดสังเกต อยู่ด้านล่าง เกณฑ์นี้จะทริกเกอร์โมเดลการตรวจจับฝ่ามือ มิเช่นนั้น อัลกอริทึมการติดตามมือน้ำหนักเบาใช้เพื่อระบุตำแหน่ง สำหรับการตรวจหาจุดสังเกตในภายหลัง | 0.0 - 1.0 |
0.5 |
min_tracking_confidence |
คะแนนความเชื่อมั่นขั้นต่ำสำหรับการติดตามมือที่จะพิจารณา สำเร็จ นี่คือเกณฑ์ IoU ของกรอบล้อมรอบระหว่างมือใน เฟรมปัจจุบันกับเฟรมสุดท้าย ในโหมดวิดีโอและโหมดสตรีมของ โปรแกรมจดจำท่าทางสัมผัส หากการติดตามล้มเหลว โปรแกรมจดจำท่าทางสัมผัสจะเรียกใช้มือ การตรวจจับ ไม่เช่นนั้นระบบจะข้ามการตรวจจับมือ | 0.0 - 1.0 |
0.5 |
canned_gestures_classifier_options |
ตัวเลือกสำหรับการกำหนดค่าลักษณะการทำงานของตัวแยกประเภทด้วยท่าทางสัมผัสสำเร็จรูป ท่าทางสัมผัสสำเร็จรูปคือ ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"] |
|
|
custom_gestures_classifier_options |
ตัวเลือกสำหรับการกำหนดค่าลักษณะการทำงานของตัวแยกประเภทด้วยท่าทางสัมผัสที่กำหนดเอง |
|
|
เตรียมข้อมูล
โปรแกรมจดจำท่าทางสัมผัสสามารถจดจำท่าทางสัมผัสในรูปภาพในรูปแบบใดก็ได้ที่ระบบรองรับ เบราว์เซอร์โฮสต์ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้าด้วย ซึ่งรวมถึง การปรับขนาด การหมุนเวียน และการปรับค่าให้เป็นมาตรฐาน หากต้องการจดจำท่าทางสัมผัสในวิดีโอ คุณต้องทำดังนี้ สามารถใช้ API เพื่อประมวลผลทีละเฟรมอย่างรวดเร็ว โดยใช้การประทับเวลาของ เพื่อกำหนดเวลาที่มีท่าทางสัมผัสภายในวิดีโอ
เรียกใช้งาน
โปรแกรมจดจำท่าทางสัมผัสใช้ recognize() (ในโหมดการวิ่ง 'image') และ
recognizeForVideo() (โดยมีโหมดทำงาน 'video') เมธอดเพื่อทริกเกอร์
การอนุมาน งานจะประมวลผลข้อมูล พยายามจดจำมือ
จากนั้นจะรายงานผลลัพธ์
โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน
รูปภาพ
const image = document.getElementById("image") as HTMLImageElement; const gestureRecognitionResult = gestureRecognizer.recognize(image);
วิดีโอ
await gestureRecognizer.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video); processResult(gestureRecognitionResult); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
การเรียกเมธอดโปรแกรมจดจำท่าทางสัมผัส recognize() และ recognizeForVideo() จะทำงาน
พร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากคุณจำท่าทางสัมผัสได้ใน
กล้องของอุปกรณ์ การจดจำแต่ละครั้งจะบล็อก
ชุดข้อความ คุณสามารถป้องกันปัญหานี้ได้โดยให้ผู้ปฏิบัติงานบนเว็บเรียกใช้
recognize() และ recognizeForVideo() เมธอดในชุดข้อความอื่น
สำหรับการใช้งานการรู้จำท่าทางสัมผัสที่สมบูรณ์ยิ่งขึ้น โปรดดูที่ ตัวอย่างโค้ด
จัดการและแสดงผลลัพธ์
ตัวจดจำท่าทางสัมผัสจะสร้างออบเจ็กต์ผลลัพธ์การตรวจจับท่าทางสัมผัสสำหรับแต่ละ การจดจำเสียง ออบเจ็กต์ผลลัพธ์มีจุดสังเกตของมือในพิกัดรูปภาพ จุดสังเกตในพิกัดโลก มือ(ซ้าย/ขวา) และมือ หมวดหมู่ท่าทางสัมผัสของมือที่ตรวจพบ
ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
GestureRecognizerResult ที่ได้จะมีคอมโพเนนต์ 4 รายการ และคอมโพเนนต์แต่ละรายการเป็นอาร์เรย์ โดยที่แต่ละองค์ประกอบจะให้ผลลัพธ์ที่ตรวจพบจากมือเดียวที่ตรวจพบ
ความถนัดของมือ
ความถนัดของมือแสดงให้เห็นว่ามือที่ตรวจพบเป็นมือซ้ายหรือมือขวา
ท่าทางสัมผัส
หมวดหมู่ท่าทางสัมผัสที่รู้จักของมือที่ตรวจพบ
จุดสังเกต
มีจุดสังเกต 21 จุด แต่ละรายการประกอบด้วยพิกัด
x,yและzพิกัดxและyจะได้รับการปรับให้เป็น [0.0, 1.0] ตามความกว้างของภาพและ ตามลำดับ พิกัดzแสดงความลึกของจุดสังเกต โดยมี ความลึกที่ข้อมือซึ่งเป็นจุดเริ่มต้น ยิ่งค่าน้อยเท่าไหร่ ก็ยิ่งใกล้ ที่สำคัญคือกล้อง ขนาดของzใช้มาตราส่วนใกล้เคียงกับxสถานที่สำคัญของโลก
นอกจากนี้ สัญลักษณ์มือ 21 ข้างยังแสดงเป็นพิกัดของโลกด้วย จุดสังเกตแต่ละแห่ง ประกอบด้วย
x,yและzซึ่งจะแสดงพิกัด 3 มิติตามจริงใน เมตรที่มีจุดกำเนิดอยู่ที่จุดศูนย์กลางเรขาคณิตของมือ
GestureRecognizerResult:
Handedness:
Categories #0:
index : 0
score : 0.98396
categoryName : Left
Gestures:
Categories #0:
score : 0.76893
categoryName : Thumb_Up
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)
รูปภาพต่อไปนี้แสดงการแสดงภาพเอาต์พุตของงาน
สำหรับการใช้งานการสร้างงานการจดจำท่าทางสัมผัสที่สมบูรณ์ยิ่งขึ้น โปรดดูที่ ตัวอย่างโค้ด