網頁連接攝像頭

攝像機處理

<!-- 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
英文地址，請注明出處：http://en.pswp.cn/news/922023.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！