Why does video volume goes down after mic permission is granted on iOS browser?

Background

I am building a web app where users can talk to a microphone and watch dynamic video that changes depending on what they say. Here is a sample flow:

1. User accesses the page
2. Mic permission popup appears, user grants it
3. User presses start buttton, standby video starts playing and mic turns on
4. User speaks something, the speech gets turned to text, analyzed, and based on that, the <video> src changes
5. The new video plays, mic turns on, the loop continues.

Problem

The problem in iOS is that volume goes down dramatically to a level where it is hard to hear on max volume if mic access is granted. iPhone's volume up/down buttons don't help much either. That results in a terrible UX. I think the OS is forcefully keeping the volume down, but I could not find any documentation about it. On the contrary, if mic permission not granted, the volume does not change, video plays in a normal volume.

Question

Why does it happen and what can I do prevent volume going down automatically? Any help would be appreciated. This will not happen in PC(MacOS, Windows) or Android OS. Has anyone had any similar experience before?

Context

For context:

• I have two <video> tags(positioned:absolute, with and height 100%) that are switched(by toggling z-indexs) to appear one on top of the other. This is to hide load, buffer and black screen from the user for better UX. If the next video is loaded and can play, then they are switched places.
• both <video> tags have playsinline to enable inline play as required by webKit.
• both <video> tags start out muted, muted is removed after play starts.
• video.play() is initiated after user grants mic permission

Tech stack

• NextJS with Typescript, latest versions
• Testing on latest Chrome and Safari on iOS 16 fully updated