diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue index 0e6eed2c..35974cab 100644 --- a/src/views/ContactQRScanShowView.vue +++ b/src/views/ContactQRScanShowView.vue @@ -234,6 +234,7 @@ export default class ContactQRScanShow extends Vue { // Add property to track if we're on desktop private isDesktop = false; + private isFrontCamera = false; async created() { try { @@ -699,16 +700,6 @@ export default class ContactQRScanShow extends Vue { document.addEventListener("resume", this.handleAppResume); // Start scanning automatically when view is loaded this.startScanning(); - - // Apply mirroring after a short delay to ensure video element is ready - setTimeout(() => { - const videoElement = document.querySelector( - ".qr-scanner video", - ) as HTMLVideoElement; - if (videoElement) { - videoElement.style.transform = "scaleX(-1)"; - } - }, 1000); } beforeDestroy() { @@ -855,6 +846,8 @@ export default class ContactQRScanShow extends Vue { onCameraOn(): void { this.cameraState = "active"; this.isInitializing = false; + this.isFrontCamera = this.preferredCamera === "user"; + this.applyCameraMirroring(); } onCameraOff(): void { @@ -900,6 +893,8 @@ export default class ContactQRScanShow extends Vue { toggleCamera(): void { this.preferredCamera = this.preferredCamera === "user" ? "environment" : "user"; + this.isFrontCamera = this.preferredCamera === "user"; + this.applyCameraMirroring(); } private handleError(error: unknown): void { @@ -926,14 +921,16 @@ export default class ContactQRScanShow extends Vue { ); } - // Update the computed property for camera mirroring - get shouldMirrorCamera(): boolean { - // On desktop, always mirror the webcam - if (this.isDesktop) { - return true; + // Add method to apply camera mirroring + private applyCameraMirroring(): void { + const videoElement = document.querySelector( + ".qr-scanner video", + ) as HTMLVideoElement; + if (videoElement) { + // Mirror if it's desktop or front camera on mobile + const shouldMirror = this.isDesktop || (this.isFrontCamera && !this.isDesktop); + videoElement.style.transform = shouldMirror ? "scaleX(-1)" : "none"; } - // On mobile, mirror only for front-facing camera - return this.preferredCamera === "user"; } } @@ -948,8 +945,9 @@ export default class ContactQRScanShow extends Vue { position: relative; } +/* Remove the default mirroring from CSS since we're handling it in JavaScript */ :deep(.qr-scanner video) { - transform: scaleX(-1); + transform: none; } /* Ensure the canvas for QR detection is not mirrored */