I am trying to realize the same functionnality as in Facebook or Instagram:
Preview the image taken by the camera instantly
At this point, my taken is correctly taken when this function is called :
takePicture = async function() {
if (this.camera && this.state.isConnected === true) {
const options = { quality: 0, base64: false };
const data = await this.camera.takePictureAsync(options);
this.toLoading(data.uri);
}
};
As displayed here, camera quality option is set to 0 to assure that the issue isn't caused by image processing.
I also have set my RNCamera props to lower as so :
autoFocus={"off"}
skipProcessing={true}
type={"back"}
flashMode={"off"}
zoom={0}
whiteBalance={"auto"}
ratio={"16:9"}
I tested this on both android and ios and even if ios seems to execute this a little bit faster, it still doesn't do it instantly.
Has anyone been able to reproduce the facebook/instagram camera preview with react native? I have been looking on the github repo and there seem to be a lot of people in my situation but still no resolution. I have also noted that people have tried to eject expo projects to go on native code but the latency is still present.
To access camera in react native you need to import the expo-camera SDK, and Camera permissions from expo-permissions.
import { CameraRoll } from 'react-native'; ... ... await CameraRoll. saveToCameraRoll(photo. uri);
There is now a skipProcessing flag which is meant to help the image display faster
this.camera.takePictureAsync({skipProcessing: true})
The documentation for SDK 30 says this may cause the image to be rotated incorrectly.
https://docs.expo.io/versions/latest/sdk/camera
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With