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