🐛 Camera Preview orientation does not update when screen orientation locks #3323
Labels
🐛 bug
Something isn't working
Comments
|
Guten Tag, Hans here 🍻 Thanks for your detailed report! It looks like a valid issue with ze camera preview orientation. Since you provided a clear reproduction path and relevant logs, mrousavy can take a look at it. Please allow some time for mrousavy to review and address this, as he is maintaining ze project in his free time. If you have any further information or updates, feel free to share them!
|
|
I'm using latest |
|
We are also using expo-screen-orientation, and we are experiencing abnormal rotation of the preview on iOS devices. What's happening?You can reproduce it by running the example app like so:
Reproduceable CodeWe are using expo-sensors to detect screen tilt and expo-screen-orientation to lock the screen orientation. App.jsimport React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, Platform } from "react-native";
import {
Camera,
useCameraPermission,
useCameraDevice,
} from "react-native-vision-camera";
import {
Orientation,
OrientationLock,
getOrientationLockAsync,
lockAsync,
} from "expo-screen-orientation";
import { Accelerometer } from "expo-sensors";
const getNextOrientationFromAccelerometerEvent = (x, y, z) => {
// when the device is flat, keep the current orientation
if (Math.abs(z) > 0.5) {
return undefined;
}
if (x >= 0.75) {
return Orientation.LANDSCAPE_LEFT;
}
if (x <= -0.75) {
return Orientation.LANDSCAPE_RIGHT;
}
if (y >= 0.75) {
return Orientation.PORTRAIT_UP;
}
if (y <= -0.75) {
return Orientation.PORTRAIT_DOWN;
}
return undefined;
};
// custom hook to get the current orientation of the device
const useCurrentOrientation = () => {
const [orientation, setOrientation] = useState(Orientation.PORTRAIT_UP);
useEffect(() => {
Accelerometer.setUpdateInterval(16);
console.log("register subscription");
const subscription = Accelerometer.addListener((event) => {
const nextOrientation = getNextOrientationFromAccelerometerEvent(
event.x,
event.y,
event.z,
);
if (nextOrientation) {
setOrientation(nextOrientation);
}
});
return () => {
console.log("remove subscription");
Accelerometer.removeSubscription(subscription);
};
}, []);
return orientation;
};
const getLockOrientation = (orientation) => {
switch (orientation) {
case Orientation.PORTRAIT_UP:
return OrientationLock.PORTRAIT_UP;
case Orientation.PORTRAIT_DOWN:
return OrientationLock.PORTRAIT_UP;
case Orientation.LANDSCAPE_RIGHT:
return Platform.OS === "ios"
? OrientationLock.LANDSCAPE_RIGHT
: OrientationLock.LANDSCAPE_LEFT;
case Orientation.LANDSCAPE_LEFT:
return Platform.OS === "ios"
? OrientationLock.LANDSCAPE_LEFT
: OrientationLock.LANDSCAPE_RIGHT;
default:
return undefined;
}
};
const App = () => {
const device = useCameraDevice("back");
const { hasPermission, requestPermission } = useCameraPermission();
const orientation = useCurrentOrientation();
useEffect(() => {
if (!hasPermission) {
requestPermission();
}
}, [hasPermission]);
// lock screen orientation based on the current orientation
useEffect(() => {
const f = async () => {
console.log("orientation changed", orientation);
const lockOrientation = await getOrientationLockAsync();
const nextLockOrientation = getLockOrientation(orientation);
if (nextLockOrientation && lockOrientation !== nextLockOrientation) {
// emulates the behavior of production apps
setTimeout(() => {
lockAsync(nextLockOrientation);
}, 500);
}
};
f();
}, [orientation]);
if (!hasPermission)
return (
<View>
<Text>Camera permission required</Text>
</View>
);
if (device == null)
return (
<View>
<Text>No camera device found</Text>
</View>
);
return (
<Camera style={StyleSheet.absoluteFill} device={device} isActive={true} />
);
};
export default App;package.json{
"name": "vision-camera-poc-2",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"ios": "expo run:ios --device",
"android": "expo run:android"
},
"dependencies": {
"@react-navigation/native": "^7.0.9",
"@react-navigation/native-stack": "^7.1.10",
"expo": "~50.0.17",
"expo-screen-orientation": "~6.4.1",
"expo-sensors": "~12.9.1",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-orientation-locker": "^1.7.0",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "4",
"react-native-vision-camera": "^4.6.3"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}Relevant log outputCamera DeviceiPhone11 (iOS 16.6.1) DeviceVisionCamera Version4.6.3 RPReplay_Final1733896819.MP4 |
|
After several attempts I found a solution that helped me: Basically, you need to rerender the Camera component after handling the OrientationChangeListener (you can also change the Camera prop "key"). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What's happening?
I have a following scenario in my application:
You can reproduce it by running the example app like so;
All videos are recorded properly, in landscape mode. I'm having issues only with preview orientation.
Sometimes camera preview flips with screen locking but most of the time it stays in previous orientation.
Also if I'll shake device a little orientation change to the right one.
I'm using expo-screen-orientation for locking orientation
Example app:
https://github.com/dawidzawada/camera-bug
Reproduceable Code
Relevant log output
16:19:25.549: [info] 📸 VisionCamera.didSetProps(_:): Updating 19 props: [onPreviewStarted, preview, onViewReady, onPreviewOrientationChanged, cameraId, isMirrored, onError, width, onShutter, onInitialized, onStarted, enableBufferCompression, onStopped, height, onCodeScanned, onOutputOrientationChanged, onPreviewStopped, enableFrameProcessor, isActive] 16:19:25.549: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: portrait... 16:19:25.549: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: portrait... 16:19:25.550: [info] 📸 VisionCamera.configure(_:): configure { ... }: Waiting for lock... 16:19:25.550: [info] 📸 VisionCamera.configure(_:): configure { ... }: Updating CameraSession Configuration... Difference(inputChanged: true, outputsChanged: true, videoStabilizationChanged: true, orientationChanged: true, formatChanged: true, sidePropsChanged: true, torchChanged: true, zoomChanged: true, exposureChanged: true, audioSessionChanged: true, locationChanged: true) 16:19:25.551: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Input Device... 16:19:25.551: [info] 📸 VisionCamera.configureDevice(configuration:): Configuring Camera com.apple.avfoundation.avcapturedevice.built-in_video:0... 16:19:25.553: [info] 📸 VisionCamera.configureDevice(configuration:): Successfully configured Input Device! 16:19:25.553: [info] 📸 VisionCamera.configureOutputs(configuration:): Configuring Outputs... 16:19:25.553: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: portrait... 16:19:25.553: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: portrait... 16:19:25.553: [info] 📸 VisionCamera.configureOutputs(configuration:): Successfully configured all outputs! 16:19:25.553: [info] 📸 VisionCamera.setTargetOutputOrientation(_:): Setting target output orientation from device to device... 16:19:25.662: [debug] 📸 VisionCamera.deviceOrientation: Device Orientation changed from portrait -> landscapeLeft 16:19:25.662: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: landscapeRight... 16:19:25.824: [info] 📸 VisionCamera.init(frame:session:): Preview Layer started previewing. 16:19:25.824: [info] 📸 VisionCamera.configure(_:): Beginning AudioSession configuration... 16:19:25.824: [info] 📸 VisionCamera.configureAudioSession(configuration:): Configuring Audio Session... 16:19:25.825: [info] 📸 VisionCamera.configure(_:): Committed AudioSession configuration! 16:19:25.829: [info] 📸 VisionCamera.configure(_:): Beginning Location Output configuration... 16:19:25.830: [info] 📸 VisionCamera.configure(_:): Finished Location Output configuration!Camera Device
Device
iPhone 12
VisionCamera Version
4.6.3
Can you reproduce this issue in the VisionCamera Example app?
Yes, I can reproduce the same issue in the Example app here
Additional information
The text was updated successfully, but these errors were encountered: