Vue js and media recorder library Zoom in and out not working smooth in iPhone

[vishal2995]

I have a video recording feature using vue js and media recorder library. I have a recordScreen component. I have make the code with applyConstraints.

 <v-btn @click="handleZoomChange(2)">2</v-btn>
 <v-btn @click="handleZoomChange(4)">4</v-btn>
 
 async handleZoomChange(zoomLevel) {
    await this.core.setZoom(zoomLevel);
},

it calls the storyCore.js file's setZoom method.

async setZoom(targetZoomLevel) {

        const currentZoom = this.zoomLevel;
        const zoomStep = (targetZoomLevel - currentZoom) / 10;  // Control the speed of zoom transition here

        const applyZoom = async () => {
            this.zoomLevel += zoomStep;
            
            // If the zoom is close enough to the target, set it to the target zoom level and stop.
            if (Math.abs(this.zoomLevel - targetZoomLevel) < Math.abs(zoomStep)) {
                this.zoomLevel = targetZoomLevel;
            }

            if (this.stream && this.isZoomSupported) {
                this.stream.getVideoTracks().forEach(track => {
                    track.applyConstraints({
                        advanced: [{ zoom: parseFloat(this.zoomLevel.toFixed(1)) }],
                    });
                });
            }

            // Continue animating if we haven't reached the target zoom level.
            if (this.zoomLevel !== targetZoomLevel) {
                requestAnimationFrame(applyZoom);
            }
        };

        applyZoom();  // Start the animation
 }

This works fine and zooms smoothly on android phone. But in iPhone idk somewhat it feels like it has zoom in and zoom out a sudden issue and zoom in and zoom out works but in sudden not smooth.