simplified

pmndrs · Dec 4, 2024 · 11d2b16 · 11d2b16
1 parent f759344
commit 11d2b16
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 205 deletions.
diff --git a/.storybook/stories/FaceControls.stories.tsx b/.storybook/stories/FaceControls.stories.tsx
@@ -4,8 +4,9 @@ import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
 
-import { FaceLandmarker, FaceControls, Box } from '../../src'
-import { ComponentProps } from 'react'
+import { FaceLandmarker, FaceControls, Box, WebcamVideoTexture } from '../../src'
+import { ComponentProps, ElementRef, useRef, useState } from 'react'
+import { FaceLandmarkerResult } from '@mediapipe/tasks-vision'
 
 export default {
   title: 'Controls/FaceControls',
@@ -17,10 +18,13 @@ export default {
       </Setup>
     ),
   ],
+  tags: ['!autodocs'], // FaceLandmarker cannot have multiple instances accross different SB iframes
 } satisfies Meta<typeof FaceControls>
 
 type Story = StoryObj<typeof FaceControls>
 
+//
+
 function FaceControlsScene(props: ComponentProps<typeof FaceControls>) {
   return (
     <>
@@ -44,3 +48,47 @@ export const FaceControlsSt = {
   render: (args) => <FaceControlsScene {...args} />,
   name: 'Default',
 } satisfies Story
+
+//
+
+function FaceControlsScene2(props: ComponentProps<typeof FaceControls>) {
+  const faceLandmarkerRef = useRef<ElementRef<typeof FaceLandmarker>>(null)
+  const videoTextureRef = useRef<ElementRef<typeof WebcamVideoTexture>>(null)
+
+  const [faceLandmarkerResult, setFaceLandmarkerResult] = useState<FaceLandmarkerResult>()
+
+  return (
+    <>
+      <color attach="background" args={['#303030']} />
+      <axesHelper />
+
+      <React.Suspense fallback={null}>
+        <FaceLandmarker ref={faceLandmarkerRef}>
+          <WebcamVideoTexture
+            ref={videoTextureRef}
+            onVideoFrame={(now) => {
+              const faceLandmarker = faceLandmarkerRef.current
+              const videoTexture = videoTextureRef.current
+              if (!faceLandmarker || !videoTexture) return
+
+              const videoFrame = videoTexture.source.data
+              const result = faceLandmarker.detectForVideo(videoFrame, now)
+              setFaceLandmarkerResult(result)
+            }}
+          />
+
+          <FaceControls {...props} manualDetect faceLandmarkerResult={faceLandmarkerResult} />
+        </FaceLandmarker>
+      </React.Suspense>
+
+      <Box args={[0.1, 0.1, 0.1]}>
+        <meshStandardMaterial />
+      </Box>
+    </>
+  )
+}
+
+export const FaceControlsSt2 = {
+  render: (args) => <FaceControlsScene2 {...args} />,
+  name: 'manualDetect',
+} satisfies Story