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">
<p style="text-align:center; padding:10px;">Scan QR Code Here:</p>
<qrcode-stream :constraints="selectedConstraints"
:formats="['qr_code']"
:track="trackFunctionSelected.value"
v-on:camera-on="onCameraReady"
v-on:detect="onDecode"
v-on:error="onError">
v-on:camera-on="onCameraReady"
v-on:detect="onDecode"
v-on:error="onError">
</qrcode-stream>
<p class="error">{{ error }}</p>
@ -399,17 +400,7 @@
qrCodeResult: null,
debounceTimeout: null,
error: "",
selectedConstraints: {
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
}
},
selectedConstraints: { facingMode: "user" },
trackFunctionSelected: { text: 'outline', value: null },
barcodeFormats: {
qr_code: true, // Hanya mendukung QR Code
@ -422,6 +413,8 @@
],
videoInputDevices: [],
selectedCameraId: null,
scanStartTime: null,
scanTime: null
};
},
async mounted() {
@ -735,30 +728,51 @@
},
//Setting Camera to know that camera are turn on or not
async onCameraReady() {
this.enableAutoFocus();
},
async onCameraReady(videoElement) {
async enableAutoFocus() {
const devices = await navigator.mediaDevices.enumerateDevices();
this.videoInputDevices = devices.filter(device => device.kind === 'videoinput');
const video = document.querySelector("video");
if (this.videoInputDevices.length > 0) {
// Keep the selected camera if already chosen
if (!this.selectedCameraId) {
this.selectedCameraId = this.videoInputDevices[0].deviceId;
const track = video.srcObject.getVideoTracks()[0];
if (track && track.getCapabilities) {
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();
console.log(capabilities);
if (capabilities.focusMode) {
await track.applyConstraints({ focusMode: "continuous" }); // Auto-focus
try {
const devices = await navigator.mediaDevices.enumerateDevices();
this.videoInputDevices = devices.filter(device => device.kind === 'videoinput');
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;
}
},