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>Capture Image</title> | |
| </head> | |
| <body> | |
| <h1>Capture Image</h1> | |
| <!-- Button to open camera --> | |
| <button onclick="openCamera()">Open Camera</button> | |
| <!-- Option to toggle between front/back camera for mobile --> | |
| <div id="camera-options" style="display: none;"> | |
| <button onclick="switchCamera()">Switch Camera</button> | |
| </div> | |
| <!-- Video element to display the camera feed --> | |
| <video id="video" width="300" height="200" autoplay></video> | |
| <!-- Capture Button --> | |
| <button onclick="captureImage()">Capture</button> | |
| <canvas id="canvas" style="display:none;"></canvas> | |
| <script> | |
| let video = document.getElementById('video'); | |
| let canvas = document.getElementById('canvas'); | |
| let context = canvas.getContext('2d'); | |
| let cameraOptions = document.getElementById('camera-options'); | |
| let currentStream = null; | |
| let currentDeviceId = null; | |
| function openCamera() { | |
| // Check if it's a phone or laptop | |
| if (navigator.userAgent.match(/Mobile/)) { | |
| cameraOptions.style.display = 'block'; | |
| } | |
| navigator.mediaDevices.enumerateDevices() | |
| .then(devices => { | |
| let videoDevices = devices.filter(device => device.kind === 'videoinput'); | |
| if (videoDevices.length > 0) { | |
| currentDeviceId = videoDevices[0].deviceId; | |
| startCamera(currentDeviceId); | |
| } | |
| }); | |
| } | |
| function startCamera(deviceId) { | |
| const constraints = { | |
| video: { | |
| deviceId: deviceId ? { exact: deviceId } : undefined | |
| } | |
| }; | |
| navigator.mediaDevices.getUserMedia(constraints) | |
| .then(stream => { | |
| currentStream = stream; | |
| video.srcObject = stream; | |
| }) | |
| .catch(err => { | |
| console.error('Error accessing the camera', err); | |
| }); | |
| } | |
| function switchCamera() { | |
| if (currentStream) { | |
| currentStream.getTracks().forEach(track => track.stop()); | |
| } | |
| navigator.mediaDevices.enumerateDevices() | |
| .then(devices => { | |
| let videoDevices = devices.filter(device => device.kind === 'videoinput'); | |
| let currentIndex = videoDevices.findIndex(device => device.deviceId === currentDeviceId); | |
| let nextIndex = (currentIndex + 1) % videoDevices.length; | |
| currentDeviceId = videoDevices[nextIndex].deviceId; | |
| startCamera(currentDeviceId); | |
| }); | |
| } | |
| function captureImage() { | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| context.drawImage(video, 0, 0, canvas.width, canvas.height); | |
| // Send the captured image to the Flask backend (optional: send as Base64) | |
| let dataURL = canvas.toDataURL('image/png'); | |
| fetch('/upload', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ image: dataURL }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| console.log(data.message); | |
| alert("Image saved successfully!"); | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |