1.0.1 • Published 5 months ago
camera-captura v1.0.1
npm install camera-captura
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera Capture</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 m-0 p-2">
<figure class="figure w-100 m-0 p-0">
<video class="figure-img img-fluid rounded w-100 m-0 p-0 border" id="cameraPreview" autoplay></video>
</figure>
</div>
<div class="col-md-6 m-0 p-2">
<figure class="figure">
<img class="figure-img img-fluid rounded" id="capturedImage" style="display:none;" />
</figure>
</div>
<div class="col-md-6 m-0 p-2">
<div class="d-flex justify-content-between">
<button id="cameraBtn">Câmera</button>
<select id="cameraSelect"></select>
<button id="captureBtn">Capturar Imagem</button>
</div>
</div>
</div>
</div>
<script type="module">
import Camera from './src/CameraCaptura.js';
const videoElement = document.getElementById('cameraPreview');
const cameraSelect = document.getElementById('cameraSelect');
const camera = new Camera(videoElement, cameraSelect);
camera.populateCameraSelect();
cameraSelect.addEventListener("change", () => {
camera.handleCameraChange();
});
document.getElementById('cameraBtn').addEventListener('click', async () => {
try {
camera.handleCameraChange();
} catch (error) {
console.error(error);
}
});
document.getElementById('captureBtn').addEventListener('click', async () => {
try {
const imageBlob = await camera.captureImage();
const imageUrl = URL.createObjectURL(imageBlob);
document.getElementById('capturedImage').src = imageUrl;
document.getElementById('capturedImage').style.display = "block";
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>