diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue index 85b032c2..65257a15 100644 --- a/src/views/ContactQRScanShowView.vue +++ b/src/views/ContactQRScanShowView.vue @@ -144,6 +144,7 @@ { + const videoElement = document.querySelector('.qr-scanner video') as HTMLVideoElement; + if (videoElement) { + videoElement.style.transform = 'scaleX(-1)'; + } + }, 1000); } beforeDestroy() { @@ -926,6 +939,22 @@ export default class ContactQRScanShow extends Vue { stack: error.stack, }); } + + // Add method to detect desktop browser + private detectDesktopBrowser(): boolean { + const userAgent = navigator.userAgent.toLowerCase(); + return !/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); + } + + // Update the computed property for camera mirroring + get shouldMirrorCamera(): boolean { + // On desktop, always mirror the webcam + if (this.isDesktop) { + return true; + } + // On mobile, mirror only for front-facing camera + return this.preferredCamera === "user"; + } } @@ -933,4 +962,18 @@ export default class ContactQRScanShow extends Vue { .aspect-square { aspect-ratio: 1 / 1; } + +/* Update styles for camera mirroring */ +:deep(.qr-scanner) { + position: relative; +} + +:deep(.qr-scanner video) { + transform: scaleX(-1); +} + +/* Ensure the canvas for QR detection is not mirrored */ +:deep(.qr-scanner canvas) { + transform: none; +}