Use JavaScript to AutoClick Button

Question

I have the following javascript code, which takes a photo from a webcam and compares it with another photo stored on the server. What I am trying to do is to take the photo from the webcam automatically, without waiting for the user to click on the take photo button. I am just using

document.getElementById('take_snap').click()

but this code is doing nothing. When I click on the button manually my code works perfectly, but the above code doesn't work. This is my code:

const imageUploads = document.getElementById('take_snap')
const image_url =       document.getElementById('results')
var pid=$('#student_id').val();
 
Promise.all([
  faceapi.nets.faceRecognitionNet.loadFromUri('models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('models'),
  faceapi.nets.ssdMobilenetv1.loadFromUri('models')
]).then(start)

async function start() {
  const container = document.createElement('div')
  container.style.position = 'relative'
  document.body.append(container)
  const labeledFaceDescriptors = await loadLabeledImages()
  const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
  let image
  let canvas
  document.body.append('You can start')
    imageUploads.click();
  
  imageUploads.addEventListener('click', async () => {
 
    if (image) image.remove()
    if (canvas) canvas.remove()
        Webcam.snap( function(data_uri) {
        // display results in page
          document.getElementById('results').innerHTML = 
          '<img src="'+data_uri+'" id="img_tag"/>';
        var filename=  upload_img(data_uri)
         
         document.getElementById('results').innerHTML = 
           '<img src="upload/'+filename+'" id="img_tags"/>';
           

      } );
      
 console.log( document.getElementById('img_tags').getAttribute('src'));
              image = await faceapi.fetchImage(document.getElementById('img_tags').getAttribute('src'))
         
    container.append(image)
     
    canvas = faceapi.createCanvasFromMedia(image)
 
    container.append(canvas)

    const displaySize = { width: image.width, height: image.height }
    faceapi.matchDimensions(canvas, displaySize)
    const detections = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
 
    const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))
//console.log(  'descriptor'+d.descriptor)
        console.log(detections)
    results.forEach((result, i) => {console.log('iiiiiiiiiiiii'+i)
      const box = resizedDetections[i].detection.box
      const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
console.log('resultttt'+ result.toString())
if(result.toString()!=null || result.toString()!='unknown')
{
    $('#tamam').show();
    
 
}
if(result.toString().indexOf('unknown'))
{
    
    $('#tamam').hide();
    
}
      drawBox.draw(canvas)
    })
  })
}

as I mentioned above the code works fine when I click on the button manually but it seems that this code not working when using autoclick.

imageUploads.click();