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