I'm using canvas in Angular project to capture 4 png images, its taking more time to capture all the 4 images from Android device

Question

I'm using canvas in an Angular project to capture 4 PNG images. Here I'm building the Angular project as a widget using npm run build:widgets, it generates 3 files, one html, CSS and JS file. I'll deploy in S3 and I'll access the html file using Android or iPhone through browser. On iPhone it's capturing the 4 images with 50 milliseconds interval each, as expected but on Android its taking more than 5 seconds to capture all the 4 images. How do I optimize this for Android mobile or should I go with a different approach.

Here is my code, on clicking capture image button, it's capturing 4 images

HTMl :

<canvas class="d-none"></canvas>
<button type="button" (click)="captureImage()">
    CaptureImage
</button>

TS:

canvas: any = document.querySelector('canvas');

 /**
 * Function to capture image
 */
 async captureImage() { 
    this.loader.emit(true);
    // 5 milliseconds timeout added here to resolve the video loading issue in android phones
    setTimeout(()=>{
        this.isCapturing = true;
        this.getAttributes();
        this.canvas.width = (this.video.videoWidth);
        this.canvas.height = (this.video.videoHeight);
        this.imagesArray = [];
        this.phoneAnglesArray = [];
        // minimum resolution 1920 * 1440
        /* if (this.video.videoWidth < 1440 || thi
            s.video.videoHeight < 1920) {
            this.resolutionError.show();
        } */
        if (this.video.videoWidth < 640 || this.video.videoHeight < 480) {
            this.errorMsg = ["The camera does not support the resolution required for calculation"];
            
            this.showError.show();
            // alert("resolutionError");
        } else {
            try {
                let { height, width, benchmark } = canvasSize.maxArea({usePromise: true }).catch(err => { console.log(err)}) 
                let canvasHeight =  this.canvas.height;
                let canvasWidth =  this.canvas.width;
                if(height) { canvasHeight =  this.canvas.height > height ? height: this.canvas.height }
                if(width) { canvasWidth =  this.canvas.width > width ? width:  this.canvas.width  }
                this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight,
                    0, 0, canvasWidth, canvasHeight);                
                this.phoneAnglesArray.push({
                    x : JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.z))),
                    y : JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.y)))
                });
                // alert('x'+ JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.z))) + 'y' + JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.y))) + 'pax' + this.phoneAngles.z + 'pay' + this.phoneAngles.y);
                console.log(this.canvas.toDataURL('image/png'));
                // alert(this.canvas.toDataURL('image/png'));
                if (this.canvas.toDataURL('image/png')) {
                    this.imagesArray.push(this.canvas.toDataURL('image/png'));
                } else {
                    this.imagesArray.push(null);
                }
                this.captureImageLoop();
            } catch (err) {
                console.log("Error drawing image")
            }
        }
    }, 5);        
};

/**
 * Function to capture images in very 50 milliseconds interval for 3 times
 */
captureImageLoop() {
    let i = 0;
    const captureInterval = setInterval(() => {
        i++
        let { height, width, benchmark } = canvasSize.maxArea({usePromise: true }).catch(err => { console.log(err)});
        let canvasHeight =  this.canvas.height;
        let canvasWidth =  this.canvas.width;
        if(height) { canvasHeight =  this.canvas.height > height ? height: this.canvas.height }
        if(width) { canvasWidth =  this.canvas.width > width ? width:  this.canvas.width  }
        this.phoneAnglesArray.push({
            x : JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.z))),
            y : JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.y)))
        });
        // alert('x'+ JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.z))) + 'y' + JSON.parse(JSON.stringify(Math.floor(this.phoneAngle.y))));

        this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight,
        0, 0, canvasWidth, canvasHeight);
        console.log(this.canvas.toDataURL('image/png'));
        if (this.canvas.toDataURL('image/png')) {
            this.imagesArray.push(this.canvas.toDataURL('image/png'));
        } else {
            this.imagesArray.push(null);
        } 
        if (i ==  this.captureCount) {
            i=0;
            clearInterval(captureInterval);
            console.log('this.imagesArray', this.imagesArray.length, this.phoneAnglesArray.length, this.phoneAnglesArray);                
            this.getMeasurements(this.imagesArray, this.phoneAnglesArray);
            this.isCapturing = false;       
        }
    }, 50); 
}