TMarciDev
TMarciDev

Reputation: 131

Why does Safari on iOS re-ask for microphone permission after one minute even if I'm browsing the same tab without reloading it?

In the iOS mobile Safari browser, the microphone permission prompt appears again even after I have already granted it within the same tab session. This happens if the previous recording ended more than 60 seconds ago. If I attempt to record again within a minute after finishing the previous recording, it works without asking for permission again. However, if more than a minute passes, the browser requests microphone permission again.

I have a basic audio recorder and visualizer React component:

  const startRecording = async () => {
    navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then((stream) => {
        // Recording the audio
        const recorder = new MediaRecorder(stream, { mimeType: "audio/wav" });
        recorder.ondataavailable = (e) => {
          const audioBlob = e.data;
          sendAudioToServer(audioBlob);
          // stops all tracks so tab record icon disappears in the end
          stream.getTracks().forEach((track) => track.stop());
        };
        recorder.start();
        setRecordStartTime(Date.now());
        setMediaRecorder(recorder);
        setIsRecording(true);

        // Visualizing the audio
        const audioContext = new AudioContext();
        const analyser = audioContext.createAnalyser();
        const microphone = audioContext.createMediaStreamSource(stream);

        analyser.smoothingTimeConstant = 0.8;
        analyser.fftSize = 1024;
        microphone.connect(analyser);

        const interval = setInterval(() => {
          const array = new Uint8Array(analyser.frequencyBinCount);
          analyser.getByteFrequencyData(array);
          setFrequencyArray(array);
        }, visualisationRefreshRate);
        setAnalyserInterval(interval);
      })
      .catch(() => {
        stopParentRecording({ status: "failedMic" });
      });
  };

  const stopRecording = () => {
    clearInterval(analyserInterval);
    if (mediaRecorder && isRecording) {
      temporarilyBlockHover();
      mediaRecorder.stop();
      setIsRecording(false);
    }
  };

The issue arises when I remove this line of code:

stream.getTracks().forEach((track) => track.stop());

Without this line, the microphone icon next to the browser tab remains visible, indicating that the browser is still recording, even though it's not.

The mic in use icon in a Safari browser

I would like to be able to use the microphone at any time after granting permission once in the session, without seeing the microphone icon after finishing a recording.

I tried accessing the MediaRecorder every 50 seconds to keep the permission active. While this worked, the red microphone icon kept appearing during these intervals for like 3 seconds. This could alarm users, making them think the app is intermittently recording their conversations.

Upvotes: 4

Views: 446

Answers (0)

Related Questions