|
|
@ -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"; |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
@ -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 */ |
|
|
|