117 lines
3.9 KiB
HTML
117 lines
3.9 KiB
HTML
<div class="row-fluid p-2">
|
|
<form id="car-form">
|
|
<div>
|
|
<label for="vin_no">VIN/Barcode/QR Code:</label>
|
|
<input type="text" id="vin_no" name="vin_no" readonly>
|
|
<button type="button" id="capture-btn">Capture Code</button>
|
|
</div>
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
|
|
<!-- Camera Stream -->
|
|
<div id="camera-container" style="display:none;">
|
|
<video id="camera" autoplay playsinline width="400"></video>
|
|
<button id="toggle-btn">Toggle Camera</button>
|
|
<button id="scan-btn">Scan</button>
|
|
</div>
|
|
|
|
<p id="result"></p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
let captureBtn = document.getElementById('capture-btn');
|
|
let cameraContainer = document.getElementById('camera-container');
|
|
let videoElement = document.getElementById('camera');
|
|
let toggleBtn = document.getElementById('toggle-btn');
|
|
let scanBtn = document.getElementById('scan-btn');
|
|
let vinInput = document.getElementById('vin_no');
|
|
let resultElement = document.getElementById('result');
|
|
let mediaStream = null;
|
|
let currentCameraIndex = 0;
|
|
let cameras = [];
|
|
|
|
// List available cameras
|
|
async function getCameras() {
|
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
cameras = devices.filter(device => device.kind === 'videoinput');
|
|
}
|
|
|
|
// Start the camera with the given device ID
|
|
async function startCamera(deviceId) {
|
|
if (mediaStream) {
|
|
mediaStream.getTracks().forEach(track => track.stop()); // Stop the current stream
|
|
}
|
|
|
|
mediaStream = await navigator.mediaDevices.getUserMedia({
|
|
video: { deviceId: { exact: deviceId } }
|
|
});
|
|
|
|
videoElement.srcObject = mediaStream;
|
|
}
|
|
|
|
// Toggle between cameras
|
|
toggleBtn.addEventListener('click', async () => {
|
|
currentCameraIndex = (currentCameraIndex + 1) % cameras.length;
|
|
await startCamera(cameras[currentCameraIndex].deviceId);
|
|
});
|
|
|
|
// Capture image and send to backend
|
|
scanBtn.addEventListener('click', () => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = videoElement.videoWidth;
|
|
canvas.height = videoElement.videoHeight;
|
|
const context = canvas.getContext('2d');
|
|
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
|
|
canvas.toBlob((blob) => {
|
|
const formData = new FormData();
|
|
formData.append('image', blob, 'code_image.jpg');
|
|
|
|
fetch('{% url 'car_search' %}', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': '{% csrf_token %}' },
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
vinInput.value = data.code;
|
|
resultElement.textContent = `Code found: ${data.code}`;
|
|
} else {
|
|
resultElement.textContent = `Error: ${data.error}`;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error processing code:', err);
|
|
resultElement.textContent = 'Error processing code.';
|
|
})
|
|
.finally(() => {
|
|
stopCamera();
|
|
});
|
|
});
|
|
});
|
|
|
|
// Open camera and start video stream
|
|
captureBtn.addEventListener('click', async () => {
|
|
cameraContainer.style.display = 'block';
|
|
await getCameras();
|
|
if (cameras.length > 0) {
|
|
await startCamera(cameras[currentCameraIndex].deviceId);
|
|
} else {
|
|
resultElement.textContent = 'No cameras found.';
|
|
}
|
|
});
|
|
|
|
// Stop the camera stream
|
|
function stopCamera() {
|
|
if (mediaStream) {
|
|
mediaStream.getTracks().forEach(track => track.stop());
|
|
mediaStream = null;
|
|
}
|
|
cameraContainer.style.display = 'none';
|
|
}
|
|
|
|
</script> |