I am creating a website, which works on all desktop browsers (even Safari), and also on android phones, but when I try to open the site on an iPhone, it shows the given error. enter image description here My mediaRecorder code is as follows -

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
    try {
        recorder = new MediaRecorder(stream);
    } catch (e) {
        console.log(e);
        alert(`Exception while creating MediaRecorder: ${e.toString()}`);
    }
    recorder.chunks = []

    recorder.ondataavailable = e => {
        recorder.chunks.push(e.data);
    }

    recorder.onstop = () => {
        blob = new Blob(recorder.chunks);
    }

    recorder.onstart = () => {
        mic_callbacks = {
            'resume': () => {
                recorder.resume()
            },
            'pause': () => {
                recorder.pause()
            }
        }
    }

    recorder.start(1000)
    recorder.pause()

}).catch(console.error);

if you want to see the error head on the website is located at https://hitokara.org.in/p/skyfall