easyinspection-mask
Version:
Web Components para captura de fotos com máscaras SVG do EasyInspection
84 lines (77 loc) • 2.94 kB
HTML
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste do Componente svg-mask</title>
<!-- Importa o Web Component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/lit@3.1.2/+esm"></script>
<script type="module">
import "./src/index.js";
</script>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin: auto;
margin-top: 30px;
overflow: hidden;
}
svg-mask {
display: block;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
</style>
</head>
<body>
<h1>Teste do Componente svg-mask</h1>
<label for="maskSelector">Escolha a máscara:</label>
<select id="maskSelector">
<option value="none">Sem máscara</option>
<option value="chassi-motor">Chassi e Motor</option>
<option value="odometer">Odômetro</option>
<option value="small-vehicle-front">Frente de Veículo Pequeno</option>
<option value="small-vehicle-side-left">Lado Esquerdo Veículo Pequeno</option>
<option value="small-vehicle-side-right">Lado Direito Veículo Pequeno</option>
<option value="motocycle-front">Frente de Moto</option>
<option value="motocycle-side-left">Lado Esquerdo de Moto</option>
<option value="motocycle-side-right">Lado Direito de Moto</option>
<option value="big-vehicle-front">Frente de Veículo Grande</option>
<option value="bus-side-left">Lado Esquerdo de Ônibus</option>
<option value="bus-side-right">Lado Direito de Ônibus</option>
<option value="truck-side-left">Lado Esquerdo de Caminhão</option>
<option value="truck-side-right">Lado Direito de Caminhão</option>
</select>
<div class="container">
<svg-mask id="maskComponent" maskName="small-vehicle-front">
<video id="camera" autoplay playsinline></video>
</svg-mask>
</div>
<script>
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
document.getElementById('camera').srcObject = stream;
} catch (err) {
console.error('Erro ao acessar a câmera:', err);
}
}
startCamera();
document.getElementById("maskSelector").addEventListener("change", function(event) {
document.getElementById("maskComponent").setAttribute("maskName", event.target.value);
});
</script>
</body>
</html>