let detector

let boxes = []

​

function setup() {

  createCanvas(900, 520)

  video = createCapture(VIDEO)

  video.size(640, 520)

  video.hide()

  const detectionOptions = {

    withLandmarks: true,

    withDescriptors: false

  };

​

  detector = ml5.faceApi(video, detectionOptions, () => {

    console.log('Face API Model Loaded!')

    detectFace()

  })

}

​

function draw() {

  image(video, 0, 0)

  drawBoxes()

}

​

function detectFace() {

  detector.detect((err, detections) => {

    if (err) return console.error(err)

​

    if (detections && detections.length > 0) {

      // caras detectadas!!

      boxes = createBoxes(detections)

    }

​

    // llamamos a este método continuamente

    detectFace()

  })

}

​

function createBoxes(detections) {

  const boxes = []

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

    const alignedRect = detections[i].alignedRect;

​

    const box = {

      x: alignedRect._box._x,

      y: alignedRect._box._y,

      width: alignedRect._box._width,

      height: alignedRect._box._height,

      label: ""

    }

    boxes.push(box)

  }

​

  return boxes

}

​

function drawBoxes() {

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

    const box = boxes[i]

    noFill()

    stroke(161, 95, 251)

    strokeWeight(4)

    rect(box.x, box.y, box.width, box.height)

​

    strokeWeight(2)

    textSize(21)

    textAlign(CENTER)

    text(box.label, box.x + (box.width / 2), box.y + box.height + 20)

  }

}