how to request the microphone access from an iFrame in Nextjs app?

Question

I am developing a chat app to communicate with customers. Here I need audio microphone access to send the voice chat. But as the widget is in iFrame i need to allow microphone permission which is not Working.

export const checkMicrophonePermissions = () => async dispatch => {
          let retval = false;

          await navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => retval = true)
            .catch(err => retval = false);

          dispatch({
              type: MICROPHONE_ACCESS,
              payload: retval
          });
      }

Error

TypeError: Cannot read properties of undefined (reading 'getUserMedia')

f5d2ecf16b8e15.js:1 Recording error: NotAllowedError: Permission denied