מדריך לזיהוי תנועות לאינטרנט

המשימה של MediaPipe לזיהוי תנועות מאפשרת לכם לזהות תנועות ידיים בזמן אמת. מספק את התוצאות המוכרות של תנועות היד ואת ציוני הדרך של ידיים שזוהו. בהוראות הבאות מוסבר איך להשתמש בכלי לזיהוי תנועות לאפליקציות אינטרנט ו-JavaScript.

אפשר לראות את המשימה הזו בפעולה: demo. מידע נוסף על היכולות, המודלים ואפשרויות ההגדרה במשימה הזאת, ראו סקירה כללית.

קוד לדוגמה

הקוד לדוגמה של מזהה התנועות מאפשר הטמעה מלאה של ב-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 מגדיר את מצב הריצה של המשימה. יש שתי פלטפורמות מצבים:

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"]
  • הלוקאל של השמות לתצוגה: הלוקאל שבו צריך להשתמש לשמות לתצוגה שצוינו באמצעות המטא-נתונים של המודלים של TFLite, אם יש כאלה.
  • 'מקסימום תוצאות': המספר המקסימלי של תוצאות הסיווג עם הדירוג הגבוה ביותר שיחזרו. אם < 0, כל התוצאות הזמינות יוחזרו.
  • סף ניקוד: הציון שמתחתיו התוצאות נדחו. אם הוא מוגדר ל-0, יוחזרו כל התוצאות הזמינות.
  • רשימת היתרים של קטגוריות: רשימת ההיתרים של שמות הקטגוריות. אם התוכן לא ריק, לא יתבצע סינון של תוצאות הסיווג שהקטגוריה לא נמצאת בהן בקבוצה הזו. בלעדי באופן הדדי לרשימת הישויות שנחסמו.
  • רשימת קטגוריות שנחסמו: רשימת הישויות שנחסמו. אם השדה לא ריק, תוצאות הסיווג שהקטגוריה שלהן נמצאת בקבוצה הזו יסוננו. בלעדי באופן הדדי עם רשימת היתרים.
    		•
    • הלוקאל של השמות המוצגים: any string
    • מקסימום תוצאות: any integer
    • סף הניקוד: 0.0-1.0
    • רשימת היתרים של קטגוריות: vector of strings
    • רשימת קטגוריות שנחסמו: vector of strings
    • הלוקאל של השמות המוצגים: "en"
    • מקסימום תוצאות: -1
    • סף הניקוד: 0
    • רשימת היתרים של קטגוריות: ריקה
    • רשימת הישויות שנחסמו: ריקה
    custom_gestures_classifier_options אפשרויות להגדרת ההתנהגות של מסווג תנועות בהתאמה אישית.
  • הלוקאל של השמות לתצוגה: הלוקאל שבו צריך להשתמש לשמות לתצוגה שצוינו באמצעות המטא-נתונים של המודלים של TFLite, אם יש כאלה.
  • 'מקסימום תוצאות': המספר המקסימלי של תוצאות הסיווג עם הדירוג הגבוה ביותר שיחזרו. אם < 0, כל התוצאות הזמינות יוחזרו.
  • סף ניקוד: הציון שמתחתיו התוצאות נדחו. אם הוא מוגדר ל-0, יוחזרו כל התוצאות הזמינות.
  • רשימת היתרים של קטגוריות: רשימת ההיתרים של שמות הקטגוריות. אם התוכן לא ריק, לא יתבצע סינון של תוצאות הסיווג שהקטגוריה לא נמצאת בהן בקבוצה הזו. בלעדי באופן הדדי לרשימת הישויות שנחסמו.
  • רשימת קטגוריות שנחסמו: רשימת הישויות שנחסמו. אם השדה לא ריק, תוצאות הסיווג שהקטגוריה שלהן נמצאת בקבוצה הזו יסוננו. בלעדי באופן הדדי עם רשימת היתרים.
    		•
    • הלוקאל של השמות המוצגים: any string
    • מקסימום תוצאות: any integer
    • סף הניקוד: 0.0-1.0
    • רשימת היתרים של קטגוריות: vector of strings
    • רשימת קטגוריות שנחסמו: vector of strings
    • הלוקאל של השמות המוצגים: "en"
    • מקסימום תוצאות: -1
    • סף הניקוד: 0
    • רשימת היתרים של קטגוריות: ריקה
    • רשימת הישויות שנחסמו: ריקה

    הכנת נתונים

    הכלי לזיהוי התנועות יכול לזהות תנועות בתמונות בכל פורמט שנתמך על ידי הדפדפן המארח. המשימה מטפלת גם בעיבוד מראש של קלט נתונים, כולל שינוי גודל, רוטציה ונירמול ערכים. כדי לזהות תנועות בסרטונים: להשתמש ב-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() שיטות בשרשור אחר.

    להטמעה מלאה יותר של הרצת המשימה של מזהה תנועות, אפשר לעיין ב קוד לדוגמה.

    טיפול בתוצאות והצגתן

    הכלי לזיהוי התנועות יוצר אובייקט של תוצאה של זיהוי תנועה לכל אחד מהם והרצת זיהוי. אובייקט התוצאה מכיל ציוני דרך בכתב בקואורדינטות של תמונה, ציוני דרך בקואורדינטות בעולם, היד הדומיננטית ביד(יד שמאל/ימין) וביד ימין הקטגוריות של המחוות שזוהו.

    בדוגמה הבאה אפשר לראות את נתוני הפלט מהמשימה:

    התוצאה 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)

    בתמונות הבאות אפשר לראות את פלט המשימה:

    להטמעה מלאה יותר של יצירת המשימה של מזהה תנועות, אפשר לעיין ב קוד לדוגמה.