Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Camera Debug</title> | |
| <style> | |
| body { | |
| background: #000; | |
| color: #fff; | |
| font-family: monospace; | |
| padding: 20px; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| video, | |
| img { | |
| width: 100%; | |
| border: 2px solid #0f0; | |
| } | |
| .info { | |
| background: #222; | |
| padding: 10px; | |
| margin: 10px 0; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Camera Stream Debug</h1> | |
| <button onclick="startTest()">Start Camera Test</button> | |
| <button onclick="stopTest()">Stop Test</button> | |
| <div class="container"> | |
| <div> | |
| <h3>Raw Camera Feed</h3> | |
| <video id="camera" autoplay playsinline muted></video> | |
| <div class="info" id="camera-info">Not started</div> | |
| </div> | |
| <div> | |
| <h3>Processed Stream (from server)</h3> | |
| <img id="processed" src="" alt="Waiting for processed frames..."> | |
| <div class="info" id="processed-info">Not started</div> | |
| </div> | |
| </div> | |
| <div class="info"> | |
| <h3>Console Log</h3> | |
| <div id="log" style="max-height: 300px; overflow-y: auto;"></div> | |
| </div> | |
| <canvas id="canvas" style="display:none;"></canvas> | |
| <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script> | |
| <script> | |
| let stream = null; | |
| let socket = null; | |
| let capturing = false; | |
| const camera = document.getElementById('camera'); | |
| const processed = document.getElementById('processed'); | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const logDiv = document.getElementById('log'); | |
| function log(msg) { | |
| const time = new Date().toLocaleTimeString(); | |
| logDiv.innerHTML += `[${time}] ${msg}<br>`; | |
| logDiv.scrollTop = logDiv.scrollHeight; | |
| console.log(msg); | |
| } | |
| async function startTest() { | |
| try { | |
| log('Requesting camera access...'); | |
| stream = await navigator.mediaDevices.getUserMedia({ | |
| video: { width: 640, height: 480 } | |
| }); | |
| camera.srcObject = stream; | |
| document.getElementById('camera-info').textContent = 'Camera active'; | |
| log('Camera started successfully'); | |
| // Connect socket | |
| log('Connecting to Socket.IO...'); | |
| socket = io(); | |
| socket.on('connect', () => { | |
| log('Socket connected: ' + socket.id); | |
| socket.emit('start_camera_session', { session_id: 'debug_test' }); | |
| }); | |
| socket.on('camera_session_started', (data) => { | |
| log('Session started: ' + data.session_id); | |
| startCapture(); | |
| }); | |
| socket.on('processed_frame', (data) => { | |
| log('Received processed frame, size: ' + data.frame.length); | |
| processed.src = data.frame; | |
| document.getElementById('processed-info').textContent = 'Last update: ' + new Date().toLocaleTimeString(); | |
| }); | |
| socket.on('error', (data) => { | |
| log('ERROR: ' + data.message); | |
| }); | |
| } catch (err) { | |
| log('ERROR: ' + err.message); | |
| } | |
| } | |
| function startCapture() { | |
| capturing = true; | |
| log('Starting frame capture...'); | |
| captureFrame(); | |
| } | |
| function captureFrame() { | |
| if (!capturing) return; | |
| if (camera.readyState < 2) { | |
| setTimeout(captureFrame, 100); | |
| return; | |
| } | |
| canvas.width = camera.videoWidth; | |
| canvas.height = camera.videoHeight; | |
| ctx.drawImage(camera, 0, 0); | |
| const frameData = canvas.toDataURL('image/jpeg', 0.8); | |
| if (socket && socket.connected) { | |
| socket.emit('camera_frame', { frame: frameData }); | |
| log('Sent frame: ' + frameData.length + ' bytes'); | |
| } | |
| setTimeout(captureFrame, 500); // 2 FPS for debugging | |
| } | |
| function stopTest() { | |
| capturing = false; | |
| if (stream) { | |
| stream.getTracks().forEach(track => track.stop()); | |
| stream = null; | |
| } | |
| if (socket) { | |
| socket.disconnect(); | |
| socket = null; | |
| } | |
| log('Test stopped'); | |
| } | |
| </script> | |
| </body> | |
| </html> |