Comments (7)
Did you add react-native-worklets-core
(and processNestedWorklets
if you're using reanimated
) to your babel.config.js
?
Can you please provide the full code you're using?
from react-native-vision-camera-face-detector.
for sure
this mu babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['react-native-worklets-core/plugin'],
[
'react-native-reanimated/plugin',
],
],
};
demo code
import {
StyleSheet,
Text,
View
} from 'react-native'
import {
useEffect,
useState
} from 'react'
import {
Camera,
useCameraDevice,
useFrameProcessor,
runAsync
} from 'react-native-vision-camera'
import {
detectFaces,
DetectionResult
} from 'react-native-vision-camera-face-detector'
import { Worklets } from 'react-native-worklets-core'
export default function App() {
const device = useCameraDevice('front')
useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission()
console.log({ status })
})()
}, [device])
const handleDetectionWorklet = Worklets.createRunInJsFn( (
result: DetectionResult
) => {
console.log( 'detection result', result )
})
const frameProcessor = useFrameProcessor((frame) => {
'worklet'
runAsync(frame, () => {
'worklet'
detectFaces(
frame,
handleDetectionWorklet, {
// detection settings
}
)
})
}, [handleDetectionWorklet])
return (
<View style={{ flex: 1 }}>
{!!device? <Camera
style={StyleSheet.absoluteFill}
device={device}
frameProcessor={frameProcessor}
/> : <Text>
No Device
</Text>}
</View>
)
}
from react-native-vision-camera-face-detector.
The problem is you're missing processNestedWorklets
in babel.
Thake a look here.
from react-native-vision-camera-face-detector.
thanks,
this is my new babel config
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['react-native-worklets-core/plugin'],
[
'react-native-reanimated/plugin',
{
processNestedWorklets: true
}
],
],
};
but i still have the same issue
Env:
- "react-native-reanimated": "^3.4.2",
- "react-native-vision-camera": "^3.9.0",
- "react-native-vision-camera-face-detector": "^1.2.3",
- "react-native": "0.72.3",
any other suggestions ?
from react-native-vision-camera-face-detector.
i was need a --reset-cache, :)
thank 4 your help
from react-native-vision-camera-face-detector.
one last question please,
i wanna plot a green faceRect on the detected face ;
const onFacesDetected = (result: DetectionResult) => {
if ( Object.keys(result.faces).length === 0) {
setFaceDetected(false);
return;
}
setFaceDetected(true);
drawFaceRect(result.faces['0'].bounds.centerX, result.frame);
};
const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;
const drawFaceRect = (face: any, frame:any) => {
rect.current?.setNativeProps({
width: face.bounds.width * (deviceWidth/frame.width),
height: face.bounds.height * (deviceHeight/frame.height),
top: face.bounds.top * (deviceHeight/frame.height),
left: face.bounds.left * (deviceWidth/frame.width),
});
};
is this code is correct
from react-native-vision-camera-face-detector.
In my local tests (and knowing that vision camera still have an orientation issue) I had to add some platform specific code, here's my current code:
type FacePosType = {
faceW: number
faceH: number
faceX: number
faceY: number
}
function calcFacePosition(
bounds: Bounds,
frame: FrameData
): FacePosType {
const orientation = ( () => {
switch ( frame.orientation ) {
case 'portrait': return 0
case 'landscape-left': return 90
case 'portrait-upside-down': return 180
case 'landscape-right': return 270
}
} )()
const degrees = ( orientation - 90 + 360 ) % 360
let scaleX = 0
let scaleY = 0
if ( !isIos && (
degrees === 90 ||
degrees === 270
) ) {
// scale is inverted because of vison camera orientation issue
scaleX = windowWidth / frame.height
scaleY = windowHeight / frame.width
} else {
scaleX = windowWidth / frame.width
scaleY = windowHeight / frame.height
}
const faceW = ( bounds.right - bounds.left ) * scaleX
const faceH = ( bounds.bottom - bounds.top ) * scaleY
const faceX = ( () => {
const xPos = bounds.left * scaleX
if ( isIos ) return xPos
// invert x pos on android
return windowWidth - ( xPos + faceW )
} )()
return {
faceW,
faceH,
// horizonally face center
faceX: faceX + ( faceW / 2 ),
// vertically face center
faceY: bounds.top * scaleY
}
}
Closing issue as original problem is solved.
from react-native-vision-camera-face-detector.
Related Issues (20)
- can i set face detector as id for the user like face recognition ? HOT 1
- example for face marker HOT 2
- How to render face landmarks HOT 1
- usereff getting typescript error
- Original 'Frame' HOT 3
- [QUESTION] Is this able to detect real human face? HOT 4
- camera mount error [unknown/unknown: [unknown/unknown] Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29] HOT 3
- [QUESTION] detected half face ? HOT 2
- Face always return empty object after upgrade vision camera to 4.0.0-beta.5 HOT 7
- [BUG] undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[10], "react-native-vision-camera-face-detector").Camera HOT 5
- [QUESTION] crop image by bounding box HOT 2
- [QUESTION] Store face attributes/embeddings? HOT 2
- [BUG] Inconsistent face detection HOT 5
- [BUG] Plugin with id 'kotlin-android' not found. HOT 9
- [QUESTION] x/y props not found on face bounds HOT 9
- [BUG] Downscaled face boundaries with lower photoResolution HOT 5
- How can I still operate on the Frame? HOT 5
- [BUG] Error when running build for Android HOT 2
- [BUG] Pixel 7a detected face boundaries not correct HOT 2
- Pass detection options inside `initFrameProcessorPlugin` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-vision-camera-face-detector.