WebcamModal
Um componente para capturar fotos diretamente da webcam do dispositivo, ao capturar uma foto o componente emite um File.
Quando usar:
- É necessário capturar uma imagem diretamente do dispositivo do usuário, como para envio de documentos ou selfies.
- Deseja-se integrar a captura de imagens com outros fluxos do sistema sem exigir uma aplicação externa.
Quando não usar:
- Não há acesso a permissões de câmera no dispositivo do usuário (como em alguns navegadores ou ambientes com restrições).
- É necessário capturar vídeos em vez de imagens estáticas.
- A interface do usuário exige múltiplas interações modais (cascatas ou modais aninhados).
Uso
js
<CdsWebcamModal
v-model="showModal"
title="Tirar uma foto"
variant="dark"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* modelValue (required) | boolean | -- | Valor recebido pelo v-model | |
title | string | 'Camera' | -- | Título do modal do componente |
feedbackText | string | 'Foto capturada' | -- | Texto de feedback ao tirar uma foto |
takePhotoButtonText | string | 'Tirar foto' | -- | Texto do botão de tirar uma foto |
takeAnotherPhotoButtonText | string | 'Tirar outra' | -- | Texto do botão de tirar uma outra foto |
savePhotoButtonText | string | 'Salvar foto' | -- | Texto do botão de salvar uma foto |
errorMessageText | string | 'Erro ao carregar a câmera' | -- | Texto da mensagem de erro quando ocorrer um erro ao carregar a câmera |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | Variante dos botões e do spinner |
Eventos
Nome | Descrição |
|---|---|
@update:model-value | Evento emitido quando o valor do modal é atualizado |
@on-take-photo | Evento emitido quando uma foto é salva, o evento retorna um File |