考试系统增加一个人脸识别登录模块

考试系统基本功能已经实现，还需要增加人脸识别登陆的功能，从chatgpt加了些代码进去，点击人脸识别没有反应
我增加了如下代码：
1.login.html
登录界面增加人脸识别按钮并引用js

<button type="button" id="face-recognition-button" class="btn btn-face float-right">人脸登录</button>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script src="{% static 'js/face_recognition.js' %}"></script>
<script async src="../../static/login/haarcascade_frontalface_default.xml"></script>

2.face_recognition.js
js文件的代码

// face_recognition.js

const knownFaces = ['1001.jpg', '1002.jpg', '1003.jpg'];
let faceIndex = 0;

const recognitionButton = document.getElementById('face-recognition-button');
const faceCascade = new cv2.CascadeClassifier('static/login/haarcascade_frontalface_default.xml');

let cap, stream, context, isRecognizing;

recognitionButton.addEventListener('click', async () => {
  if (isRecognizing) return;
  isRecognizing = true;
  await startCamera();
  setInterval(async () => {
    try {
      const result = await recognizeFace();
      if (result !== null) {
        console.log(result);
        // 自动填入学号并提交表单
        document.getElementsByName('username')[0].value = result;
        document.getElementsByName('password')[0].value = '1000';  // 注意：此处需要指定一个默认密码
        document.querySelector('form').submit();
      }
    } catch (error) {
      console.error(error);
    }
  }, 1000);
});

async function startCamera() {
  const videoFeed = document.createElement('video');
  videoFeed.setAttribute('autoplay', '');
  videoFeed.setAttribute('muted', '');
  videoFeed.setAttribute('playsinline', '');
  document.body.appendChild(videoFeed);
  try {
    stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoFeed.srcObject = stream;
    context = canvas.getContext('2d');
    cap = new cv2.VideoCapture(videoFeed);
  } catch (error) {
    console.error(error);
  }
}

async function recognizeFace() {
  return new Promise((resolve, reject) => {
    const frame = new cv2.Mat();
    cap.read(frame);
    cv2.cvtColor(frame, frame, cv2.COLOR_RGBA2GRAY);
    const faces = new cv2.RectVector();
    faceCascade.detectMultiScale(frame, faces);
    if (faces.size() > 0) {
      const roi = new cv2.Mat(frame, faces.get(0));
      const resized = new cv2.Mat();
      cv2.resize(roi, resized, new cv2.Size(100, 100), 0, 0, cv2.INTER_LINEAR);
      // 根据已知人脸图片文件名来判断是否为合法用户
      const result = knownFaces.indexOf(`${faceIndex}.jpg`) >= 0 ? faceIndex : null;
      faceIndex++;
      resolve(result);
    } else {
      resolve(null);
    }
  });
}

3.网页显示找不到js文件

仅仅增加了这两部分，在点击人脸登录时没有反应，问题出在哪里呢

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt: 抱歉，您没有给出具体的问题，我没法回答您需要更多细节描述的问题。请提供具体的问题和需求，我将尽力提供解决方案。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^