How to detect and use face landmark detection from face-api.js on the image snapshotted from the webcam?

[skitzke]

Hello @vladmandic or others,

I currently have an issue using the face-api library with this code.
I want to use face landmark detection from face-api.js library on the image snapshotted from a webcam when the capture button is pressed. How do i do that?

I know it is not the perfect code, but my process of thinking was take the snapshot from the webcam, place it in the <img src""> then use the face landmark detection on the snapshotted image.

Here is the code I have so far.

JSFiddle

I would greatly appreciate the help, it is a project for school.

[vladmandic]

there are a lot of different methods to achieve this, but absolutely simplest is to let faceapi do all the work as it can deal with many different types on input:

• at page and set faceapi options and load models
• on button submit trigger faceapi detection and pass your existing video element as input
  faceapi will internally create a canvas, copy video snapshot to that canvas, read pixel data from that canvas and create input tensor from that data

or you can do that yourself and pass canvas as input to faceapi

• on button submit create canvas and copy video data to it and then use canvas as input

or step further:

• once you have canvas, get image data and pass that as input to faceapi

or step further:

• once you have imagedata, create tensor from it and pass that as input to faceapi

since this is a school project, i'm writting ideas but actual code is really up to you - i'm not going to be posting code in this answer.

[skitzke]

there are a lot of different methods to achieve this, but absolutely simplest is to let faceapi do all the work as it can deal with many different types on input:

• at page and set faceapi options and load models
• on button submit trigger faceapi detection and pass your existing video element as input
  faceapi will internally create a canvas, copy video snapshot to that canvas, read pixel data from that canvas and create input tensor from that data

or you can do that yourself and pass canvas as input to faceapi

• on button submit create canvas and copy video data to it and then use canvas as input

or step further:

• once you have canvas, get image data and pass that as input to faceapi

or step further:

• once you have imagedata, create tensor from it and pass that as input to faceapi

since this is a school project, i'm writting ideas but actual code is really up to you - i'm not going to be posting code in this answer.

Thank you for the ideas i will do my best to make it work.
I was hoping to be helped with the existing code :(