This commit is contained in:
ameerulrasyid 2025-03-10 15:59:45 +08:00
commit 291d4dabdb

View File

@ -41,12 +41,13 @@
<div id="registerItem" v-if="displayStatus == null" data-aos="fade-right"> <div id="registerItem" v-if="displayStatus == null" data-aos="fade-right">
<p style="text-align:center; padding:10px;">Scan QR Code Here:</p> <p style="text-align:center; padding:10px;">Scan QR Code Here:</p>
<qrcode-stream :constraints="selectedConstraints" <qrcode-stream :constraints="selectedConstraints"
:formats="['qr_code']" :formats="['qr_code']"
:track="trackFunctionSelected.value" :track="trackFunctionSelected.value"
v-on:camera-on="onCameraReady" v-on:camera-on="onCameraReady"
v-on:detect="onDecode" v-on:detect="onDecode"
v-on:error="onError"> v-on:error="onError">
</qrcode-stream> </qrcode-stream>
<p class="error">{{ error }}</p> <p class="error">{{ error }}</p>
@ -399,17 +400,7 @@
qrCodeResult: null, qrCodeResult: null,
debounceTimeout: null, debounceTimeout: null,
error: "", error: "",
selectedConstraints: { selectedConstraints: { facingMode: "user" },
video: {
facingMode: 'user', // Kamera belakang
focusDistance: { min: 0.05, ideal: 0.12, max: 0.3 },
width: { min: 1920, ideal: 1920 },
height: { min: 1080, ideal: 1080 },
sharpness: 100,
framerate: 60,
focusMode: "continuous", // Auto-focus
}
},
trackFunctionSelected: { text: 'outline', value: null }, trackFunctionSelected: { text: 'outline', value: null },
barcodeFormats: { barcodeFormats: {
qr_code: true, // Hanya mendukung QR Code qr_code: true, // Hanya mendukung QR Code
@ -422,6 +413,8 @@
], ],
videoInputDevices: [], videoInputDevices: [],
selectedCameraId: null, selectedCameraId: null,
scanStartTime: null,
scanTime: null
}; };
}, },
async mounted() { async mounted() {
@ -735,30 +728,51 @@
}, },
//Setting Camera to know that camera are turn on or not //Setting Camera to know that camera are turn on or not
async onCameraReady() { async onCameraReady(videoElement) {
this.enableAutoFocus();
},
async enableAutoFocus() { const video = document.querySelector("video");
const devices = await navigator.mediaDevices.enumerateDevices();
this.videoInputDevices = devices.filter(device => device.kind === 'videoinput');
if (this.videoInputDevices.length > 0) { const track = video.srcObject.getVideoTracks()[0];
// Keep the selected camera if already chosen
if (!this.selectedCameraId) { if (track && track.getCapabilities) {
this.selectedCameraId = this.videoInputDevices[0].deviceId; const capabilities = track.getCapabilities(); // Get camera capabilities
if (capabilities.sharpness) {
track.applyConstraints({
advanced: [{ width: 1280, height: 720 }]
}).then(() => {
// Step 2: Apply sharpness separately
return track.applyConstraints({ advanced: [{ sharpness: 10 }] });
}).then(() => {
return track.applyConstraints({ advanced: [{ exposureMode: 'continuous' }] });
})
.then(() => {
}).catch(err => console.error("Failed to apply constraints:", err));
} else {
console.warn("⚠️ Sharpness not supported on this camera");
} }
this.selectedConstraints = { deviceId: { exact: this.selectedCameraId } };
} else {
this.error = "No camera detected.";
} }
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const track = stream.getVideoTracks()[0];
const capabilities = track.getCapabilities(); try {
console.log(capabilities); const devices = await navigator.mediaDevices.enumerateDevices();
if (capabilities.focusMode) { this.videoInputDevices = devices.filter(device => device.kind === 'videoinput');
await track.applyConstraints({ focusMode: "continuous" }); // Auto-focus
if (this.videoInputDevices.length > 0) {
// Keep the selected camera if already chosen
if (!this.selectedCameraId) {
this.selectedCameraId = this.videoInputDevices[0].deviceId;
}
this.selectedConstraints = { deviceId: { exact: this.selectedCameraId } };
} else {
this.error = "No camera detected.";
}
} catch (err) {
this.error = "Error accessing camera: " + err.message;
} }
}, },