คำแนะนำในการจดจำท่าทางสัมผัสสำหรับเว็บ

งานตัวจดจำท่าทางของมือของ 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.mjs"
    crossorigin="anonymous"></script>
</head>

รุ่น

งานตัวจดจำท่าทางของ MediaPipe ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ฝึกแล้วซึ่งพร้อมใช้งานสำหรับ Gesture Recognizer ได้ที่ส่วนโมเดลในภาพรวมของงาน

เลือกและดาวน์โหลดโมเดล จากนั้นจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์

<dev-project-root>/app/shared/models/

สร้างงาน

ใช้ฟังก์ชันใดฟังก์ชันหนึ่งของ Gesture Recognizer 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 คะแนนความเชื่อมั่นขั้นต่ำของคะแนนการมีอยู่ของมือในโมเดลการตรวจจับ จุดสังเกตของมือ ในโหมดวิดีโอและโหมดไลฟ์สดของ Gesture Recognizer หากคะแนนความน่าเชื่อถือในการตรวจจับมือจากโมเดลแลนด์มาร์กของมือต่ำกว่า เกณฑ์นี้ ระบบจะเรียกใช้โมเดลการตรวจจับฝ่ามือ ไม่เช่นนั้น ระบบจะใช้อัลกอริทึมการติดตามการเคลื่อนไหวของมือแบบเบาเพื่อระบุตำแหน่งของมือสำหรับการตรวจหาจุดสังเกตในภายหลัง 0.0 - 1.0 0.5
min_tracking_confidence คะแนนความเชื่อมั่นขั้นต่ำสำหรับการพิจารณาว่าการติดตามการเคลื่อนไหวของมือ ประสบความสำเร็จ นี่คือเกณฑ์ IOU ของกรอบล้อมรอบระหว่างมือในเฟรมปัจจุบันและเฟรมสุดท้าย ในโหมดวิดีโอและโหมดสตรีมของ Gesture Recognizer หากการติดตามล้มเหลว Gesture Recognizer จะทริกเกอร์การตรวจจับมือ ไม่เช่นนั้น ระบบจะข้ามการตรวจจับมือ 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
    • รายการที่อนุญาตของหมวดหมู่: ว่างเปล่า
    • รายการที่ปฏิเสธของหมวดหมู่: ว่างเปล่า

    เตรียมข้อมูล

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

    การเรียกใช้เมธอด Gesture Recognizer recognize() และ recognizeForVideo() จะทำงานพร้อมกันและบล็อกเธรดอินเทอร์เฟซผู้ใช้ หากคุณจดจำท่าทางใน เฟรมวิดีโอจากกล้องของอุปกรณ์ได้ การจดจำแต่ละครั้งจะบล็อกเธรดหลัก คุณป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้เมธอด recognize() และ recognizeForVideo() ในเธรดอื่น

    ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นของการเรียกใช้โมเดล Gesture Recognizer ได้ที่ ตัวอย่าง

    จัดการและแสดงผลลัพธ์

    Gesture Recognizer จะสร้างออบเจ็กต์ผลการตรวจจับท่าทางสัมผัสสำหรับการเรียกใช้การจดจำแต่ละครั้ง ออบเจ็กต์ผลลัพธ์มีแลนด์มาร์กของมือในพิกัดรูปภาพ แลนด์มาร์กของมือในพิกัดโลก ความถนัดของมือ(ซ้าย/ขวา) และหมวดหมู่ท่าทางของมือที่ตรวจพบ

    ตัวอย่างต่อไปนี้แสดงข้อมูลเอาต์พุตจากงานนี้

    GestureRecognizerResult ที่ได้จะมี 4 คอมโพเนนต์ และแต่ละคอมโพเนนต์เป็นอาร์เรย์ ซึ่งแต่ละองค์ประกอบจะมีผลลัพธ์ที่ตรวจพบของมือที่ตรวจพบ 1 ข้าง

    • ความถนัดของมือ

      Handedness แสดงว่ามือที่ตรวจพบเป็นมือซ้ายหรือมือขวา

    • ท่าทางสัมผัส

      หมวดหมู่ท่าทางสัมผัสที่ระบบจดจำได้ของมือที่ตรวจพบ

    • จุดสังเกต

      โดยมีจุดสังเกตมือ 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)

    รูปภาพต่อไปนี้แสดงภาพเอาต์พุตของงาน

    มือที่ทำท่าทางชูนิ้วโป้งพร้อมโครงกระดูกของมือที่แมปไว้

    ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นในการสร้างงานตัวจดจำท่าทางได้ที่ตัวอย่าง