<!-- camera_solve.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像机处理</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}
h1 {
color: #333;
margin-bottom: 30px;
}
.video-container {
margin: 20px auto;
width: 100%;
max-width: 640px;
}
#videoElement {
width: 100%;
max-width: 640px;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
}
.controls {
margin: 20px 0;
}
button {
background-color: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 0 10px;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.status {
margin: 15px 0;
padding: 10px;
border-radius: 5px;
font-weight: bold;
}
.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.snapshot-container {
margin: 20px auto;
text-align: center;
}
#snapshotCanvas {
max-width: 100%;
border: 2px solid #ddd;
border-radius: 8px;
display: none;
}
.back-link {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 5px;
}
.back-link:hover {
background-color: #5a6268;
}
.camera-selector {
margin: 15px 0;
}
select {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
margin: 0 10px;
}
.facing-mode-selector {
margin: 15px 0;
}
</style>
</head>
<body>
<div style="margin-bottom: 20px;">
<a href="index.html" style="display: inline-block; padding: 10px 15px; background-color: #6c757d; color: white; text-decoration: none; border-radius: 5px;">← 返回主页</a>
</div>
<div class="container">
<h1>摄像机处理</h1>
<div class="video-container">
<video id="videoElement" autoplay playsinline></video>
</div>
<div class="facing-mode-selector">
<label>
<input type="radio" name="facingMode" value="user" checked> 前置摄像头
</label>
<label style="margin-left: 20px;">
<input type="radio" name="facingMode" value="environment"> 后置摄像头
</label>
</div>
<div class="camera-selector">
<label for="cameraSelect">选择具体摄像头:</label>
<select id="cameraSelect" disabled>
<option value="">自动选择</option>
</select>
</div>
<div class="controls">
<button id="startCameraBtn">启动摄像机</button>
<button id="stopCameraBtn" disabled>停止摄像机</button>
<button id="snapshotBtn" disabled>拍照</button>
</div>
<div id="statusMessage" class="status info">
点击"启动摄像机"按钮开始使用摄像头
</div>
<div class="snapshot-container">
<canvas id="snapshotCanvas"></canvas>
</div>
<a href="index.html" class="back-link">返回主页</a>
</div>
<script>
// 获取页面元素
const videoElement = document.getElementById('videoElement');
const startCameraBtn = document.getElementById('startCameraBtn');
const stopCameraBtn = document.getElementById('stopCameraBtn');
const snapshotBtn = document.getElementById('snapshotBtn');
const statusMessage = document.getElementById('statusMessage');
const snapshotCanvas = document.getElementById('snapshotCanvas');
const canvasContext = snapshotCanvas.getContext('2d');
const cameraSelect = document.getElementById('cameraSelect');
const facingModeRadios = document.getElementsByName('facingMode');
// 存储媒体流对象和设备列表
let mediaStream = null;
let availableCameras = [];
// 更新状态消息
function updateStatus(message, type = 'info') {
statusMessage.textContent = message;
statusMessage.className = `status ${type}`;
}
// 获取可用摄像头列表
async function getAvailableCameras() {
try {
// 获取媒体设备列表
const devices = await navigator.mediaDevices.enumerateDevices();
// 过滤出视频输入设备
availableCameras = devices.filter(device => device.kind === 'videoinput');
// 清空选择器
cameraSelect.innerHTML = '<option value="">自动选择</option>';
// 添加摄像头选项
availableCameras.forEach((camera, index) => {
const option = document.createElement('option');
option.value = camera.deviceId;
// 如果有标签名则使用标签名，否则使用默认名称
option.text = camera.label || `摄像头 ${index + 1}`;
cameraSelect.appendChild(option);
});
// 启用选择器
cameraSelect.disabled = false;
return availableCameras;
} catch (error) {
console.error('获取摄像头列表失败:', error);
updateStatus('获取摄像头列表失败: ' + error.message, 'error');
return [];
}
}
// 启动指定摄像头
async function startCamera(options = {}) {
try {
// 更新状态
updateStatus('正在请求访问摄像头...', 'info');
// 构建约束条件
const constraints = {
video: {
width: { ideal: 1280 },
height: { ideal: 720 }
},
audio: false
};
// 如果指定了摄像头ID，则使用具体设备
if (options.deviceId) {
constraints.video.deviceId = { exact: options.deviceId };
}
// 否则使用 facingMode
else if (options.facingMode) {
constraints.video.facingMode = options.facingMode;
}
// 如果当前正在使用摄像头，先停止
if (mediaStream) {
const tracks = mediaStream.getTracks();
tracks.forEach(track => track.stop());
}
// 获取用户媒体设备权限
mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
// 将视频流设置为视频元素的源
videoElement.srcObject = mediaStream;
// 更新按钮状态
startCameraBtn.disabled = true;
stopCameraBtn.disabled = false;
snapshotBtn.disabled = false;
cameraSelect.disabled = false;
// 更新状态消息
updateStatus('摄像头已启动，正在显示视频流', 'success');
} catch (error) {
console.error('访问摄像头时出错:', error);
updateStatus(`无法访问摄像头: ${error.message}`, 'error');
startCameraBtn.disabled = false;
stopCameraBtn.disabled = true;
snapshotBtn.disabled = true;
}
}
// 停止摄像机
function stopCamera() {
if (mediaStream) {
// 停止所有媒体轨道
const tracks = mediaStream.getTracks();
tracks.forEach(track => track.stop());
// 清除视频元素的源
videoElement.srcObject = null;
// 更新按钮状态
startCameraBtn.disabled = false;
stopCameraBtn.disabled = true;
snapshotBtn.disabled = true;
// 更新状态消息
updateStatus('摄像头已停止', 'info');
}
}
// 拍照功能
function takeSnapshot() {
if (!mediaStream) return;
// 设置画布尺寸与视频相同
snapshotCanvas.width = videoElement.videoWidth;
snapshotCanvas.height = videoElement.videoHeight;
// 将当前视频帧绘制到画布上
canvasContext.drawImage(videoElement, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
// 显示画布
snapshotCanvas.style.display = 'block';
// 更新状态消息
updateStatus('拍照成功！', 'success');
}
// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
// 检查浏览器是否支持媒体设备API
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
updateStatus('您的浏览器不支持访问媒体设备，请更换浏览器重试', 'error');
startCameraBtn.disabled = true;
return;
}
// 绑定按钮事件
startCameraBtn.addEventListener('click', () => {
const selectedCameraId = cameraSelect.value;
const facingMode = document.querySelector('input[name="facingMode"]:checked').value;
// 如果选择了具体摄像头，则使用该摄像头
if (selectedCameraId) {
startCamera({ deviceId: selectedCameraId });
} else {
// 否则使用 facingMode
startCamera({ facingMode: facingMode });
}
});
stopCameraBtn.addEventListener('click', stopCamera);
snapshotBtn.addEventListener('click', takeSnapshot);
// 摄像头选择事件
cameraSelect.addEventListener('change', async function() {
if (this.value) {
// 启动选中的摄像头
await startCamera({ deviceId: this.value });
}
});
// facingMode 选择事件
facingModeRadios.forEach(radio => {
radio.addEventListener('change', function() {
// 如果当前正在使用摄像头，则切换
if (mediaStream) {
const selectedCameraId = cameraSelect.value;
const facingMode = document.querySelector('input[name="facingMode"]:checked').value;
if (selectedCameraId) {
startCamera({ deviceId: selectedCameraId });
} else {
startCamera({ facingMode: facingMode });
}
}
});
});
// 获取可用摄像头列表
getAvailableCameras();
});
</script>
</body>
</html>接下来想连上yolo可以做视觉安全光珊 防夹手