Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Live Depth Map</title> | |
| <style> | |
| #outputImage { | |
| width: 640px; | |
| height: 480px; | |
| } | |
| video { | |
| width: 640px; | |
| height: 480px; | |
| display: block; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Live Depth Map</h1> | |
| <video id="videoElement" autoplay playsinline></video> | |
| <canvas id="canvasElement" style="display: none;"></canvas> | |
| <img id="outputImage" alt="Processed Depth Map" /> | |
| <script> | |
| async function startVideo() { | |
| const video = document.getElementById('videoElement'); | |
| const stream = await navigator.mediaDevices.getUserMedia({ video: true }); | |
| video.srcObject = stream; | |
| video.addEventListener('play', async () => { | |
| const canvas = document.getElementById('canvasElement'); | |
| const context = canvas.getContext('2d'); | |
| const outputImage = document.getElementById('outputImage'); | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| async function processFrame() { | |
| // Draw the current video frame on the canvas | |
| context.drawImage(video, 0, 0, canvas.width, canvas.height); | |
| // Convert canvas image to base64 format | |
| const frameData = canvas.toDataURL('image/jpeg'); | |
| // Send the base64 data to Flask backend for processing | |
| const response = await fetch('/process_frame', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ image: frameData }) | |
| }); | |
| const result = await response.json(); | |
| const depthMapUrl = result.depth_map; | |
| // Update the displayed image with the processed depth map | |
| outputImage.src = depthMapUrl; | |
| // Continue processing the next frame | |
| requestAnimationFrame(processFrame); | |
| } | |
| // Start the frame processing loop | |
| processFrame(); | |
| }); | |
| } | |
| // Start capturing video once the page is loaded | |
| window.onload = startVideo; | |
| </script> | |
| </body> | |
| </html> | |