How access the microphone in IOS 17 for web or pwa applications in nextjs?

Question

I have a app which developed by nextjs12; in my application i have a chatroom, which i used rockedchat for that and for sending voices due the chat i need to access the device's microphone, in Chrome and Firefox everything work fine, but in safari ...

in some ios devices i got the request from app in safari, but in some devices specially the newest like ios17 I don't get the microphone request at all. another problem is that, in some device it work in both pwa and web version but in some of them it just work in safari but pwa has still problem. I hope you guys help me kindly.

my microphone request which i call it onClick of the voice button :

async function requestRecorder() {
  if (!navigator.mediaDevices || !window.MediaRecorder) {
    console.error("Media devices or MediaRecorder not supported on this browser.");
    return null;
  }

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return new MediaRecorder(stream);
  } catch (error) {
    console.error("Error accessing the microphone:", error);
    // Handle the error gracefully here
    return null;
  }
}

and my next.config file:

module.exports = withPWA(
  withImages({
    pwa:{
      dest: 'public'
    },

    trailingSlash: true,
    reactStrictMode: true,

    eslint: {
      ignoreDuringBuilds: true,
    },

    devIndicators: {
      buildActivity: false,
    },

    i18n: {
      locales: ['ar'],
      defaultLocale: 'ar',
    },

    exclude: /\.svg$/, // exlude the file or directory from being processed by Next.js or the webpack bundler
    poweredByHeader: false, // by default nextjs sent meta tag (X-Powered-By) --> this meta is shows what technolgy is using in frontend => the default value is next.js
    inlineImageLimit: false,

    webpack: (config) => {
      config.module.rules.push({
        test: /\.svg$/,
        issuer: {
          and: [/\.(js|ts)x?$/],
          // test: /\.(js|ts)x?$/,
        },
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              prettier: false,
              svgo: true,
              svgoConfig: {plugins: [{removeViewBox: false}]},
              titleProp: true,
            },
          },
        ],
      });

      return config;
    },
  }),
);