5月21日

进行软件杯初步架构建设

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>多模态面试评测系统</title>
</head>
<body>
  <h2>模拟面试系统</h2>
  <video id="preview" autoplay></video><br>
  <button id="startBtn">开始录制</button>
  <button id="stopBtn">停止上传</button>
  <script>
    let stream, recorder, chunks = [];

    navigator.mediaDevices.getUserMedia({video:true, audio:true})
      .then(s => {
        stream = s;
        document.getElementById("preview").srcObject = stream;
      });

    document.getElementById("startBtn").onclick = () => {
      chunks = [];
      recorder = new MediaRecorder(stream);
      recorder.ondataavailable = e => chunks.push(e.data);
      recorder.start();
    };

    document.getElementById("stopBtn").onclick = () => {
      recorder.stop();
      recorder.onstop = () => {
        const blob = new Blob(chunks, {type: 'video/webm'});
        const form = new FormData();
        form.append("file", blob, "interview.webm");
        fetch('/upload', {method: "POST", body: form})
          .then(res => res.text())
          .then(txt => location.href = "/result");
      };
    };
  </script>
</body>
</html>

 

posted @ 2025-05-29 07:52  KuanDong24  阅读(11)  评论(0)    收藏  举报