h5 网页测试摄像头
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5 摄像头测试</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-4">
<h1 class="text-xl font-bold mb-4 text-center">摄像头测试</h1>
<div class="space-y-4">
<!-- 视频预览 -->
<div class="relative aspect-video bg-black rounded-lg overflow-hidden">
<video id="video" class="w-full h-full object-cover" autoplay playsinline></video>
</div>
<!-- 拍照结果 -->
<div class="relative aspect-video bg-gray-200 rounded-lg overflow-hidden hidden">
<canvas id="canvas" class="w-full h-full object-cover"></canvas>
</div>
<!-- 控制按钮 -->
<div class="flex justify-center gap-4">
<button id="startBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
开启摄像头
</button>
<button id="snapBtn" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition" disabled>
拍照
</button>
<button id="switchBtn" class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 transition" disabled>
切换摄像头
</button>
</div>
<!-- 状态提示 -->
<div id="status" class="text-center text-gray-600">
请点击"开启摄像头"按钮开始测试
</div>
</div>
</div>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const startBtn = document.getElementById('startBtn');
const snapBtn = document.getElementById('snapBtn');
const switchBtn = document.getElementById('switchBtn');
const status = document.getElementById('status');
let stream = null;
let facingMode = 'user'; // 默认使用前置摄像头
// 开启摄像头
async function startCamera() {
try {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: facingMode
}
});
video.srcObject = stream;
snapBtn.disabled = false;
switchBtn.disabled = false;
status.textContent = '摄像头已开启';
startBtn.textContent = '关闭摄像头';
} catch (err) {
console.error('摄像头访问错误:', err);
status.textContent = '无法访问摄像头，请确保已授予权限';
}
}
// 关闭摄像头
function stopCamera() {
if (stream) {
stream.getTracks().forEach(track => track.stop());
stream = null;
video.srcObject = null;
snapBtn.disabled = true;
switchBtn.disabled = true;
status.textContent = '摄像头已关闭';
startBtn.textContent = '开启摄像头';
}
}
// 拍照
function takeSnapshot() {
const context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// 显示拍照结果
canvas.parentElement.classList.remove('hidden');
status.textContent = '已拍照';
}
// 切换摄像头
function switchCamera() {
facingMode = facingMode === 'user' ? 'environment' : 'user';
startCamera();
}
// 事件监听
startBtn.addEventListener('click', () => {
if (stream) {
stopCamera();
} else {
startCamera();
}
});
snapBtn.addEventListener('click', takeSnapshot);
switchBtn.addEventListener('click', switchCamera);
// 检查浏览器是否支持
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
status.textContent = '您的浏览器不支持摄像头API';
startBtn.disabled = true;
}
</script>
</body>
</html>