@react-three/drei 9.119.0 → 9.120.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.119.0",
+  "version": "9.120.0",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/FaceControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),o=require("maath"),n=require("suspend-react"),c=require("../core/VideoTexture.cjs.js"),u=require("./Facemesh.cjs.js"),s=require("./FaceLandmarker.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("hls.js"),require("../core/Line.cjs.js"),require("three-stdlib");var d=i(e),f=l(t),p=l(r);function m(e,t){return e.clone().add(t).multiplyScalar(.5)}function v(e,t,r){const a=e.localToWorld(t);return r.worldToLocal(a)}const b=r.createContext({}),y=r.forwardRef((({camera:e,autostart:t=!0,webcam:n=!0,webcamVideoTextureSrc:c,manualUpdate:i=!1,manualDetect:l=!1,onVideoFrame:y,smoothTime:h=.25,offset:x=!0,offsetScalar:T=80,eyes:j=!1,eyesAsOrigin:E=!0,depth:V=.15,debug:g=!1,facemesh:k,makeDefault:F},R)=>{var S,q;const O=a.useThree((e=>e.scene)),C=a.useThree((e=>e.camera)),M=a.useThree((e=>e.set)),D=a.useThree((e=>e.get)),A=e||C,L=r.useRef(null),P=r.useRef(null),[I]=r.useState((()=>new f.Object3D)),[_]=r.useState((()=>new f.Vector3)),[B]=r.useState((()=>new f.Vector3)),[H]=r.useState((()=>new f.Vector3)),[W]=r.useState((()=>new f.Vector3)),z=r.useCallback((()=>{I.parent=A.parent;const e=P.current;if(e){const{outerRef:t,eyeRightRef:r,eyeLeftRef:a}=e;if(r.current&&a.current){const{irisDirRef:e}=r.current,{irisDirRef:o}=a.current;e.current&&o.current&&t.current&&(_.copy(v(e.current,new f.Vector3(0,0,0),t.current)),B.copy(v(o.current,new f.Vector3(0,0,0),t.current)),I.position.copy(v(t.current,m(_,B),A.parent||O)),H.copy(v(e.current,new f.Vector3(0,0,1),t.current)),W.copy(v(o.current,new f.Vector3(0,0,1),t.current)),I.lookAt(t.current.localToWorld(m(H,W))))}else t.current&&(I.position.copy(v(t.current,new f.Vector3(0,0,0),A.parent||O)),I.lookAt(t.current.localToWorld(new f.Vector3(0,0,1))))}return I}),[A,B,W,_,H,O,I]),[U]=r.useState((()=>new f.Object3D)),G=r.useCallback((function(e,t){if(A){var r;if(null!==(r=t)&&void 0!==r||(t=z()),h>0){const r=1e-9;o.easing.damp3(U.position,t.position,h,e,void 0,void 0,r),o.easing.dampE(U.rotation,t.rotation,h,e,void 0,void 0,r)}else U.position.copy(t.position),U.rotation.copy(t.rotation);A.position.copy(U.position),A.rotation.copy(U.rotation)}}),[A,z,h,U.position,U.rotation]),[J,K]=r.useState(),N=s.useFaceLandmarker(),Q=r.useCallback(((e,t)=>{const r=null==N?void 0:N.detectForVideo(e,t);return K(r),r}),[N]);a.useFrame(((e,t)=>{i||G(t)}));const X=r.useMemo((()=>Object.assign(Object.create(f.EventDispatcher.prototype),{detect:Q,computeTarget:z,update:G,facemeshApiRef:P,webcamApiRef:L,play:()=>{var e;null==(e=L.current)||null==(e=e.videoTextureApiRef.current)||e.texture.source.data.play()},pause:()=>{var e;null==(e=L.current)||null==(e=e.videoTextureApiRef.current)||e.texture.source.data.pause()}})),[Q,z,G]);r.useImperativeHandle(R,(()=>X),[X]),r.useEffect((()=>{const e=e=>{l||Q(e.texture.source.data,e.time),y&&y(e)};return X.addEventListener("videoFrame",e),()=>{X.removeEventListener("videoFrame",e)}}),[X,Q,N,l,y]),r.useEffect((()=>{if(F){const e=D().controls;return M({controls:X}),()=>M({controls:e})}}),[F,X,D,M]);const Y=null==J?void 0:J.faceLandmarks[0],Z=null==J||null==(S=J.facialTransformationMatrixes)?void 0:S[0],$=null==J||null==(q=J.faceBlendshapes)?void 0:q[0];return p.createElement(b.Provider,{value:X},n&&p.createElement(r.Suspense,{fallback:null},p.createElement(w,{ref:L,autostart:t,videoTextureSrc:c})),p.createElement(u.Facemesh,d.default({ref:P},k,{points:Y,depth:V,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:j,eyesAsOrigin:E,offset:x,offsetScalar:T,debug:g,"rotation-z":Math.PI,visible:g}),p.createElement("meshBasicMaterial",{side:f.DoubleSide})))})),h=()=>r.useContext(b),w=r.forwardRef((({videoTextureSrc:e,autostart:t=!0},a)=>{const o=r.useRef(null),c=h(),u=n.suspend((async()=>e?Promise.resolve(null):await navigator.mediaDevices.getUserMedia({audio:!1,video:{facingMode:"user"}})),[e]);r.useEffect((()=>(c.dispatchEvent({type:"stream",stream:u}),()=>{null==u||u.getTracks().forEach((e=>e.stop())),n.clear([e])})),[u,c,e]);const s=r.useMemo((()=>({videoTextureApiRef:o})),[]);return r.useImperativeHandle(a,(()=>s),[s]),p.createElement(r.Suspense,{fallback:null},p.createElement(x,{ref:o,src:e||u,start:t}))})),x=r.forwardRef((({src:e,start:t},a)=>{const o=c.useVideoTexture(e,{start:t}),n=o.source.data,u=h(),s=r.useCallback((e=>{u.dispatchEvent({type:"videoFrame",texture:o,time:e})}),[o,u]);T(n,s);const i=r.useMemo((()=>({texture:o})),[o]);return r.useImperativeHandle(a,(()=>i),[i]),p.createElement(p.Fragment,null)})),T=(e,t)=>{r.useEffect((()=>{if(!e||!e.requestVideoFrameCallback)return;let r;return e.requestVideoFrameCallback((function a(...o){t(...o),r=e.requestVideoFrameCallback(a)})),()=>e.cancelVideoFrameCallback(r)}),[e,t])};exports.FaceControls=y,exports.useFaceControls=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),o=require("@react-three/fiber"),n=require("maath"),c=require("./Facemesh.cjs.js"),a=require("./FaceLandmarker.cjs.js"),s=require("./WebcamVideoTexture.cjs.js"),u=require("../core/VideoTexture.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../core/Line.cjs.js"),require("three-stdlib"),require("suspend-react"),require("hls.js");var f=i(e),d=l(t),p=l(r);function m(e,t){return e.clone().add(t).multiplyScalar(.5)}function b(e,t,r){const o=e.localToWorld(t);return r.worldToLocal(o)}const h=r.createContext({}),y=r.forwardRef((({camera:e,videoTexture:t={start:!0},manualDetect:i=!1,faceLandmarkerResult:l,manualUpdate:y=!1,makeDefault:j,smoothTime:v=.25,offset:T=!0,offsetScalar:V=80,eyes:w=!1,eyesAsOrigin:g=!0,depth:q=.15,debug:x=!1,facemesh:O},k)=>{var S,R;const E=o.useThree((e=>e.scene)),D=o.useThree((e=>e.camera)),F=o.useThree((e=>e.set)),C=o.useThree((e=>e.get)),L=e||D,M=r.useRef(null),[A]=r.useState((()=>new d.Object3D)),[P]=r.useState((()=>new d.Vector3)),[W]=r.useState((()=>new d.Vector3)),[_]=r.useState((()=>new d.Vector3)),[B]=r.useState((()=>new d.Vector3)),z=r.useCallback((()=>{A.parent=L.parent;const e=M.current;if(e){const{outerRef:t,eyeRightRef:r,eyeLeftRef:o}=e;if(r.current&&o.current){const{irisDirRef:e}=r.current,{irisDirRef:n}=o.current;e.current&&n.current&&t.current&&(P.copy(b(e.current,new d.Vector3(0,0,0),t.current)),W.copy(b(n.current,new d.Vector3(0,0,0),t.current)),A.position.copy(b(t.current,m(P,W),L.parent||E)),_.copy(b(e.current,new d.Vector3(0,0,1),t.current)),B.copy(b(n.current,new d.Vector3(0,0,1),t.current)),A.lookAt(t.current.localToWorld(m(_,B))))}else t.current&&(A.position.copy(b(t.current,new d.Vector3(0,0,0),L.parent||E)),A.lookAt(t.current.localToWorld(new d.Vector3(0,0,1))))}return A}),[L,W,B,P,_,E,A]),[I]=r.useState((()=>new d.Object3D)),H=r.useCallback((function(e,t){if(L){var r;if(null!==(r=t)&&void 0!==r||(t=z()),v>0){const r=1e-9;n.easing.damp3(I.position,t.position,v,e,void 0,void 0,r),n.easing.dampE(I.rotation,t.rotation,v,e,void 0,void 0,r)}else I.position.copy(t.position),I.rotation.copy(t.rotation);L.position.copy(I.position),L.rotation.copy(I.rotation)}}),[L,z,v,I.position,I.rotation]);o.useFrame(((e,t)=>{y||H(t)}));const U=r.useRef(null),[G,J]=r.useState(),K=a.useFaceLandmarker(),N=r.useCallback(((e,t)=>{const r=U.current;if(!r)return;const o=r.source.data,n=null==K?void 0:K.detectForVideo(o,e);J(n)}),[K]),Q=r.useMemo((()=>Object.assign(Object.create(d.EventDispatcher.prototype),{computeTarget:z,update:H,facemeshApiRef:M})),[z,H]);r.useImperativeHandle(k,(()=>Q),[Q]),r.useEffect((()=>{if(j){const e=C().controls;return F({controls:Q}),()=>F({controls:e})}}),[j,Q,C,F]);const X=null!=l?l:G,Y=null==X?void 0:X.faceLandmarks[0],Z=null==X||null==(S=X.facialTransformationMatrixes)?void 0:S[0],$=null==X||null==(R=X.faceBlendshapes)?void 0:R[0],ee={onVideoFrame:N,...t};return p.createElement(h.Provider,{value:Q},!i&&p.createElement(r.Suspense,{fallback:null},"src"in ee?p.createElement(u.VideoTexture,f.default({ref:U},ee)):p.createElement(s.WebcamVideoTexture,f.default({ref:U},ee))),p.createElement(c.Facemesh,f.default({ref:M},O,{points:Y,depth:q,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:w,eyesAsOrigin:g,offset:T,offsetScalar:V,debug:x,"rotation-z":Math.PI,visible:x}),p.createElement("meshBasicMaterial",{side:d.DoubleSide})))}));exports.FaceControls=y,exports.useFaceControls=()=>r.useContext(h);

package/web/FaceControls.d.ts

@@ -2,17 +2,14 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { RefObject } from 'react';
 import type { FaceLandmarkerResult } from '@mediapipe/tasks-vision';
-import { useVideoTexture } from '../core/VideoTexture';
+import { VideoTextureProps } from '..';
 import { FacemeshApi, FacemeshProps } from './Facemesh';
-type VideoTextureSrc = Parameters<typeof useVideoTexture>[0];
 export type FaceControlsProps = {
     camera?: THREE.Camera;
-    autostart?: boolean;
-    webcam?: boolean;
-    webcamVideoTextureSrc?: VideoTextureSrc;
-    manualUpdate?: boolean;
+    videoTexture: VideoTextureProps;
     manualDetect?: boolean;
-    onVideoFrame?: (e: THREE.Event) => void;
+    faceLandmarkerResult?: FaceLandmarkerResult;
+    manualUpdate?: boolean;
     makeDefault?: boolean;
     smoothTime?: number;
     offset?: boolean;
@@ -24,20 +21,9 @@ export type FaceControlsProps = {
     facemesh?: FacemeshProps;
 };
 export type FaceControlsApi = THREE.EventDispatcher & {
-    detect: (video: HTMLVideoElement, time: number) => FaceLandmarkerResult | undefined;
     computeTarget: () => THREE.Object3D;
     update: (delta: number, target?: THREE.Object3D) => void;
     facemeshApiRef: RefObject<FacemeshApi>;
-    webcamApiRef: RefObject<WebcamApi>;
-    play: () => void;
-    pause: () => void;
 };
 export declare const FaceControls: React.ForwardRefExoticComponent<FaceControlsProps & React.RefAttributes<FaceControlsApi>>;
 export declare const useFaceControls: () => FaceControlsApi;
-type WebcamApi = {
-    videoTextureApiRef: RefObject<VideoTextureApi>;
-};
-type VideoTextureApi = {
-    texture: THREE.VideoTexture;
-};
-export {};

package/web/FaceControls.js

@@ -4,12 +4,10 @@ import * as React from 'react';
 import { forwardRef, useRef, useState, useCallback, useMemo, useImperativeHandle, useEffect, Suspense, useContext, createContext } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import { easing } from 'maath';
-import { suspend, clear } from 'suspend-react';
-import { useVideoTexture } from '../core/VideoTexture.js';
 import { Facemesh } from './Facemesh.js';
 import { useFaceLandmarker } from './FaceLandmarker.js';
-
-// useVideoTexture 1st arg `src` type
+import { WebcamVideoTexture } from './WebcamVideoTexture.js';
+import { VideoTexture } from '../core/VideoTexture.js';
 
 function mean(v1, v2) {
   return v1.clone().add(v2).multiplyScalar(0.5);
@@ -38,12 +36,13 @@ const FaceControlsContext = /* @__PURE__ */createContext({});
 
 const FaceControls = /* @__PURE__ */forwardRef(({
   camera,
-  autostart = true,
-  webcam = true,
-  webcamVideoTextureSrc,
-  manualUpdate = false,
+  videoTexture = {
+    start: true
+  },
   manualDetect = false,
-  onVideoFrame,
+  faceLandmarkerResult,
+  manualUpdate = false,
+  makeDefault,
   smoothTime = 0.25,
   offset = true,
   offsetScalar = 80,
@@ -51,16 +50,14 @@ const FaceControls = /* @__PURE__ */forwardRef(({
   eyesAsOrigin = true,
   depth = 0.15,
   debug = false,
-  facemesh,
-  makeDefault
+  facemesh
 }, fref) => {
-  var _faces$facialTransfor, _faces$faceBlendshape;
+  var _result$facialTransfo, _result$faceBlendshap;
   const scene = useThree(state => state.scene);
   const defaultCamera = useThree(state => state.camera);
   const set = useThree(state => state.set);
   const get = useThree(state => state.get);
   const explCamera = camera || defaultCamera;
-  const webcamApiRef = useRef(null);
   const facemeshApiRef = useRef(null);
 
   //
@@ -148,59 +145,41 @@ const FaceControls = /* @__PURE__ */forwardRef(({
       explCamera.rotation.copy(current.rotation);
     }
   }, [explCamera, computeTarget, smoothTime, current.position, current.rotation]);
+  useFrame((_, delta) => {
+    if (manualUpdate) return;
+    update(delta);
+  });
 
   //
-  // detect()
+  // onVideoFrame (only used if !manualDetect)
   //
 
-  const [faces, setFaces] = useState();
+  const videoTextureRef = useRef(null);
+  const [_faceLandmarkerResult, setFaceLandmarkerResult] = useState();
   const faceLandmarker = useFaceLandmarker();
-  const detect = useCallback((video, time) => {
-    const result = faceLandmarker == null ? void 0 : faceLandmarker.detectForVideo(video, time);
-    setFaces(result);
-    return result;
+  const onVideoFrame = useCallback((now, metadata) => {
+    const texture = videoTextureRef.current;
+    if (!texture) return;
+    const videoFrame = texture.source.data;
+    const result = faceLandmarker == null ? void 0 : faceLandmarker.detectForVideo(videoFrame, now);
+    setFaceLandmarkerResult(result);
   }, [faceLandmarker]);
-  useFrame((_, delta) => {
-    if (!manualUpdate) {
-      update(delta);
-    }
-  });
 
+  //
   // Ref API
+  //
+
   const api = useMemo(() => Object.assign(Object.create(THREE.EventDispatcher.prototype), {
-    detect,
     computeTarget,
     update,
-    facemeshApiRef,
-    webcamApiRef,
-    // shorthands
-    play: () => {
-      var _webcamApiRef$current;
-      (_webcamApiRef$current = webcamApiRef.current) == null || (_webcamApiRef$current = _webcamApiRef$current.videoTextureApiRef.current) == null || _webcamApiRef$current.texture.source.data.play();
-    },
-    pause: () => {
-      var _webcamApiRef$current2;
-      (_webcamApiRef$current2 = webcamApiRef.current) == null || (_webcamApiRef$current2 = _webcamApiRef$current2.videoTextureApiRef.current) == null || _webcamApiRef$current2.texture.source.data.pause();
-    }
-  }), [detect, computeTarget, update]);
+    facemeshApiRef
+  }), [computeTarget, update]);
   useImperativeHandle(fref, () => api, [api]);
 
   //
-  // events callbacks
+  // makeDefault (`controls` global state)
   //
 
-  useEffect(() => {
-    const onVideoFrameCb = e => {
-      if (!manualDetect) detect(e.texture.source.data, e.time);
-      if (onVideoFrame) onVideoFrame(e);
-    };
-    api.addEventListener('videoFrame', onVideoFrameCb);
-    return () => {
-      api.removeEventListener('videoFrame', onVideoFrameCb);
-    };
-  }, [api, detect, faceLandmarker, manualDetect, onVideoFrame]);
-
-  // `controls` global state
   useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
@@ -212,18 +191,28 @@ const FaceControls = /* @__PURE__ */forwardRef(({
       });
     }
   }, [makeDefault, api, get, set]);
-  const points = faces == null ? void 0 : faces.faceLandmarks[0];
-  const facialTransformationMatrix = faces == null || (_faces$facialTransfor = faces.facialTransformationMatrixes) == null ? void 0 : _faces$facialTransfor[0];
-  const faceBlendshapes = faces == null || (_faces$faceBlendshape = faces.faceBlendshapes) == null ? void 0 : _faces$faceBlendshape[0];
+
+  //
+  //
+  //
+
+  const result = faceLandmarkerResult !== null && faceLandmarkerResult !== void 0 ? faceLandmarkerResult : _faceLandmarkerResult;
+  const points = result == null ? void 0 : result.faceLandmarks[0];
+  const facialTransformationMatrix = result == null || (_result$facialTransfo = result.facialTransformationMatrixes) == null ? void 0 : _result$facialTransfo[0];
+  const faceBlendshapes = result == null || (_result$faceBlendshap = result.faceBlendshapes) == null ? void 0 : _result$faceBlendshap[0];
+  const videoTextureProps = {
+    onVideoFrame,
+    ...videoTexture
+  };
   return /*#__PURE__*/React.createElement(FaceControlsContext.Provider, {
     value: api
-  }, webcam && /*#__PURE__*/React.createElement(Suspense, {
+  }, !manualDetect && /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/React.createElement(Webcam, {
-    ref: webcamApiRef,
-    autostart: autostart,
-    videoTextureSrc: webcamVideoTextureSrc
-  })), /*#__PURE__*/React.createElement(Facemesh, _extends({
+  }, 'src' in videoTextureProps ? /*#__PURE__*/React.createElement(VideoTexture, _extends({
+    ref: videoTextureRef
+  }, videoTextureProps)) : /*#__PURE__*/React.createElement(WebcamVideoTexture, _extends({
+    ref: videoTextureRef
+  }, videoTextureProps))), /*#__PURE__*/React.createElement(Facemesh, _extends({
     ref: facemeshApiRef
   }, facemesh, {
     points: points,
@@ -243,91 +232,4 @@ const FaceControls = /* @__PURE__ */forwardRef(({
 });
 const useFaceControls = () => useContext(FaceControlsContext);
 
-//
-// Webcam
-//
-
-const Webcam = /* @__PURE__ */forwardRef(({
-  videoTextureSrc,
-  autostart = true
-}, fref) => {
-  const videoTextureApiRef = useRef(null);
-  const faceControls = useFaceControls();
-  const stream = suspend(async () => {
-    return !videoTextureSrc ? await navigator.mediaDevices.getUserMedia({
-      audio: false,
-      video: {
-        facingMode: 'user'
-      }
-    }) : Promise.resolve(null);
-  }, [videoTextureSrc]);
-  useEffect(() => {
-    faceControls.dispatchEvent({
-      type: 'stream',
-      stream
-    });
-    return () => {
-      stream == null || stream.getTracks().forEach(track => track.stop());
-      clear([videoTextureSrc]);
-    };
-  }, [stream, faceControls, videoTextureSrc]);
-
-  // ref-api
-  const api = useMemo(() => ({
-    videoTextureApiRef
-  }), []);
-  useImperativeHandle(fref, () => api, [api]);
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(VideoTexture, {
-    ref: videoTextureApiRef,
-    src: videoTextureSrc || stream,
-    start: autostart
-  }));
-});
-
-//
-// VideoTexture
-//
-
-const VideoTexture = /* @__PURE__ */forwardRef(({
-  src,
-  start
-}, fref) => {
-  const texture = useVideoTexture(src, {
-    start
-  });
-  const video = texture.source.data;
-  const faceControls = useFaceControls();
-  const onVideoFrame = useCallback(time => {
-    faceControls.dispatchEvent({
-      type: 'videoFrame',
-      texture,
-      time
-    });
-  }, [texture, faceControls]);
-  useVideoFrame(video, onVideoFrame);
-
-  // ref-api
-  const api = useMemo(() => ({
-    texture
-  }), [texture]);
-  useImperativeHandle(fref, () => api, [api]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
-});
-const useVideoFrame = (video, f) => {
-  // https://web.dev/requestvideoframecallback-rvfc/
-  // https://www.remotion.dev/docs/video-manipulation
-  useEffect(() => {
-    if (!video || !video.requestVideoFrameCallback) return;
-    let handle;
-    function callback(...args) {
-      f(...args);
-      handle = video.requestVideoFrameCallback(callback);
-    }
-    video.requestVideoFrameCallback(callback);
-    return () => video.cancelVideoFrameCallback(handle);
-  }, [video, f]);
-};
-
 export { FaceControls, useFaceControls };

package/web/FaceLandmarker.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("suspend-react");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=r(e);const n=e.createContext({}),s={basePath:"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm",options:{baseOptions:{modelAssetPath:"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",delegate:"GPU"},runningMode:"VIDEO",outputFaceBlendshapes:!0,outputFacialTransformationMatrixes:!0}};exports.FaceLandmarker=function({basePath:o=s.basePath,options:i=s.options,children:c}){const u=JSON.stringify(i),l=t.suspend((async()=>{const{FilesetResolver:e,FaceLandmarker:t}=await Promise.resolve().then((function(){return r(require("@mediapipe/tasks-vision"))})),a=await e.forVisionTasks(o);return t.createFromOptions(a,i)}),[o,u]);return e.useEffect((()=>()=>{null==l||l.close(),t.clear([o,u])}),[l,o,u]),a.createElement(n.Provider,{value:l},c)},exports.FaceLandmarkerDefaults=s,exports.useFaceLandmarker=function(){return e.useContext(n)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("suspend-react");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=r(e);const s=e.createContext({}),n={basePath:"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm",options:{baseOptions:{modelAssetPath:"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",delegate:"GPU"},runningMode:"VIDEO",outputFaceBlendshapes:!0,outputFacialTransformationMatrixes:!0}},o=e.forwardRef((({basePath:o=n.basePath,options:i=n.options,children:c},u)=>{const l=JSON.stringify(i),d=t.suspend((async()=>{const{FilesetResolver:e,FaceLandmarker:t}=await Promise.resolve().then((function(){return r(require("@mediapipe/tasks-vision"))})),a=await e.forVisionTasks(o);return t.createFromOptions(a,i)}),[o,l]);return e.useEffect((()=>()=>{null==d||d.close(),t.clear([o,l])}),[d,o,l]),e.useImperativeHandle(u,(()=>d),[d]),a.createElement(s.Provider,{value:d},c)}));exports.FaceLandmarker=o,exports.FaceLandmarkerDefaults=n,exports.useFaceLandmarker=function(){return e.useContext(s)};

package/web/FaceLandmarker.d.ts

@@ -10,6 +10,6 @@ export declare const FaceLandmarkerDefaults: {
     basePath: string;
     options: FaceLandmarkerOptions;
 };
-export declare function FaceLandmarker({ basePath, options, children, }: FaceLandmarkerProps): React.JSX.Element;
+export declare const FaceLandmarker: React.ForwardRefExoticComponent<FaceLandmarkerProps & React.RefAttributes<FaceLandmarkerImpl>>;
 export declare function useFaceLandmarker(): FaceLandmarkerImpl | undefined;
 export {};

package/web/FaceLandmarker.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useContext, createContext } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useContext, createContext } from 'react';
 import { suspend, clear } from 'suspend-react';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
@@ -16,11 +16,11 @@ const FaceLandmarkerDefaults = {
     outputFacialTransformationMatrixes: true
   }
 };
-function FaceLandmarker({
+const FaceLandmarker = /*#__PURE__*/forwardRef(({
   basePath = FaceLandmarkerDefaults.basePath,
   options = FaceLandmarkerDefaults.options,
   children
-}) {
+}, fref) => {
   const opts = JSON.stringify(options);
   const faceLandmarker = suspend(async () => {
     const {
@@ -36,10 +36,12 @@ function FaceLandmarker({
       clear([basePath, opts]);
     };
   }, [faceLandmarker, basePath, opts]);
+  useImperativeHandle(fref, () => faceLandmarker, [faceLandmarker]); // expose faceLandmarker through ref
+
   return /*#__PURE__*/React.createElement(FaceLandmarkerContext.Provider, {
     value: faceLandmarker
   }, children);
-}
+});
 function useFaceLandmarker() {
   return useContext(FaceLandmarkerContext);
 }