Skip to content

FaceControls#1461

Merged
abernier merged 16 commits intomasterfrom
abernier/facemesh-v2.1
Jun 5, 2023
Merged

FaceControls#1461
abernier merged 16 commits intomasterfrom
abernier/facemesh-v2.1

Conversation

@abernier
Copy link
Copy Markdown
Member

@abernier abernier commented May 22, 2023

Note

Merged, see <FaceControls> doc

Why / What

DEMO: https://abernier.github.io/fld/ as well as the story

facecontrols-videotexture_720p.mov

Control the camera with your head/eyes:

<FaceControls />

or a custom camera, with your eyes:

<FaceControls camera={cam01} eyes />

This PR basically consists in:

  • an updated Facemesh (fully backward-compatible with current version)
  • a FaceLandmarker provider to bring @mediapipe/tasks-vision
  • and a FaceControls

Checklist

  • Documentation updated (example)
  • Storybook entry added (example)
  • Ready to be merged

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
drei ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 4, 2023 4:13pm

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented May 22, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e3f4365:

Sandbox Source
magical-rain-8dur7g Configuration
Ground reflections and video textures Configuration
arc-x-pmndrs-colors Configuration

Comment thread src/core/FaceLandmarker.tsx Outdated
Comment on lines +36 to +39
FilesetResolver.forVisionTasks(basePath)
.then((vision) => FaceLandmarkerImpl.createFromOptions(vision, options))
.then((faceLandmarker) => setFaceLandmarker(faceLandmarker))
.catch((err) => console.error('error while creating faceLandmarker', err))
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd consider using suspense here.

Copy link
Copy Markdown
Member Author

@abernier abernier Jun 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but how to deal with ret.close() cleanup with suspend?

Copy link
Copy Markdown
Member Author

@abernier abernier Jun 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, following @drcmda additional advices on that, I've now converted it to suspend, but I let you check my impl is correct

Comment thread src/core/FaceLandmarker.tsx Outdated
Comment on lines +41 to +42
return () => void ret?.close()
}, [basePath, options])
Copy link
Copy Markdown
Member

@CodyJasonBennett CodyJasonBennett Jun 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If options is an object, this will break reference every rerender. Either destructure or use an expression that is immune like JSON.stringify -- not ideal but it works.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I've set opts = JSON.stringify(options) and set my dep with

Comment thread src/core/FaceControls.tsx Outdated
Comment thread src/core/FaceControls.tsx Outdated
Comment on lines +326 to +349
const [stream, setStream] = useState<MediaStream>()

const videoTextureApiRef = useRef<VideoTextureApi>(null)

const faceControls = useFaceControls()
useEffect(() => {
let strm: MediaStream

if (!videoTextureSrc) {
navigator.mediaDevices
.getUserMedia({
audio: false,
video: { facingMode: 'user' },
})
.then((s) => {
strm = s
faceControls.dispatchEvent({ type: 'stream', stream: strm })
setStream(strm)
})
.catch(console.error)
}

return () => strm?.getTracks().forEach((track) => track.stop())
}, [faceControls, videoTextureSrc])
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suspense would also be helpful here. I'm pedantic about this now as it's breaking later.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok now done ;) I let you check my impl

@abernier
Copy link
Copy Markdown
Member Author

abernier commented Jun 2, 2023

thanks for the review @CodyJasonBennett, will integrate them tomorrow ;)

<color attach="background" args={['#303030']} />
<axesHelper />

<React.Suspense fallback={null}>
Copy link
Copy Markdown
Member Author

@abernier abernier Jun 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess React.Suspense is now required here, since <FaceLandmarker> provider is now suspended?

I'm not sure

Comment thread src/core/FaceControls.tsx
<FaceControlsContext.Provider value={api}>
{webcam && <Webcam ref={webcamApiRef} autostart={autostart} videoTextureSrc={webcamVideoTextureSrc} />}
{webcam && (
<Suspense fallback={null}>
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here: is Suspense really required? I'm not sure

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your call whether suspense should go here or in user-land around the component.

@abernier
Copy link
Copy Markdown
Member Author

abernier commented Jun 4, 2023

@CodyJasonBennett I think I've now addressed your precious feedbacks. If you have no other ones, I think I would be ready to merge

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2023

🎉 This PR is included in version 9.74.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markhughes
Copy link
Copy Markdown

FYI this commit breaks react native builds.

Use <= v9.73.4 for react native.

@CodyJasonBennett
Copy link
Copy Markdown
Member

@markhughes, can you create an issue? I think we'll have to remove it from the native target since iOS doesn't support JIT/WASM.

@krispya krispya deleted the abernier/facemesh-v2.1 branch January 14, 2026 18:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants