diff --git a/README.md b/README.md index 6e27882..1b0c631 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ const switchCamera = ref.current.switchCamera(); // Switches between environment setFlipUserCamera(flipUserCamera), + [flipUserCamera, setFlipUserCamera] + ); + useEffect(() => { if (controllerRef.current) { setMode(Boolean(imageTargets)); @@ -74,7 +82,7 @@ const ARProvider = forwardRef( controllerRef.current = null; } }; - }, [width, height, camera, imageTargets, setMode]); + }, [camera, imageTargets, setMode]); const handleStream = useCallback(() => { if (webcamRef.current) { @@ -140,14 +148,8 @@ const ARProvider = forwardRef( filterBeta, }); - controller.onUpdate = ({ - hasFace, - estimateResult: { faceMatrix, metricLandmarks, faceScale }, - }) => { - setFaceMesh( - hasFace ? { faceMatrix, metricLandmarks, faceScale } : null - ); - }; + controller.onUpdate = ({ hasFace, estimateResult }) => + setFaceMesh(hasFace ? estimateResult : null); await controller.setup(webcamRef.current.video); @@ -210,20 +212,19 @@ const ARProvider = forwardRef( } }, [autoplay, ready, startTracking]); - const fixStyle = () => { - let offset = 0; - if (webcamRef.current?.video?.clientWidth > 0) { - offset = (width - webcamRef.current.video.clientWidth) / 2; - } - offset = parseInt(offset + ""); - - return { + const feedStyle = useMemo( + () => ({ width: "auto", maxWidth: "none", height: "inherit", - marginLeft: offset + "px", - }; - }; + marginLeft: `${ + webcamRef.current?.video?.clientWidth > 0 && ready + ? parseInt((width - webcamRef.current.video.clientWidth) / 2) + : 0 + }px`, + }), + [width, ready, webcamRef] + ); return ( <> @@ -231,7 +232,13 @@ const ARProvider = forwardRef( fullscreen zIndexRange={[-1, -1]} calculatePosition={() => [0, 0]} - style={{ top: 0, left: 0 }} + style={{ + top: 0, + left: 0, + ...(isWebcamFacingUser && flipUserCamera + ? { WebkitTransform: "scaleX(-1)", transform: "scaleX(-1)" } + : {}), + }} > {children} @@ -264,6 +271,7 @@ const ARView = forwardRef( filterBeta, warmupTolerance, missTolerance, + flipUserCamera = true, onReady, onError, ...rest @@ -295,6 +303,7 @@ const ARView = forwardRef( filterBeta, warmupTolerance, missTolerance, + flipUserCamera, onReady, onError, }} @@ -380,6 +389,7 @@ const ARAnchor = ({ const ARFaceMesh = ({ children, onFaceFound, onFaceLost, ...rest }) => { const ref = useRef(); const faceMesh = useAtomValue(faceMeshAtom); + const flipUserCamera = useAtomValue(flipUserCameraAtom); const [positions, uvs, indexes] = useMemo(() => { const positions = new Float32Array(FaceMeshUVs.length * 3); @@ -415,29 +425,31 @@ const ARFaceMesh = ({ children, onFaceFound, onFaceLost, ...rest }) => { }, [onFaceFound, onFaceLost, faceMesh]); return ( - - - - - - - {children} - + + + + + + + + {children} + + ); };