Spooky Booth: ตู้ถ่ายรูปฮาโลวีนบนเว็บ จับใบหน้าอัตโนมัติ เล่นฟรีและเอาโค้ดไปใช้ได้

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

ลองเล่นได้เลยที่ tapanapon.com/halloween ส่วนใครอยากเอาไปใส่เว็บไซต์ของตัวเอง หรือพัฒนาต่อ โค้ดทั้งหมดเปิดให้ดาวน์โหลดฟรีที่ GitHub

เล่นยังไง

1. เปิด tapanapon.com/halloween บนมือถือหรือคอมพิวเตอร์
2. กด เปิดกล้อง เพื่อถ่ายเซลฟี่ หรือกด อัพโหลดรูป เพื่อใช้รูปที่มีอยู่ (ลากไฟล์มาวาง หรือวางจากคลิปบอร์ดก็ได้)
3. เลือกฟิลเตอร์จากแผงด้านข้าง ปุ่มของแต่ละฟิลเตอร์จะแสดงตัวอย่างจากหน้าของเราเอง
4. ปรับ ความเข้มของฟิลเตอร์ แล้วเปิด/ปิด ของตกแต่ง ได้ตามใจ มีค้างคาว ใยแมงมุม หมอก ฟักทอง และกรอบ Happy Halloween ที่ใส่วันที่ให้
5. กด ถ่ายรูป (มีตั้งเวลา 3 วินาทีสำหรับถ่ายหมู่) แล้วกด บันทึกรูป หรือ แชร์ ส่งต่อได้ทันทีบนมือถือ

ข้อดีอย่างหนึ่งคือถ่ายแล้วยังเปลี่ยนฟิลเตอร์กับรูปเดิมได้ ไม่ต้องถ่ายใหม่ และถ้าในรูปมีหลายคน ก็ใส่ฟิลเตอร์ให้ได้พร้อมกันสูงสุด 4 ใบหน้า

ฟิลเตอร์ทั้ง 8 แบบ

ทำงานยังไง

หัวใจของระบบคือ MediaPipe Face Landmarker โมเดลตรวจจับใบหน้าของ Google ที่รันใน JavaScript ได้เลย ทุกเฟรมมันจะส่งตำแหน่ง 478 จุดบนใบหน้ากลับมา ทั้งกรอบหน้า ตา ม่านตา จมูก และริมฝีปาก

จากนั้นแต่ละเฟรมจะถูกวาดลง Canvas ตามลำดับนี้

1. วาดภาพจากกล้องหรือรูป ถ้าเป็นกล้องหน้าจะกลับซ้ายขวาให้เหมือนส่องกระจก
2. ปรับโทนสีทั้งภาพ ด้วย blend mode ของ Canvas เช่น saturation ลดสี color ย้อมโทน overlay เพิ่มคอนทราสต์ แล้วปิดท้ายด้วยขอบมืด (vignette)
3. แต่งหน้าและวางพร็อพตามจุดบนใบหน้า เช่น ทาผิวตามกรอบหน้า เปลี่ยนสีม่านตา วางหมวกเหนือหน้าผาก ทุกชิ้นคำนวณจากความกว้างและมุมเอียงของหน้า หันหรือเอียงหัว ของตกแต่งก็หมุนตาม
4. วาดของตกแต่ง ค้างคาว ใยแมงมุม หมอก และกรอบ ทับลงไปด้านบน

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

เทคนิคเล็ก ๆ ที่ใช้ในโปรเจกต์นี้

• ไม่มีไฟล์รูปพร็อพเลยสักไฟล์ หมวก เขา หู ฟักทอง ค้างคาว วาดด้วยโค้ดทั้งหมด จึงคมชัดทุกขนาดและไฟล์เบามาก
• ใช้ blend mode แทน ctx.filter เพื่อให้สีออกมาเหมือนกันทุกเบราว์เซอร์ รวมถึง Safari รุ่นเก่าที่ยังไม่รองรับ ctx.filter
• ขอบเมคอัพนุ่มด้วยเทคนิคเงา วาดรูปทรงไว้นอกจอ แล้วเลื่อนเฉพาะเงาที่เบลอแล้ว (shadowBlur) กลับมาวางบนหน้า ได้ขอบนุ่มที่ใช้ร่วมกับ blend mode ได้
• กันภาพสั่น เฉลี่ยตำแหน่งจุดบนใบหน้ากับเฟรมก่อนหน้าเล็กน้อย ฟิลเตอร์จึงนิ่งขึ้นตอนขยับ

เอาไปใส่เว็บไซต์ของคุณ

โค้ดอยู่ที่ github.com/tapanapon-com/halloween-facedetector ใช้สัญญาอนุญาตแบบ MIT เอาไปใช้ ดัดแปลง หรือใช้ในงานลูกค้าได้ ขอแค่เก็บไฟล์ LICENSE ไว้

โปรเจกต์เป็น HTML, CSS และ JavaScript ล้วน ไม่ต้อง build ไม่ต้องลง Node.js

1. ดาวน์โหลดโค้ด กดปุ่ม Code → Download ZIP บนหน้า GitHub หรือใช้คำสั่ง

git clone https://github.com/tapanapon-com/halloween-facedetector.git
cd halloween-facedetector

2. ลองรันบนเครื่อง กล้องในเบราว์เซอร์ใช้ได้เฉพาะ localhost หรือเว็บที่เป็น HTTPS เปิดไฟล์ index.html ตรง ๆ จึงใช้กล้องไม่ได้ ให้เปิดเซิร์ฟเวอร์เล็ก ๆ ก่อน แล้วเข้า http://localhost:5173

python3 -m http.server 5173

3. อัพโหลดขึ้นเว็บ คัดลอก index.html โฟลเดอร์ css และ js ไปไว้ในโฟลเดอร์ไหนก็ได้บนโฮสติ้ง เช่น /halloween จะผ่าน FTP หรือ File Manager ของโฮสติ้งก็ได้ ข้อสำคัญคือเว็บต้องเป็น HTTPS ไม่อย่างนั้นมือถือจะไม่ยอมเปิดกล้อง

ถ้ายังไม่มีโฮสติ้ง วิธีที่เร็วที่สุดคือกด Fork repo นี้ แล้วเปิด GitHub Pages (Settings → Pages → Deploy from a branch → main) จะได้ลิงก์ HTTPS ใช้งานได้ทันทีฟรี

4. ฝังในหน้าเว็บเดิม (ถ้าต้องการ) ใช้ iframe ชี้ไปยังโฟลเดอร์ที่อัพโหลดไว้ ต้องใส่ allow="camera" ไม่อย่างนั้นกล้องจะถูกบล็อก

<iframe
  src="/halloween/"
  allow="camera; web-share"
  style="width: 100%; height: 960px; border: 0;"
></iframe>

พัฒนาต่อ: เพิ่มฟิลเตอร์ของตัวเอง

ฟิลเตอร์ทุกแบบอยู่ในไฟล์ js/filters.js แต่ละแบบเป็น object ที่มีฟังก์ชันหลักสองตัว

• grade(ctx, W, H, k, t) ปรับโทนสีทั้งภาพ (k คือความเข้มจากแถบเลื่อน 0–1)
• face(ctx, f, k, t) วาดลงบนแต่ละใบหน้า โดย f คือข้อมูลใบหน้าที่คำนวณไว้ให้แล้ว

ตัวอย่างฟิลเตอร์ "ตัวตลก" ที่ใส่จมูกแดงตรงปลายจมูก

const clown = {
  id: "clown",
  name: "ตัวตลก",
  glyph: "🤡",
  accent: "#e0243f",
  grade(ctx, W, H, k) {
    fillMode(ctx, W, H, "#ffd6e0", "soft-light", 0.4 * k);
  },
  face(ctx, f) {
    const { x, y } = f.nose.tip;
    const r = f.W * 0.08; // ขนาดจมูกตามความกว้างใบหน้า
    const g = ctx.createRadialGradient(x - r * 0.3, y - r * 0.3, 0, x, y, r);
    g.addColorStop(0, "#ff6b6b");
    g.addColorStop(1, "#b0001e");
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();
  },
};

แล้วเพิ่ม clown ต่อท้ายรายการ FILTERS ด้านล่างไฟล์ ปุ่มเลือกฟิลเตอร์พร้อมภาพตัวอย่างจะถูกสร้างให้อัตโนมัติ

ข้อมูลใน f ที่ใช้บ่อย

ถ้าจะวาดสิ่งที่ต้องเอียงตามหัว เช่น หมวกหรือหู ให้วาดในฟังก์ชัน local(ctx, f, () => { ... }) ซึ่งหมุนพิกัดตามมุมหน้าให้แล้ว แกน −y ชี้ขึ้นไปทางหน้าผาก

ปรับแต่งอื่น ๆ ที่ทำได้ง่าย

• เปลี่ยนข้อความในกรอบจาก "Happy Halloween" ได้ที่ฟังก์ชัน frame() ใน js/scene.js
• เพิ่มของตกแต่งใหม่ในรายการ DECORATIONS ของไฟล์เดียวกัน
• เปลี่ยนฟิลเตอร์เริ่มต้นได้ที่ state.filter ใน js/app.js

คำถามที่พบบ่อย

ต้องลงแอปไหม ไม่ต้อง เปิดในเบราว์เซอร์รุ่นใหม่บนมือถือหรือคอมพิวเตอร์ได้เลย

รูปของเราถูกเก็บไว้ไหม ไม่ ภาพทั้งหมดประมวลผลในเครื่องของเรา ไม่มีการอัพโหลดขึ้นเซิร์ฟเวอร์

ทำไมกล้องไม่ขึ้น ตรวจว่ากดอนุญาตให้ใช้กล้องแล้ว ถ้าเปิดลิงก์จากในแอปอย่าง LINE หรือ Facebook เบราว์เซอร์ในแอปอาจใช้กล้องไม่ได้ ให้กดเปิดใน Safari หรือ Chrome แทน

ใช้แบบไม่มีเน็ตได้ไหม ครั้งแรกต้องต่อเน็ตเพื่อโหลดโมเดลตรวจจับใบหน้า ถ้าโหลดไม่ได้ แอปยังใช้โทนสีและของตกแต่งได้ แค่จะไม่จับใบหน้า

ลองเล่นได้ที่ tapanapon.com/halloween และดาวน์โหลดโค้ดได้ที่ GitHub ใครเอาไปต่อยอดเป็นฟิลเตอร์ใหม่ ส่งมาอวดกันได้ Happy Halloween 🎃

ภาพบุคคลตัวอย่างในบทความจาก Unsplash