I have deployed a django App into AWS EC2 in order to recording audio from a speaker. Here is my code for recording audio stream;

let log = console.log.bind(console),
id = val => document.getElementById(val),
ul = id('ul'),
gUMbtn = id('gUMbtn'),
start = id('start'),
stop = id('stop'),
stream,
recorder,
counter=1,
chunks,
media;


gUMbtn.onclick = e => {
    let mv = id('mediaVideo'),
        mediaOptions = {            
            audio: {
            tag: 'audio',
            type: 'audio/wav',
            ext: '.wav',
            gUM: {audio: true}
            }
        };
    media = mediaOptions.audio;
    navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
        stream = _stream;
        id('gUMArea').style.display = 'none';
        id('btns').style.display = 'inherit';
        start.removeAttribute('disabled');
        recorder = new MediaRecorder(stream);
        recorder.ondataavailable = e => {
            chunks.push(e.data);
            if(recorder.state == 'inactive'){
                
                makeLink();
            }  
        };
        log('got media successfully');
    }).catch(log);
}

start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks=[];
  recorder.start();
}

stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}

function makeLink(){
  let blob = new Blob(chunks, {type: media.type })
    , url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , mt = document.createElement(media.tag)
    , hf = document.createElement('a')
  ;
  
  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.innerHTML = ""; 
  ul.appendChild(li); 
  
}

When I run that code in the server, it said "Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')"

If someone has experienced this before, please give me a hand!