WebRTC Microphone Audio AnalyserNode not working on iOS11

Hi, all. New to the forums so I apologize if I forget something.

I'm currently trying to use getUserMedia to access the microphone on my iPhone and then use an AnalyserNode on the AudioContext to analyse that data during runtime. I have it working on everything except my iPhone, including Chrome, Firefox, Edge, chrome on Android device. The problem comes when I try to call the get functions to store the data in the arrays. They all come up with zeros in the arrays even though the audio is being input from the microphone and output through the speakers. I have also tried to store the data from the stream, attach it to an audio element, and analyse the playback using that element data but it yields the same results. This is the basics of what I'm doing:

function startRecord(){
     navigator.mediaDevices.getUserMedia({ audio: true })
          .then(function(stream){
      
          window.stream = stream;
          audioElement.srcObject = stream; //html audio element
          track = stream.getTracks()[0];


          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
          source = audioCtx.createMediaStreamSource( stream );
          dest = audioCtx.createMediaStreamDestination();
          analyser = audioCtx.createAnalyser();
          gainNode = audioCtx.createGain();


          analyser.fftSize = 2048;
          bufferLength = analyser.frequencyBinCount;


          floatFreqArray = new Float32Array(bufferLength);
          byteFreqArray = new Uint8Array(bufferLength);
          floatTimeArray = new Float32Array(bufferLength);
          byteTimeArray = new Uint8Array(bufferLength);


         analyser.getFloatFrequencyData(floatFreqArray); // returns empty arrays
         analyser.getByteFrequencyData(byteFreqArray); // returns empty arrays
         analyser.getFloatTimeDomainData(floatTimeArray); // returns empty arrays
         analyser.getByteTimeDomainData(byteTimeArray); // returns empty arrays


          source.connect(analyser);
          analyser.connect(gainNode);
          gainNode.connect(dest);


          requestAnimationFrame( loop );
     })
          .catch(logError);
}

function loop(){
     requestAnimationFrame( loop );
     analyser.getFloatFrequencyData(floatFreqArray); // returns empty arrays
     analyser.getByteFrequencyData(byteFreqArray); // returns empty arrays
     analyser.getFloatTimeDomainData(floatTimeArray); // returns empty arrays
     analyser.getByteTimeDomainData(byteTimeArray); // returns empty arrays
}

I call the 4 functions get functions in the requestAnimationFrame as well but there values never change like it does on Chrome or Firefox or Edge. I have just a basic html5 button to call the startRecord function. On my iPhone it recieves the microphone stream, and outputs it back out to my speakers which is great. But, the analyser doesn't get any frequency or waveform data in the arrays that I can use they just remain blank. I'm not sure if this is a problem in webkitAudioContext or something else. Any help is appreciated. Thank you.