Python实现随机抽人回答问题

这是"抽人回答问题"HTML代码。它利用摄像头实时检测人脸，并随机抽取一张人脸截图显示在屏幕上。

```html

<!DOCTYPE html>

<head>

<title>抽人回答问题 · 人脸捕获</title>

<style>

/* 摄像头容器与画布叠加层 */

#video-wrapper {

position: relative;

width: 100%;

max-width: 640px;

margin: 0 auto;

aspect-ratio: 4 / 3;

background: #1e1e2f;

border-radius: 24px;

overflow: hidden;

box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);

}

#video-element {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

transform: scaleX(-1); /* 镜像，更自然 */

}

#overlay-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none; /* 让按钮可以穿透点击 */

transform: scaleX(-1); /* 与视频保持镜像一致 */

}

/* 截图展示区 */

#snapshot-container {

position: relative;

width: 100%;

max-width: 320px;

margin: 0 auto;

aspect-ratio: 1 / 1;

background: #2d2d44;

border-radius: 32px;

overflow: hidden;

box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);

border: 2px solid rgba(255, 255, 255, 0.08);

transition: all 0.2s ease;

}

#snapshot-container img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

}

.glow-text {

text-shadow: 0 0 12px rgba(120, 180, 255, 0.5);

}

/* 按钮动效 */

.btn-primary {

background: linear-gradient(135deg, #6366f1, #8b5cf6);

transition: transform 0.15s, box-shadow 0.2s;

box-shadow: 0 8px 20px -6px #6366f180;

}

.btn-primary:hover:not(:disabled) {

transform: scale(1.02);

box-shadow: 0 12px 28px -6px #6366f1b0;

}

.btn-primary:active:not(:disabled) {

transform: scale(0.96);

}

.btn-primary:disabled {

opacity: 0.5;

cursor: not-allowed;

filter: grayscale(0.4);

}

.btn-secondary {

background: rgba(255, 255, 255, 0.08);

backdrop-filter: blur(6px);

border: 1px solid rgba(255, 255, 255, 0.15);

transition: 0.15s;

}

.btn-secondary:hover:not(:disabled) {

background: rgba(255, 255, 255, 0.16);

}

.badge {

background: rgba(0, 0, 0, 0.5);

backdrop-filter: blur(4px);

padding: 4px 14px;

border-radius: 40px;

font-size: 0.8rem;

border: 1px solid rgba(255, 255, 255, 0.1);

}

/* 加载模型占位 */

.loader {

border: 3px solid rgba(255, 255, 255, 0.1);

border-top-color: #818cf8;

border-radius: 50%;

width: 36px;

height: 36px;

animation: spin 0.9s linear infinite;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

</style>

</head>

</h1>

等待启动

</span>

</div>

</div>

<span>🎲</span> 抽人

</button>

<span>↺</span> 返回重抽

</button>

</div>

</div>

⭐ 被抽中

</div>

<span id="info-text">模型加载中，请授权摄像头...</span>

</p>

</main>

(function() {

"use strict";

// ---------- DOM 元素 ----------

const video = document.getElementById('video-element');

const canvas = document.getElementById('overlay-canvas');

const ctx = canvas.getContext('2d');

const snapshotImg = document.getElementById('snapshot-img');

const placeholder = document.getElementById('placeholder-snapshot');

const winnerBadge = document.getElementById('winner-badge');

const faceCountSpan = document.getElementById('face-count');

const statusBadge = document.getElementById('status-badge');

const camIndicator = document.getElementById('cam-indicator');

const infoText = document.getElementById('info-text');

const captureBtn = document.getElementById('capture-btn');

const resetBtn = document.getElementById('reset-btn');

// ---------- 状态变量 ----------

let isModelLoaded = false;

let isCameraReady = false;

let isCapturing = false; // 正在抽取中 (锁定按钮)

let hasSnapshot = false; // 是否已有截图 (用于显示reset)

let currentDetections = \[\]; // 存储当前帧人脸检测结果

let animationFrameId = null;

let lastFaceCount = 0;

// ---------- 配置 ----------

const MODEL_URL = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/models/'; // 轻量级模型

const DETECT_OPTIONS = new faceapi.SsdMobilenetv1Options({

minConfidence: 0.5, // 置信度阈值

maxResults: 10

});

// ---------- 辅助函数 ----------

function updateUIForReady() {

if (isModelLoaded && isCameraReady) {

captureBtn.disabled = false;

resetBtn.disabled = false;

statusBadge.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-400 inline-block"></span> 就绪`;

infoText.textContent = '✅ 已就绪，点击"抽人"随机截取一张人脸';

} else {

captureBtn.disabled = true;

resetBtn.disabled = true;

}

// 更新检测到的人脸数量

function updateFaceCount(detections) {

const count = detections ? detections.length : 0;

faceCountSpan.textContent = count;

// 如果没有人脸，给个提示颜色

if (count === 0 && isCameraReady) {

faceCountSpan.className = 'font-bold text-rose-300 min-w- $20px$ text-center';

} else {

faceCountSpan.className = 'font-bold text-indigo-300 min-w- $20px$ text-center';

}

// 当人脸数量变化时，轻微更新状态 (但不干扰capture)

}

// 绘制人脸框 (镜像处理，与视频一致)

function drawDetections(detections) {

const videoWidth = video.videoWidth;

const videoHeight = video.videoHeight;

if (!videoWidth || !videoHeight) return;

// canvas 尺寸与视频比例同步

canvas.width = videoWidth;

canvas.height = videoHeight;

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!detections || detections.length === 0) return;

// face-api 的检测框坐标是基于原始图像 (未镜像)

// 但 canvas 我们设置了 scaleX(-1) 所以绘制时需要镜像翻转

// 因为 canvas 整体镜像，所以我们直接绘制矩形即可，坐标会自动镜像

// 不过绘制文字时需要额外注意方向，但这里仅绘制框，无需文字

ctx.strokeStyle = '#60a5fa';

ctx.lineWidth = 2.5;

ctx.shadowColor = '#60a5fa60';

ctx.shadowBlur = 8;

detections.forEach(det => {

const box = det.detection.box;

const x = box.x;

const y = box.y;

const w = box.width;

const h = box.height;

// 由于 canvas 镜像，x 会自动翻转，直接绘制即可

ctx.strokeRect(x, y, w, h);

// 加一个小圆角装饰

ctx.fillStyle = '#60a5fa30';

ctx.fillRect(x, y-1, w, 2);

});

// 重置阴影

ctx.shadowBlur = 0;

}

// ---------- 核心: 随机抽取一张人脸截图 ----------

function captureRandomFace() {

if (!isModelLoaded || !isCameraReady) {

alert('请等待模型和摄像头就绪');

return;

}

if (isCapturing) return;

if (!currentDetections || currentDetections.length === 0) {

alert('未检测到人脸，请面对摄像头 😅');

return;

}

isCapturing = true;

captureBtn.disabled = true;

resetBtn.disabled = true;

// 隐藏之前的截图状态

snapshotImg.classList.add('opacity-0');

placeholder.classList.remove('hidden');

winnerBadge.classList.add('hidden');

// 随机选择一个检测结果

const randomIndex = Math.floor(Math.random() * currentDetections.length);

const selected = currentDetections $randomIndex$ ;

const box = selected.detection.box;

// 从视频中截取人脸区域 (注意视频是镜像的，但坐标基于原始图像，canvas 也是镜像，一致)

const videoWidth = video.videoWidth;

const videoHeight = video.videoHeight;

if (!videoWidth || !videoHeight) {

isCapturing = false;

captureBtn.disabled = false;

resetBtn.disabled = false;

return;

}

// 扩充边距 10%，让截图更自然

const margin = 0.12;

let x = Math.max(0, box.x - box.width * margin);

let y = Math.max(0, box.y - box.height * margin);

let w = Math.min(videoWidth - x, box.width * (1 + margin * 2));

let h = Math.min(videoHeight - y, box.height * (1 + margin * 2));

// 确保至少 30x30

if (w < 30) w = 30;

if (h < 30) h = 30;

// 利用 canvas 截取 (由于视频是镜像的，直接截取)

const tempCanvas = document.createElement('canvas');

tempCanvas.width = w;

tempCanvas.height = h;

const tempCtx = tempCanvas.getContext('2d');

// 绘制视频帧的对应区域 (注意视频本身是镜像，直接draw即可，因为坐标已对应)

tempCtx.drawImage(video, x, y, w, h, 0, 0, w, h);

// 将截图显示到 snapshot-img

const dataUrl = tempCanvas.toDataURL('image/png');

snapshotImg.src = dataUrl;

// 显示截图，隐藏占位

snapshotImg.onload = () => {

snapshotImg.classList.remove('opacity-0');

placeholder.classList.add('hidden');

winnerBadge.classList.remove('hidden');

hasSnapshot = true;

isCapturing = false;

captureBtn.disabled = false;

resetBtn.disabled = false;

// 更新信息

infoText.textContent = `🎯 已抽中 #${randomIndex+1} 号脸，点击"返回重抽"可重新抽取`;

};

snapshotImg.onerror = () => {

// fallback

placeholder.classList.remove('hidden');

winnerBadge.classList.add('hidden');

isCapturing = false;

captureBtn.disabled = false;

resetBtn.disabled = false;

infoText.textContent = '⚠️ 截图失败，请重试';

};

}

// ---------- 重置/重新开始 ----------

function resetSnapshot() {

if (isCapturing) return;

// 清空截图，回到初始状态

snapshotImg.src = '';

snapshotImg.classList.add('opacity-0');

placeholder.classList.remove('hidden');

winnerBadge.classList.add('hidden');

hasSnapshot = false;

infoText.textContent = '🔄 已重置，点击"抽人"再次抽取';

// 按钮状态恢复 (但若模型未就绪则禁用)

updateUIForReady();

// 重新开始新一轮 (清除任何临时状态)

// 并且如果当前有人脸框，继续显示

}

// ---------- 视频帧循环 (检测人脸 + 绘制) ----------

async function detectLoop() {

if (!isCameraReady || !isModelLoaded) {

animationFrameId = requestAnimationFrame(detectLoop);

return;

}

try {

// 检测人脸

const detections = await faceapi.detectAllFaces(video, DETECT_OPTIONS);

currentDetections = detections || \[\];

// 更新计数

updateFaceCount(currentDetections);

// 绘制框

drawDetections(currentDetections);

} catch (err) {

// 偶尔出错忽略

console.warn('检测异常:', err);

}

animationFrameId = requestAnimationFrame(detectLoop);

}

// ---------- 初始化摄像头 ----------

async function initCamera() {

try {

const stream = await navigator.mediaDevices.getUserMedia({

video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } },

audio: false,

});

video.srcObject = stream;

await video.play();

isCameraReady = true;

camIndicator.className = 'w-2 h-2 rounded-full bg-green-400 inline-block animate-pulse';

statusBadge.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-400 inline-block"></span> 摄像头已开`;

infoText.textContent = '📷 摄像头已启动，加载模型中...';

// 设置canvas尺寸 (在第一次视频帧加载后设置)

video.addEventListener('loadedmetadata', () => {

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

});

// 更新UI

updateUIForReady();

// 开始检测循环

if (animationFrameId) cancelAnimationFrame(animationFrameId);

detectLoop();

} catch (err) {

console.error('摄像头启动失败:', err);

camIndicator.className = 'w-2 h-2 rounded-full bg-rose-400 inline-block';

statusBadge.innerHTML = `<span class="w-2 h-2 rounded-full bg-rose-400 inline-block"></span> 摄像头不可用`;

infoText.textContent = '❌ 无法访问摄像头，请检查权限或连接';

alert('无法访问摄像头，请允许浏览器访问摄像头后刷新页面。');

}

// ---------- 加载 face-api 模型 ----------

async function loadModels() {

try {

infoText.textContent = '⏳ 加载人脸检测模型...';

await faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL);

// 也可以加载 tinyFaceDetector 但 ssd 更准

isModelLoaded = true;

infoText.textContent = '🧠 模型加载完成，等待摄像头...';

updateUIForReady();

// 如果摄像头已就绪，更新状态

if (isCameraReady) {

statusBadge.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-400 inline-block"></span> 完全就绪`;

infoText.textContent = '✅ 一切就绪，点击"抽人"开始！';

}

} catch (err) {

console.error('模型加载失败:', err);

infoText.textContent = '❌ 模型加载失败，请刷新重试';

alert('人脸检测模型加载失败，请检查网络后刷新。');

}

// ---------- 事件绑定 ----------

captureBtn.addEventListener('click', captureRandomFace);

resetBtn.addEventListener('click', resetSnapshot);

// ---------- 启动 ----------

async function init() {

// 先加载模型，再开摄像头 (并行也行，但顺序保证ui)

await loadModels();

await initCamera();

// 若模型加载失败，摄像头也可能已经开启，但按钮禁用

updateUIForReady();

}

// 页面关闭前释放资源

window.addEventListener('beforeunload', () => {

if (video.srcObject) {

const tracks = video.srcObject.getTracks();

tracks.forEach(track => track.stop());

}

if (animationFrameId) cancelAnimationFrame(animationFrameId);

});

// 启动所有

init();

})();

</script>

</body>

</html>

```

备注

核心功能与操作流程

您可以通过"抽人"按钮随机选择当前画面中的一张人脸，并查看其截图。整个流程清晰且反馈即时。

· 人脸检测与显示：页面会实时显示摄像头画面，并用蓝色框标记出检测到的所有人脸。左上角会同步显示当前检测到的人脸数量。

· 随机抽取与截图：点击 "抽人" 按钮，系统会从当前检测到的人脸中随机选取一个，并将其面部区域放大截图，显示在下方区域，同时会有一个"被抽中"的角标提示。

· 重置与重抽：点击 "返回重抽" 按钮，可以清除当前截图，恢复初始状态，以便您进行新一轮的抽取。

可以根据需要调整 DETECT_OPTIONS 中的 minConfidence（置信度阈值，0-1）来改变人脸检测的灵敏度。数值越高，检测越严格。