网页连接摄像头

摄像机处理

<!-- 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 };} // 否则使用 facingModeelse 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() {// 检查浏览器是否支持媒体设备APIif (!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 {// 否则使用 facingModestartCamera({ 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可以做视觉安全光珊防夹手

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/922023.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/922023.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！