FaceTracking

by steveseguin

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Face Detection</title>
</head>

 <body onload="init();">
    <h1>Face Tracking</h1>
   Click on the Start WebCam button first; then start tracking.
   <br>Please enable flag in Chrome first: <a href="chrome://flags/#enable-experimental-web-platform-feature">chrome://flags/#enable-experimental-web-platform-feature</a></br>
     <p>
    <button onclick="startWebcam();">Start WebCam</button>
       <button onclick="snapshot();">Start Face Tracking</button> 
    </p>
    <video onclick="snapshot(this);" width="640px" height="360px" id="video" controls autoplay></video>

      
  
    <div class="container">
        <div id="imageContainer" class="images">
            <canvas  id="myCanvas" class="image" width="640px" height="360px"></canvas>  
        </div>
    </div>
</body>

</html>

JavaScript

navigator.getUserMedia = ( navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia);

      var video;
      var webcamStream;

      function startWebcam() {
        if (navigator.getUserMedia) {
           navigator.getUserMedia (

              // constraints
              {
                 video: {width:640,height:360},
                 audio: false
              },

              // successCallback
              function(localMediaStream) {
                  video = document.querySelector('video');
                 video.srcObject = localMediaStream ;
                 webcamStream = localMediaStream;
              },

              // errorCallback
              function(err) {
                 console.log("The following error occured: " + err);
              }
           );
        } else {
           console.log("getUserMedia not supported");
        }  
      }

      function stopWebcam() {
          webcamStream.stop();
      }
      //---------------------
      // TAKE A SNAPSHOT CODE
      //---------------------
      var canvas, ctx;

      function init() {
        // Get the canvas and obtain a context for
        // drawing in it
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
		      
		var height=canvas.height;
		var left=0;
		var bottom=canvas.height;
		var width=canvas.width;
      }

      
    var flipHorizontal = false;

    var imageElement = document.getElementById("myCanvas");

    var NET=null;
	
	function snapshot() {
         // Draws current image from the video element into the canvas
		//ctx.drawImage(video, 0,0, canvas.width, canvas.height);
		//clearFaceBox();
		setInterval(detectFace,50);
		
			
		
        
      }
var height=480;
var left=0;
var bottom=0;
var width=640;

const detectFace = () => {
	
	
  if(!window.FaceDetector) return...