41 lines
1.5 KiB
PHP
41 lines
1.5 KiB
PHP
<div>
|
|
<video id="video" width="320" height="240" autoplay playsinline style="border:1px solid #ccc;"></video>
|
|
<br>
|
|
<button type="button" id="captureBtn" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Capture</button>
|
|
<canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
|
|
<img id="snapshot" style="margin-top:10px; max-width:100%;">
|
|
<input type="hidden" id="camera_image" name="{{ $getName() }}">
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const video = document.getElementById('video');
|
|
const canvas = document.getElementById('canvas');
|
|
const captureBtn = document.getElementById('captureBtn');
|
|
const snapshot = document.getElementById('snapshot');
|
|
const cameraInput = document.getElementById('camera_image');
|
|
|
|
async function startCamera() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: { facingMode: "user" } // front camera
|
|
});
|
|
video.srcObject = stream;
|
|
} catch (err) {
|
|
console.error("Camera error: ", err);
|
|
alert("Cannot access camera. Check permissions or HTTPS.");
|
|
}
|
|
}
|
|
|
|
captureBtn.addEventListener('click', () => {
|
|
const context = canvas.getContext('2d');
|
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
const dataUrl = canvas.toDataURL('image/png');
|
|
snapshot.src = dataUrl;
|
|
cameraInput.value = dataUrl;
|
|
});
|
|
|
|
startCamera();
|
|
});
|
|
</script>
|