feat(qr-code): enhance QR code scanner with camera switching

- Add support for multiple cameras and camera switching in QR code component
- Increase QR code box size from 200x200 to 250x250 for better scanning
- Implement start and stop methods to properly manage scanner lifecycle
- Add buttons for switching camera and stopping scanner in QR code page
- Refactor QR code scanner layout and controls for improved user interaction
- Fix conditional rendering logic for scan and manual entry buttons
- Reset loading state when starting manual code entry to avoid conflicts

Author: EndyKaufman

mobile/src/app/qr-code/ngx-html5-qrcode.component.ts

@@ -2,58 +2,65 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  EventEmitter,
+  Input,
   OnDestroy,
-  OnInit,
-  Renderer2,
-  ViewChild,
   Output,
-  Input,
-  EventEmitter,
+  ViewChild,
 } from '@angular/core';
-import { Html5Qrcode } from 'html5-qrcode';
-import { Html5QrcodeCameraScanConfig } from 'html5-qrcode/esm/html5-qrcode';
+import { CameraDevice, Html5Qrcode } from 'html5-qrcode';
 import { Html5QrcodeResult } from 'html5-qrcode/esm/core';
+import { Html5QrcodeCameraScanConfig } from 'html5-qrcode/esm/html5-qrcode';
 
 @Component({
   selector: 'html5-qrcode',
   template: ` <div #reader id="reader" width="600px"></div> `,
   styles: [],
 })
-export class NgxHtml5QrcodeComponent
-  implements OnInit, AfterViewInit, OnDestroy
-{
+export class NgxHtml5QrcodeComponent implements AfterViewInit, OnDestroy {
   @ViewChild('reader') reader: ElementRef | undefined;
   html5QrCode!: Html5Qrcode;
   cameraId: string = '';
+  cameraIndex = 0;
+  cameras: CameraDevice[] = [];
 
   @Input() useFrontCamera: boolean = false;
   @Input() config: Html5QrcodeCameraScanConfig = {
     fps: 10,
-    qrbox: { width: 200, height: 200 },
+    qrbox: { width: 250, height: 250 },
   };
   @Output() decodedText: EventEmitter<string> = new EventEmitter<string>();
   @Output() decodedResult: EventEmitter<Html5QrcodeResult> =
     new EventEmitter<Html5QrcodeResult>();
 
-  constructor() {}
-
-  ngOnInit(): void {}
-
   ngAfterViewInit() {
     // This method will trigger user permissions
     Html5Qrcode.getCameras()
       .then((devices) => {
-        if (devices && devices.length) {
-          // .. use this to start scanning.
-          this.cameraId = this.useFrontCamera ? devices[1].id : devices[0].id;
-          this.startHtmlQrCode();
-        }
+        this.cameras = devices || [];
+        this.switchCamera(0);
       })
       .catch((err) => {
         console.log(err);
       });
   }
 
+  switchCamera(cameraIndex?: number) {
+    if (this.cameras && this.cameras.length) {
+      if (cameraIndex === undefined) {
+        this.cameraIndex = this.cameraIndex + 1;
+        if (this.cameraIndex > this.cameras.length - 1) {
+          this.cameraIndex = 0;
+        }
+      } else {
+        this.cameraIndex = cameraIndex;
+      }
+      this.cameraId = this.cameras[this.cameraIndex].id;
+      this.stopHtmlQrCode();
+      this.startHtmlQrCode();
+    }
+  }
+
   qrCodeSuccessCallback(decodedText: any, decodedResult: Html5QrcodeResult) {
     /* handle success */
     this.decodedText.emit(decodedText);
@@ -62,10 +69,10 @@ export class NgxHtml5QrcodeComponent
 
   qrCodeErrorCallback(errorMessage: any) {
     /* handle success */
-   // console.error(errorMessage);
+    // console.error(errorMessage);
   }
 
-  startHtmlQrCode() {
+  private startHtmlQrCode() {
     this.html5QrCode = new Html5Qrcode(this.reader?.nativeElement?.id);
 
     this.html5QrCode
@@ -82,13 +89,15 @@ export class NgxHtml5QrcodeComponent
   }
 
   ngOnDestroy() {
+    this.stopHtmlQrCode();
+  }
+
+  private stopHtmlQrCode() {
     this.html5QrCode
-      .stop()
+      ?.stop()
       .then((ignore) => {
         // QR Code scanning is stopped.
       })
-      .catch((err) => {
-        // Stop failed, handle it.
-      });
+      .catch((err) => {});
   }
 }

mobile/src/app/qr-code/qr-code.page.ts

@@ -192,7 +192,24 @@ interface QrCodeData {
         <div style="padding: 20px; text-align: center;">
           @if (showScanner$ | async) {
           <div style="width: 100%; height:100%; ">
-            <html5-qrcode (decodedText)="onDecodedText($event)"></html5-qrcode>
+            <div style="width: 100%; height: 80%;">
+              <html5-qrcode
+                (decodedText)="onDecodedText($event)"
+                style="width: 100%; height: 90%;"
+                #qrcode
+              >
+              </html5-qrcode>
+            </div>
+            <div
+              style="display: flex; justify-content: center;padding-top: 10px; gap: 10px;"
+            >
+              <ion-button size="small" (click)="qrcode.switchCamera()">
+                Switch camera
+              </ion-button>
+              <ion-button size="small" (click)="stopScan()">
+                Stop camera
+              </ion-button>
+            </div>
           </div>
           } @if (isLoading$ | async) {
           <div
@@ -210,27 +227,21 @@ interface QrCodeData {
               </ion-button>
             </ion-card-content>
           </ion-card>
-          } @else { @if ((showScanner$|async)===false) {
-          <ion-button (click)="startScan()">
-            <ion-icon name="scan-outline" slot="start"></ion-icon>
-            Scan QR Code
-          </ion-button>
-          <br />
           } @else {
-          <ion-button (click)="stopScan()">
-            <ion-icon name="scan-outline" slot="start"></ion-icon>
-            Stop scan QR Code
-          </ion-button>
-          <br />
-          }
-          <ion-button
-            (click)="startManualCodeEntry()"
-            fill="outline"
-            style="margin-top: 10px;"
+          <div
+            style="display: flex; justify-content: center;padding-top: 10px; gap: 10px;"
           >
-            <ion-icon name="keypad-outline" slot="start"></ion-icon>
-            Enter Code Manually
-          </ion-button>
+            @if ((showScanner$|async)===false) {
+            <ion-button (click)="startScan()">
+              <ion-icon name="scan-outline" slot="start"></ion-icon>
+              Scan QR
+            </ion-button>
+            }
+            <ion-button (click)="startManualCodeEntry()" fill="outline">
+              <ion-icon name="keypad-outline" slot="start"></ion-icon>
+              Enter Code
+            </ion-button>
+          </div>
           }
         </div>
       </app-explore-container>
@@ -305,7 +316,7 @@ export class QrCodePage {
   }
 
   private link(code: string) {
-    if (this.isLoading$.value || !this.showScanner$.value) {
+    if (this.isLoading$.value) {
       return of(null);
     }
 
@@ -362,6 +373,8 @@ export class QrCodePage {
 
   async startManualCodeEntry() {
     this.showScanner$.next(false);
+    this.isLoading$.next(false);
+
     const alert = await this.alertController.create({
       header: 'Enter Code',
       inputs: [