maykbrito / mini-video-me

📹 A small webcam player focused on providing an easy way to add and control your webcam during recordings.
https://maykbrito.github.io/mini-video-me/
MIT License
1.56k stars 153 forks source link

Use the Face API to follow user face #21

Open diego3g opened 3 years ago

diego3g commented 3 years ago

Use the Face API to follow user face

diego3g commented 3 years ago

https://www.youtube.com/watch?v=CVClHLwv-4I

lenivene commented 3 years ago

Hi @diego3g It's don't good idea, because I tested in low configuration computer (low memory) and the computer stay lagged. If creating with the option to use or not to use, it is a good idea.

diego3g commented 3 years ago

Hi @diego3g It's don't good idea, because I tested in low configuration computer (low memory) and the computer stay lagged. If creating with the option to use or not to use, it is a good idea.

Yeah, i think this one can be a plug in option.

Also, we don't need to use Face API itself, maybe we can find another solution that has an improved performance.

DanielGustavo commented 3 years ago

Hi, guys! 👋 So, I've searched for some API's for face detection and I got to know MediaPipe Face Detection:

machineUsageWithMediaPipeOn You can test it here

It's working really well in the codepen example, and I also tested it in a new electron project. However, for some reason it's not working well in this project, the CPU consumption stay high basically all the time:

machineUsageWithMediaPipeOn (in mini-me-video)

Anyway, I don't have a solution for this problem yet. But if someone have any idea of what to do to solve this, I think this feature would be more lightweight with MediaPipe Face Detection than with face-api.js:

machineUsageWithFaceApiOn You can test it here

Code that I wrote to implement MediaPipe (src/index.ts)

// Import these.
import { FaceDetection } from '@mediapipe/face_detection'
import { Camera } from '@mediapipe/camera_utils'
const faceDetection = new FaceDetection({
  locateFile: file => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection@0.4/${file}`
  },
})

faceDetection.setOptions({ minDetectionConfidence: 0.5, model: 'short' })

// Here is where the data about the detected face will be returned.
faceDetection.onResults(results => {
  console.log(results)
})

// Important to constantly check where is the person's face.
// And it has a better perfomance than calling the setInterval function.
const camera = new Camera(cameraController.videoElement, {
  onFrame: async () => {
    faceDetection.send({ image: cameraController.videoElement })
  },
})
camera.start()
ayusuke7 commented 3 years ago

Guys, reliving this discussion about using an approach to face detection, I leave here my contribution on how this feature could be made and detect not only faces but also eyes, mouths and any objects in the image.

Hugs.

https://www.youtube.com/watch?v=ayW6y8HzSe4

renanalencar commented 1 year ago

Hi, guys! I saw both videos in this thread here. However, I didn't get the point on using face detection in the app. A suggestion would have having the Mini Video Me tracking face to zoom in automatically or if there is no face at all the app would close the camera.