123 lines
3.7 KiB
JavaScript
123 lines
3.7 KiB
JavaScript
window.addEventListener('DOMContentLoaded', () => {
|
|
|
|
const video = document.getElementById("video-scan");
|
|
|
|
async function handleQRCodeScan() {
|
|
const fileInput = document.getElementById('qrCodeFile');
|
|
const file = fileInput.files[0]; // Get the selected file
|
|
|
|
if (!file) {
|
|
alert('Select a file before scanning!');
|
|
return;
|
|
}
|
|
|
|
// Call the scanQRCode function
|
|
const result = await scanQRCode(file);
|
|
|
|
// Handle the result
|
|
if (result.status === 'success') {
|
|
console.log('Decoded text:', result.decoded_text);
|
|
alert(`Decoded QR Code: ${result.decoded_text}`);
|
|
} else {
|
|
console.error('Error:', result.message);
|
|
alert(`Error: ${result.message}`);
|
|
}
|
|
}
|
|
|
|
async function scanQRCode(imageFile) {
|
|
// Create a FormData object to send the file
|
|
const formData = new FormData();
|
|
formData.append('file', imageFile); // 'file' is the field name the server expects
|
|
|
|
try {
|
|
// Make a POST call to the /scan_qrcode endpoint
|
|
const response = await fetch('http://localhost:8188/baseapp/scan_qrcode', {
|
|
method: 'POST',
|
|
body: formData, // Send FormData as the request body
|
|
});
|
|
|
|
// Check if the response is ok (status 200-299)
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP Error: ${response.status}`);
|
|
}
|
|
|
|
// Read the JSON response
|
|
const result = await response.json();
|
|
|
|
// Return the result
|
|
return result;
|
|
} catch (error) {
|
|
console.error('Error during QR code scanning:', error);
|
|
return { status: 'error', message: error.message };
|
|
}
|
|
}
|
|
|
|
let isScanning = false;
|
|
|
|
async function startCameraScan() {
|
|
try {
|
|
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|
video: {
|
|
width: { ideal: 896 },
|
|
height: { ideal: 896 }
|
|
}
|
|
});
|
|
video.srcObject = stream;
|
|
isScanning = true;
|
|
captureAndScan();
|
|
} catch (err) {
|
|
console.error('Error accessing the camera: ', err);
|
|
}
|
|
}
|
|
|
|
async function stopCameraScan() {
|
|
try {
|
|
if (stream) {
|
|
await stream.getTracks().forEach(track => track.stop());
|
|
isScanning = false;
|
|
video.srcObject = null;
|
|
stream = null;
|
|
}
|
|
} catch (err) {
|
|
console.error('Error stopping the camera: ', err);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Capture a frame from the webcam and send it to the API
|
|
async function captureAndScan() {
|
|
|
|
if (isScanning === false) {
|
|
return;
|
|
}
|
|
|
|
// Create a canvas to capture the frame
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
const context = canvas.getContext('2d');
|
|
|
|
// Draw the current video frame on the canvas
|
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
// Convert the canvas to an image (base64 format)
|
|
const imageData = canvas.toDataURL('image/jpeg');
|
|
|
|
try {
|
|
|
|
scanQRCode(dataURLToFile(imageData, "captured.png"))
|
|
} catch (e) {
|
|
console.error('Error sending the photo:');
|
|
}
|
|
|
|
setTimeout(() =>
|
|
// Call the function for the next frame
|
|
requestAnimationFrame(captureAndScan)
|
|
, 100);
|
|
}
|
|
|
|
window.stopCameraScan = stopCameraScan;
|
|
window.startCameraScan = startCameraScan;
|
|
}); |