I am currently using the Capacitor CameraPreview Library to access the camera functions of the device. However, I have encountered a strange issue where the camera buttons overlap with the preview when exporting to an android device. This issue seems to only occur on android devices, as it works fine when testing on Chrome (or even Chrome's mobile aspect ratio simulation).
Below is the code that controls the functionality:
Component
cameraStart() {
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'rear',
parent: 'cameraPreview',
className: 'cameraPreview'
}
CameraPreview.start(cameraPreviewOptions)
this.cameraActive = true
}
async stopCamera() {
await CameraPreview.stop()
this.cameraActive= false
}
async captureImage() {
const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
quality:90
}
const result = await CameraPreview.capture(cameraPreviewPictureOptions)
let image = `data:image/jpeg;base64,${result.value}`
this.user.person.photo = image
this.imgUploader.selectProfilePic(this.imgUploader.dataURLtoFile(image, `pp-img_${new Date().getTime()}`), this.user.firebase_id)
this.stopCamera()
}
async turnFlashOn() {
const flashModes = await CameraPreview.getSupportedFlashModes();
this.flashActive = !this.flashActive
const cameraPreviewFlashMode: CameraPreviewFlashMode = this.flashActive ? 'torch' : 'off'
CameraPreview.setFlashMode(cameraPreviewFlashMode);
}
flipCamera() { CameraPreview.flip() }
Document
<ion-header *ngIf="!cameraActive">
<ion-toolbar>
<ion-buttons slot="start" (click)="dismiss()">
<ion-button>
<ion-icon slot="icon-only" name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>{{ 'image-editing' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="cameraPreview" class="cameraPreview">
<div *ngIf="cameraActive">
<ion-button color="light" (click)="stopCamera()" expand="block" id="close">
<ion-icon name="arrow-undo" slot="icon-only"></ion-icon>
</ion-button>
<ion-button color="light" (click)="captureImage()" expand="block" id="capture">
<ion-icon name="camera" slot="icon-only"></ion-icon>
</ion-button>
<ion-button color="light" (click)="flipCamera()" expand="block" id="flip">
<ion-icon name="camera-reverse" slot="icon-only"></ion-icon>
</ion-button>
<ion-button color="light" (click)="turnFlashOn()" expand="block" id="flash">
<ion-icon *ngIf="flashActive" color="warning" name="flash" slot="icon-only"></ion-icon>
<ion-icon *ngIf="!flashActive" name="flash-off" slot="icon-only"></ion-icon>
</ion-button>
</div>
</div>
</ion-content>
Sass
img {
width: 100%;
height: auto;
}
ion-content {
--background: transparent!important;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 10%
}
.cameraPreview {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
.image-overlay {
z-index: 1;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
#capture {
position: absolute;
bottom: 25px;
left: calc(50% - 37.5px);
width: 72px;
height: 72px;
z-index: 11;
}
#close {
position: absolute;
bottom: 30px;
left: calc(50% - 150px);
width: 50px;
height: 50px;
z-index: 11;
}
#flip {
position: absolute;
bottom: 30px;
left: calc(50% + 97px);
width: 50px;
height: 50px;
z-index: 11;
}
#flash {
position: absolute;
top: 30px;
left: calc(50% + 97px);
width: 50px;
height: 50px;
z-index: 11;
}
#close::part(native) {
border-radius: 30px;
}
#capture::part(native) {
border-radius: 45px;
}
#flip::part(native) {
border-radius: 30px;
}
#flash::part(native) {
border-radius: 30px;
}
Here are screenshots demonstrating the issue:
https://i.stack.imgur.com/X8xrw.jpg
https://i.stack.imgur.com/xpmCZ.jpg
https://i.stack.imgur.com/ADHu9.jpg
Also, note that the flash feature does not appear to be functioning correctly, but I am uncertain if this is due to the library or a mistake in my implementation.