การใช js face detect vdo

เนื่องจากเป็น app อย่าง snapchat , SNOW ซึ่งเป็นการใส่ลูกเล่นให้กับวีดีโอที่เราถ่าย  จึงเกิดความสงสัยว่าเขามีหลักการหรือวิธีการอย่างไร ในบทความนี้จะเป็นการทำแบบเบื้องต้น โดยการใช้ javascript + html canvas ครับ

ในการทำการนั้นต้องใช้ html cavans + js ชื่อ tracking.js เป็น lib สำหรับ detect vdo และ image ซึ่งจะสามารถ detect ได้หลายแบบ ทั้ง ปาก จมูก ตา โครงหน้า สี เป็นต้น
เรามาดูแบบที่เสร็จแล้วกันครับ

จากตัวอย่าง
-ใช้ tracking js ในการจับ ตำแหน่งของหน้า

– ทำการ render รูปภาพหน้ากากเข้าไปใน vdo ตามขนาดที่ tracking js คื่นค่าตำแหน่งมาให้

เราจะมาดู code ทังหมดกันครับ

1 เราจะ include lib tracking js

<script src="build/tracking-min.js"></script>  
<script src="build/data/face-min.js"></script>

2 ส่วนของ html ที่ใช้

<div class="center">
      <video id="video" width="240" height="320" preload autoplay loop muted>
	  <source src="assets/java.mp4" type="video/mp4">
       </video>
      <canvas id="canvas" width="240" height="320"></canvas>
</div>

3 ส่วนของ js ในการควบคุม

   window.onload = function() { 
      var video = document.getElementById('video');  // Object vdo
      var canvas = document.getElementById('canvas'); // Object cavas
      var context = canvas.getContext('2d');
	  
	 
	 var watermark = new Image();       
      watermark.src = 'assets/face1.png';  // รูปภาพที่ใช้เป็นหน้ากาก


      var tracker = new tracking.ObjectTracker('face');  // instant tracker เลือก face
      tracker.setInitialScale(4);      
      tracker.setStepSize(1);
      tracker.setEdgesDensity(0.12);

      tracking.track('#video', tracker);

      tracker.on('track', function(event) {       
        context.clearRect(0, 0, canvas.width, canvas.height); // เคลีย canvas

        event.data.forEach(function(rect){  // loop detect  ค่า rect คือค่า ตำแหน่ง x , y , width , height ของ หน้าที่ tracker จัดได้จาก vdo

	   context.drawImage(watermark, rect.x, rect.y, rect.width, rect.height);  // ทำการ render image ลงไปใน canvas ตามตำแหน่งที่ต้องที่รับค่า
		  
		  
        });
      });

เป็นอันเรียบร้อยสำหรับการทำในการ detect หน้าเบื้องอย่างเดียว แต่ถ้าอยากทำให้เนียนนั้นอาจต้อง detect ในหลายๆส่วนทั้งหน้า จมูก ปาก ตา เพื่อให้ลูกเล่นมีมากขึ้น

สามารถโหลดไปศึกษากันได้ครับ

DOWNLOAD SOURCE