Camera preview not going to back in Ionic Capacitor 6 - Angular
See original GitHub issueThis plugin does not seem to work correctly with the latest Ionic (6.17.1) version. The camera preview is always on top of my HTML even though I have set the toBack property.
When I set the previewDrag property to true I can drag the preview around, and I can confirm that my content is below the camera preview.
toBack does seem to work correctly on previous versions (<4) of Ionic. But downgrading is no option for me at the moment
cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
toBack: true, // Allows us to set html elements on top of the camera preview.
tapPhoto: false, // Will not work with toBack set to true. So this must be false.
previewDrag: false,
};
The CCS I use:
html, body, .ion-app, .ion-content {
background-color: transparent;
}
Also setting the transparent property from Typescript after the content has been loaded does not seem to resolve this issue.
Issue Analytics
- State:
- Created 2 years ago
- Comments:12
Top Results From Across the Web
How to fix 'CameraPreview' is missing in type in Ionic?
I wanna build a Ionic camera preview app, and I installed @capacitor-community/camera-preview. I have declared the CameraPreview as Plugin ...
Read more >Ionic camera with overlays - camera view is black
In my Angular 13 + Ionic 6 I have a camera with overlays page using: import { CameraPreview, CameraPreviewOptions ...
Read more >How to use Camera Preview plugin in Ionic with Capacitor v3
Select Angular from the options and wait for some minutes while the project is created. Navigate to the project directory by running the...
Read more >Camera Capacitor Plugin API
Additionally, because the Camera API launches a separate Activity to handle taking the photo, you should listen for appRestoredResult in the App plugin...
Read more >Creating a Custom Camera Preview Overlay with Ionic ...
If you need more control over the image capturing dialog inside your Ionic app, you can use the camera preview plugin which we...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@WouterDoornbos I have managed to solve it by changing code in /ioscapacitor-cordova-ios-plugins/sources/CordovaPluginCameraPreview/CameraPreview.m
` -[self.viewController.view addSubview:self.cameraRenderController.view];
+[self.viewController.view insertSubview:self.cameraRenderController.view atIndex:0]; `
How do we fix this in android?