המשימה 'מזהה תנועות של MediaPipe' מאפשרת לזהות תנועות ידיים בזמן אמת, ולהציג את התוצאות של תנועות היד שזוהו ואת ציוני הדרך של הידיים שזוהו. בהוראות האלה מוסבר איך להשתמש בכלי לזיהוי תנועות באפליקציות לאינטרנט וב-JavaScript.
תוכלו לראות את המשימה הזו בהדגמה. למידע נוסף על היכולות, המודלים ואפשרויות ההגדרה של המשימה הזו, קראו את הסקירה הכללית.
קוד לדוגמה
הקוד לדוגמה לזיהוי תנועות מספק הטמעה מלאה של המשימה הזו ב-JavaScript, לעיונך. הקוד הזה עוזר לכם לבדוק את המשימה הזו ולהתחיל ליצור אפליקציה משלכם לזיהוי תנועות. תוכלו להציג, להריץ ולערוך את הקוד לדוגמה של מזהה התנועות באמצעות דפדפן האינטרנט בלבד.
הגדרה
בקטע הזה מתוארים השלבים העיקריים להגדרה של סביבת הפיתוח באופן ספציפי לשימוש בזיהוי תנועות. למידע כללי על הגדרת סביבת הפיתוח של האתר ושל JavaScript, כולל הדרישות לגרסת הפלטפורמה, קראו את מדריך ההגדרה לאתרים.
חבילות JavaScript
הקוד לזיהוי תנועות זמין דרך חבילת @mediapipe/tasks-vision
NPM MediaPipe. אפשר למצוא ולהוריד את הספריות האלה לפי ההוראות במדריך ההגדרה של הפלטפורמה.
אתם יכולים להתקין את החבילות הנדרשות דרך 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 |
מגדיר את מצב הריצה של המשימה. יש שני
מצבים: 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 כדי לזהות תנועות בסרטונים כדי לעבד במהירות פריים אחד בכל פעם, לפי חותמת הזמן של הפריים, ולקבוע מתי התנועות מתקיימות בסרטון.
מריצים את המשימה.
מזהה התנועות משתמש בשיטות 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()
פועלות באופן סינכרוני וחוסמות את השרשור של ממשק המשתמש. אם מזהים תנועות
בפריימים של סרטונים מהמצלמה של המכשיר, כל זיהוי יחסום את
ה-thread הראשי. כדי למנוע זאת, אפשר להטמיע עובדי אינטרנט כדי להריץ את השיטות recognize()
ו-recognizeForVideo()
ב-thread אחר.
להטמעה מלאה יותר של הרצת משימה של מזהה תנועות, ראו את דוגמת הקוד.
טיפול בתוצאות והצגתן
מזהה התנועות יוצר אובייקט תוצאה של זיהוי תנועה בכל הרצה של זיהוי. אובייקט התוצאה מכיל ציוני דרך של ידיים בקואורדינטות של תמונות, ציוני דרך שמזוהים עם קואורדינטות בעולם, קטגוריות של היד הדומיננטית(ידי שמאל/ימין) וקטגוריות של תנועות ידיים של הידיים שזוהו.
דוגמה לנתוני הפלט מהמשימה הזאת:
ה-GestureRecognizerResult
שהתקבל מכיל ארבעה רכיבים, וכל רכיב הוא מערך, שבו כל רכיב מכיל את התוצאה שזוהתה של יד אחת שזוהתה.
התאמה ליד הדומיננטית
היד הדומיננטית מציינת אם הידיים שזוהו הן ידיים שמאליות או יד ימין.
תנועות
קטגוריות התנועות שזוהו של הידיים שזוהו.
ציוני דרך
יש 21 ציוני דרך לידיים, כל אחד מהם מורכב מקואורדינטות
x
,y
ו-z
. הקואורדינטותx
ו-y
מנורמלות ל-[0.0, 1.0] לפי הרוחב והגובה של התמונה, בהתאמה. הקואורדינטהz
מייצגת את העומק של ציון הדרך, והעומק בפרק כף היד הוא המקור. ככל שהערך קטן יותר, כך היעד קרוב יותר למצלמה. העוצמה שלz
משתמשת בקנה מידה זהה לזה שלx
.אתרים חשובים בעולם
גם ציוני הדרך עם 21 היד מוצגים בקואורדינטות בעולם. כל ציון דרך מורכב מ-
x
, מ-y
ומ-z
, ומייצגים קואורדינטות תלת-ממדיות בעולם האמיתי, במטרים, שהמקור שלהן נמצא במרכז הגאומטרי של כף היד.
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)
בתמונות הבאות אפשר לראות המחשה של פלט המשימה:
להטמעה מלאה יותר של יצירת משימה של מזהה תנועות, ראו את דוגמת הקוד.