คู่มือการตรวจจับใบหน้าสำหรับเว็บ

งาน MediaPipe Face Detector ช่วยให้คุณตรวจจับใบหน้าในรูปภาพหรือวิดีโอได้ คุณสามารถใช้งานนี้เพื่อค้นหาใบหน้าและฟีเจอร์ใบหน้าภายในเฟรมได้ งานนี้ใช้โมเดลแมชชีนเลิร์นนิง (ML) ที่ทำงานร่วมกับรูปภาพเดียวหรือสตรีมรูปภาพแบบต่อเนื่อง งานจะแสดงตำแหน่งใบหน้า ตลอดจนประเด็นสำคัญบนใบหน้า ได้แก่ ตาซ้าย ตาขวา ปลายจมูก ปาก ตาข้างซ้าย และแผลที่ตาขวา

วิธีการเหล่านี้จะแสดงวิธีใช้ตัวตรวจจับใบหน้าสำหรับเว็บและแอป 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 Face Detector ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกที่พร้อมใช้งานสำหรับตัวตรวจจับใบหน้าได้ในภาพรวมงานส่วนโมเดล

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

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

สร้างงาน

ใช้ฟังก์ชันใดฟังก์ชันหนึ่งของตัวตรวจจับใบหน้า createFrom...() เพื่อเตรียมงานสำหรับการอนุมาน ใช้ฟังก์ชัน createFromModelPath() ที่มีเส้นทางแบบสัมพัทธ์หรือสัมบูรณ์ไปยังไฟล์โมเดลที่ฝึกแล้ว หากโหลดโมเดลลงในหน่วยความจำแล้ว คุณจะใช้เมธอด createFromModelBuffer() ได้

ตัวอย่างโค้ดด้านล่างสาธิตการใช้ฟังก์ชัน createFromOptions() เพื่อตั้งค่างาน ฟังก์ชัน createFromOptions ให้คุณปรับแต่งอุปกรณ์ตรวจจับใบหน้าด้วยตัวเลือกการกำหนดค่า ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ตัวเลือกการกำหนดค่า

โค้ดต่อไปนี้แสดงวิธีการสร้างและกำหนดค่างานด้วยตัวเลือกที่กำหนดเอง

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

ตัวเลือกการกำหนดค่า

งานมีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับแอปพลิเคชันบนเว็บและ JavaScript

ชื่อตัวเลือก	คำอธิบาย	ช่วงของค่า	ค่าเริ่มต้น
`option_var_1_web_js`	ตั้งค่าโหมดการทำงาน มี 2 โหมดดังนี้ IMAGE: โหมดสำหรับการป้อนข้อมูลรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของวิดีโอหรือในสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง	{`IMAGE, VIDEO`}	`IMAGE`
`minDetectionConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับใบหน้าจะถือว่าสำเร็จ	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	เกณฑ์การยับยั้งสูงสุดที่ไม่ใช่ระดับต่ำสุดสำหรับการตรวจจับใบหน้าจะถือว่าทับซ้อนกัน	`Float [0,1]`	`0.3`

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

ตัวตรวจจับใบหน้าสามารถตรวจจับใบหน้าในรูปภาพในรูปแบบใดก็ได้ที่เบราว์เซอร์โฮสต์รองรับ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้า ซึ่งรวมถึงการปรับขนาด การหมุน และการปรับค่าให้เป็นมาตรฐานด้วย ในการตรวจจับใบหน้าในวิดีโอ คุณสามารถใช้ API เพื่อประมวลผล 1 เฟรมต่อครั้งอย่างรวดเร็ว โดยใช้การประทับเวลาของเฟรมเพื่อระบุว่ามีใบหน้าเกิดขึ้นภายในวิดีโอเมื่อใด

เรียกใช้งาน

เครื่องตรวจจับใบหน้าใช้วิธีการ detect() (ในโหมดทำงาน image) และ detectForVideo() (ในโหมดทำงาน video) เพื่อทริกเกอร์การอนุมาน งานนี้จะประมวลผลข้อมูล พยายามตรวจจับใบหน้า แล้วรายงานผลลัพธ์

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

โค้ดต่อไปนี้แสดงวิธีเรียกใช้การประมวลผลด้วยโมเดลงาน

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

วิดีโอ

await faceDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = faceDetector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

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

แฮนเดิลและแสดงผลลัพธ์

ตัวตรวจจับใบหน้าจะสร้างวัตถุผลลัพธ์ของตัวตรวจจับใบหน้าสำหรับการตรวจจับแต่ละครั้ง วัตถุที่เป็นผลลัพธ์มีใบหน้าในพิกัดรูปภาพ และใบหน้าในพิกัดของโลก

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

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

สำหรับรูปภาพที่ไม่มีกรอบล้อมรอบ โปรดดูรูปภาพต้นฉบับ

โค้ดตัวอย่างของเครื่องตรวจจับใบหน้าจะแสดงวิธีแสดงผลลัพธ์ ที่ได้จากงาน ดูตัวอย่างโค้ด