งานตรวจจับใบหน้าของ MediaPipe ช่วยให้คุณตรวจจับใบหน้าในรูปภาพหรือวิดีโอได้ คุณสามารถใช้ งานนี้เพื่อระบุตำแหน่งใบหน้าและลักษณะใบหน้าภายในเฟรมได้ งานนี้ใช้โมเดล แมชชีนเลิร์นนิง (ML) ที่ทำงานกับรูปภาพเดี่ยวหรือสตรีมรูปภาพ ต่อเนื่อง งานจะแสดงผลตำแหน่งใบหน้าพร้อมกับจุดสำคัญบนใบหน้าต่อไปนี้ ตาซ้าย ตาขวา ปลายจมูก ปาก จุดหน้าหูซ้าย และ จุดหน้าหูขวา
วิธีการเหล่านี้จะแสดงวิธีใช้เครื่องตรวจจับใบหน้าสำหรับเว็บและแอป 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 ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกที่มีให้ใช้งานสำหรับเครื่องตรวจจับใบหน้าได้ที่ส่วนโมเดลในภาพรวมของงาน
เลือกและดาวน์โหลดโมเดล จากนั้นจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์
<dev-project-root>/app/shared/models/
สร้างงาน
ใช้ฟังก์ชันใดฟังก์ชันหนึ่งของเครื่องตรวจจับใบหน้า createFrom...() เพื่อ
เตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ฟังก์ชัน createFromModelPath()
กับเส้นทางสัมพัทธ์หรือเส้นทางสมบูรณ์ไปยังไฟล์โมเดลที่ฝึกแล้ว
หากโหลดโมเดลลงในหน่วยความจำแล้ว คุณจะใช้วิธี createFromModelBuffer() ได้
ตัวอย่างโค้ดด้านล่างแสดงการใช้ฟังก์ชัน createFromOptions() เพื่อ
ตั้งค่างาน ฟังก์ชัน createFromOptions ช่วยให้คุณปรับแต่ง
Face Detector ด้วยตัวเลือกการกำหนดค่าได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ตัวเลือกการกำหนดค่า
โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานด้วยตัวเลือกที่กำหนดเอง
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, VIDEO} |
IMAGE |
minDetectionConfidence |
คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจหาใบหน้าที่ถือว่าสำเร็จ | Float [0,1] |
0.5 |
minSuppressionThreshold |
เกณฑ์การระงับที่ไม่ใช่ค่าสูงสุดขั้นต่ำสำหรับการตรวจหาใบหน้าเพื่อให้ถือว่าซ้อนทับกัน | Float [0,1] |
0.3 |
เตรียมข้อมูล
เครื่องตรวจจับใบหน้าสามารถตรวจจับใบหน้าในรูปภาพได้ทุกรูปแบบที่เบราว์เซอร์โฮสต์รองรับ นอกจากนี้ งานยังจัดการการประมวลผลข้อมูลอินพุตล่วงหน้า ซึ่งรวมถึงการปรับขนาด การหมุน และการปรับค่าให้เป็นมาตรฐานด้วย หากต้องการตรวจจับใบหน้าในวิดีโอ คุณสามารถใช้ API เพื่อประมวลผลเฟรมทีละเฟรมได้อย่างรวดเร็ว โดยใช้การประทับเวลา ของเฟรมเพื่อพิจารณาว่าใบหน้าปรากฏในวิดีโอเมื่อใด
เรียกใช้งาน
เครื่องตรวจจับใบหน้าใช้วิธี detect() (มีโหมดการทำงาน image) และ
detectForVideo() (มีโหมดการทำงาน video) เพื่อทริกเกอร์การอนุมาน โดยงานจะประมวลผลข้อมูล พยายามตรวจหาใบหน้า และ
รายงานผลลัพธ์
การเรียกใช้เมธอด Face Detector 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(); }); }
ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นสำหรับการเรียกใช้ Task ของตัวตรวจจับใบหน้าได้ที่ตัวอย่าง
จัดการและแสดงผลลัพธ์
เครื่องตรวจจับใบหน้าจะสร้างออบเจ็กต์ผลลัพธ์ของเครื่องตรวจจับใบหน้าสำหรับการตรวจจับแต่ละครั้ง ออบเจ็กต์ผลลัพธ์มีใบหน้าในพิกัดรูปภาพและใบหน้าในพิกัดโลก
ตัวอย่างต่อไปนี้แสดงข้อมูลเอาต์พุตจากงานนี้
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)
รูปภาพต่อไปนี้แสดงภาพเอาต์พุตของงาน
สำหรับรูปภาพที่ไม่มีกรอบล้อมรอบ โปรดดูรูปภาพต้นฉบับ
โค้ดตัวอย่างของเครื่องตรวจจับใบหน้าแสดงวิธีแสดง ผลลัพธ์ที่ได้จากงาน โปรดดูตัวอย่าง