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

งานโปรแกรมจดจำท่าทางสัมผัสของ 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"]
  • ภาษาของชื่อที่แสดง: ภาษาที่จะใช้สำหรับชื่อที่แสดงที่ระบุผ่านข้อมูลเมตาของโมเดล 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 เพื่อประมวลผล 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)

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

    สำหรับการใช้งานการจดจำท่าทางสัมผัสที่สมบูรณ์มากขึ้น โปรดดูตัวอย่างโค้ด