Browse Source

TEST: platform- and camera-specific mirroring

pull/135/head
Jose Olarte III 7 days ago
parent
commit
e839997f91
  1. 34
      src/views/ContactQRScanShowView.vue

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

Loading…
Cancel
Save