ngx-scanner

ngx-scanner copied to clipboard

Hi sorry to ask another question again, I am using this scanner in a page on it's own, so is it possible for the scanner to emit a value or true when the camera is loaded completely?

Because if not the user will just see a white screen while waiting for the camera to load, I want to show a loading spinner while waiting for the camera to finish loading so the user knows that the camera is loading and not broken..

I have seen "Advanced Usage" in the Wiki here but can't seem to find any Attributes to match my criteria... Thank you

I'm also curious to know if something like this exists

Sort of a hack but if you're using autostart, you can lookup the isAutostarting value using an interval:

import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
import { Result } from '@zxing/library';
import { MatDialogRef } from "@angular/material/dialog";
import { ZXingScannerComponent } from "@zxing/ngx-scanner";

@Component({
    selector: "gmi-code-scanner-modal",
    templateUrl: "code-scanner-modal.template.html",
    styleUrls: ["code-scanner-modal.style.scss"],
    encapsulation: ViewEncapsulation.None
})
export class CodeScannerModalComponent implements OnInit, OnDestroy {
    public loading = false;
    public loadingInterval: any;

    @ViewChild(ZXingScannerComponent)
    public zXingScannerComponent: ZXingScannerComponent;

    constructor(
        private matDialogRef: MatDialogRef<CodeScannerModalComponent, string | null>
    ) {
    }

    public ngOnInit(): void {
        // Hack to know is the scanner is loading or not.
        this.loadingInterval = setInterval(() => {
            this.loading = this.zXingScannerComponent?.isAutostarting ?? true;
        }, 100);
    }

    public ngOnDestroy() {
        if (this.loadingInterval) {
            clearInterval(this.loadingInterval);
        }
    }

    public clickCancel() {
        this.matDialogRef.close(null);
    }

    public onScanned(scan: string) {
        if (scan?.length) {
            this.matDialogRef.close(scan);
        }
    }
}