let video;

let faces = [];

​

function preload() {

  faceMesh = ml5.faceMesh();

}

​

function setup() {

  createCanvas(640, 480);

​

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  // Start detecting faces in the webcam video

  faceMesh.detectStart(video, gotFaces);

}

​

// This "callback" function gets executed whenever

// a detection has finished

function gotFaces(results) {

  // Save the result in the global "hands" variable

  // we'll use inside draw()

  faces = results;

  console.log(faces);

}

​

function draw() {

  // Draw the webcam video

  image(video, 0, 0, width, height);

​

  // Keypoint 1 is supposed to be the nose, see

  // https://github.com/tensorflow/tfjs-models/blob/master/face-landmarks-detection/mesh_map.jpg

  // Let's draw a red circle over it

​

  for (let i = 0; i < faces.length; i++) {

    let face = faces[i];

    noStroke();

    fill(255, 0, 0);

    circle(face.keypoints[1].x, face.keypoints[1].y, 30);

  }

}

​