Comments (11)
I am also facing this issue with iPad Pro 10.5 inch(17.4.1) in front camera, for back camera it is working fine and i also tested with android 12 (vivo s1 pro) it is working good.
const device = useCameraDevice(state.position);
const format = useCameraFormat(device, [
{photoAspectRatio: 4 / 3},
{videoAspectRatio: 4 / 3},
{
photoResolution: {
height: 520,
width: 390,
},
},
{
videoResolution: {
height: 520,
width: 390,
},
},
]);
const CaptureImage = async () => {
const photo = await cameraRef.current?.takePhoto();
console.log(photo);
setState(prev => ({
...prev,
url: photo?.path,
}));
};
return (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<View style={{flex: 1}}>
<Camera
ref={cameraRef}
photo
isActive
format={format}
device={device}
style={{
// height: 520,
// width: 390,
aspectRatio: 3 / 4,
}}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
}}>
<Button title="Capture" color={'green'} onPress={CaptureImage} />
<Button
title="Switch"
color={'red'}
onPress={() => {
setState(prev => ({
...prev,
position: prev.position == 'front' ? 'back' : 'front',
}));
}}
/>
</View>
</View>
);
}
from react-native-vision-camera.
Hey!
Preview is a video-stream, so it uses the aspect ratio from videoResolution
/videoAspectRatio
in the Format.
You could prioritize video aspect ratio by moving it up, but then the photo still looks different.
I guess some photos just have a different aspect ratio for the photos stream or the video stream.
Does it look proper when you set both photoAspectRatio
and videoAspectRatio
to 4 / 3
? Remove the fps
from the filter as well, that may exclude some filters as it is spot 1 (highest priority)
from react-native-vision-camera.
I removed all filters, only put in a videoAspectRatio
and nothing changes, also tried combinations of just photoAspectRatio
and flipping their order.
It just feels like resizeMode='contain'
is hard coded (somewhere) to 4/3 ish.
I think after all this testing, im just going to use resizeMode='cover'
(or really just remove the prop as its the default), as that seems like what all example apps use and its fairly close.
TL;DR
After lots of testing i think best practices with v4 is use no resizeMode
(aka 'cover'), and ensure that the Preview's <View>
's aspect ratio is the same as your photo format.
And maybe recommend to delete this prop since it doesn't seem to do much with v4 just causes confusion? Or I'm still doing something wrong.
from react-native-vision-camera.
And maybe recommend to delete this prop since it doesn't seem to do much with v4 just causes confusion?
Not true. On iOS it works fine. Also it does change behaviour on Android. Why would I delete that prop?
from react-native-vision-camera.
Seems related to this issue: #2845
from react-native-vision-camera.
same issue, in cover mode, the preview size is slightly larger than the actual photo size. How to solve this problem?
from react-native-vision-camera.
from react-native-vision-camera.
I am facing a similar situation. I want to use photoAspectRatio 1 / 1 to get a square with the same height and width. Not by using resizeMode="cover" (which is the default).
const Format = useCameraFormat(device, [
{ photoAspectRatio: 1 },
{ photoResolution: "max" },
{ videoAspectRatio: 1 },
]);
<Camera
ref={camera}
style={StyleSheet.absoluteFill}
device={device}
isActive={hasPermission}
photo={true}
/* resizeMode="contain" */
format={Format}
enableZoomGesture={true}
/>
With this, I still receive: LOG Photo width x height: 3696 3024.
from react-native-vision-camera.
from react-native-vision-camera.
@mrousavy I've tried using vision-camera-resize-plugin to resize the frame to a fixed 720px / 720px, but the preview stays exactly the same on Android - it always takes the video stream aspect ratio.
Shouldn't frame processors be able to resize & crop the frames with no limitations?
from react-native-vision-camera.
from react-native-vision-camera.
Related Issues (20)
- 🐛 Fatal Error on App Initialization: IllegalArgumentException - width must be positive in CameraDeviceDetails.getFormats HOT 1
- 🔧 v4.5.3 fails to build on Android - jetified-camera-core-1.5.0-alpha01/jni/riscv64/libimage_processing_util_jni.so is not an ABI HOT 12
- 🐛 TakePhoto() doesn't work with Android Emulator (Pixel 4 API 28, Pixel 4 API 31, Pixel 8 API 31) HOT 7
- ✨ Able to use this library detect QR code from the image HOT 3
- 🐛 Issue launching camera on iOS HOT 1
- 🔧 Unable to find a specification for `react-native-worklets-core` depended upon by `VisionCamera/FrameProcessors` HOT 3
- 🐛 Audio is not working ^4.5.3 (IOS) HOT 2
- 🔧 could not build Objective-C module 'vision_camera_code_scanner' HOT 2
- 💭 Production Build Error with 4.5.3 HOT 3
- 🔧 Production Build Error with 4.5.3 HOT 5
- ✨ Document Scanner HOT 3
- 🐛 error when trying to upload the app to Play Store v4.5.2 and v4.5.3 HOT 3
- 🐛 V3 не считывает коды Data-Matrix с черным фоном на Android HOT 1
- 💭 react-native-vision-camera | App crashing after setting FPS and applying frameProcessor to Camera HOT 4
- 🐛 Potrait mode video is flipped to wrong direction HOT 1
- 💭 Is it possible to hide your face in a video stream using Vision Camera? HOT 2
- 🐛 runAsync has memory problem HOT 2
- 💭 Is there any difference between using the Camera component directly and creating the ReanimatedCamera component? HOT 1
- ✨ Do we think a LockedCameraCaptureExtension would be possible in React Native? HOT 2
- 🐛 09-20 19:04:14.827 18105 18387 E ImageAnalysisAnalyzer: java.lang.IllegalStateException: maxImages (6) has already been acquired, call #close before acquiring more. HOT 4
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.