Components

CameraCapture

Componente per catturare foto dalla fotocamera del dispositivo o da upload file, con output in formato base64.

Panoramica

CameraCapture consente di acquisire immagini tramite la fotocamera del dispositivo (anteriore o posteriore) oppure tramite upload da file. L'output è un data URL base64 dell'immagine catturata, pronto per il salvataggio o la visualizzazione.

Caratteristiche principali:

Streaming video in tempo reale prima della cattura
Cambio fotocamera (anteriore/posteriore) durante lo streaming
Upload da file come alternativa alla fotocamera
Anteprima immagine catturata con opzioni ritatta/elimina
Formato output configurabile (JPEG, PNG, WebP)
Qualità immagine e dimensioni configurabili

Requisiti browser:

Supporto getUserMedia API
Permesso accesso fotocamera
Contesto sicuro (HTTPS)

Casi d'uso tipici: foto documento identità, selfie per profilo utente, scansione documenti, cattura prove visive.

Anteprima live

Il preview mostra l'UI del componente con i pulsanti "Avvia/Ferma fotocamera" e l'opzione upload file. L'attivazione effettiva dello stream richiede HTTPS e il permesso utente — il comportamento dipende dall'ambiente di esecuzione.

Utilizzo nello schema

const schema = [{
  name: 'fotoDocumento',
  type: 'camera',
  label: 'Foto documento',
  props: {
    width: 1280,
    height: 720,
    facingMode: 'environment',
    imageFormat: 'image/jpeg',
    imageQuality: 0.9,
    showPreview: true,
  }
}, {
  name: 'fotoSelfie',
  type: 'camera',
  label: 'Foto profilo',
  props: {
    width: 640,
    height: 640,
    facingMode: 'user',
    imageFormat: 'image/jpeg',
    imageQuality: 0.85,
    helperText: 'Posiziona il viso al centro',
  }
}]

Utilizzo diretto

Cattura documento (fotocamera posteriore)

<CameraCapture
  v-model="frenteDocumento"
  :width="1280"
  :height="720"
  facing-mode="environment"
  image-format="image/png"
  :image-quality="1"
  label="Foto fronte documento"
  helper-text="Posiziona il documento nel riquadro"
/>

Gestione del valore base64

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Data URL base64 immagine catturata (v-model)
`label`	`string`	—	Etichetta del campo
`helperText`	`string`	—	Testo di supporto sotto il campo
`error`	`string`	—	Messaggio di errore (attiva stato invalid)
`disabled`	`boolean`	`false`	Disabilita il campo
`invalid`	`boolean`	`false`	Attiva visivamente lo stato di errore
`width`	`number`	`640`	Larghezza ideale cattura in pixel
`height`	`number`	`480`	Altezza ideale cattura in pixel
`facingMode`	`'user' \| 'environment'`	`'environment'`	Fotocamera da usare (`user`=anteriore, `environment`=posteriore)
`imageFormat`	`'image/jpeg' \| 'image/png' \| 'image/webp'`	`'image/jpeg'`	Formato immagine output
`imageQuality`	`number`	`0.9`	Qualità compressione (0.0–1.0, solo per JPEG/WebP)
`showPreview`	`boolean`	`true`	Mostra anteprima dell'immagine dopo la cattura
`inputProps`	`Record<string, unknown>`	`{}`	Props aggiuntive per il contenitore

Metodi disponibili nell'interfaccia utente

Dopo la cattura, l'utente vede i pulsanti:

Ritatta — riavvia la fotocamera per una nuova cattura
Elimina — cancella l'immagine e resetta il valore

Durante lo streaming:

Scatta — acquisisce il frame corrente
Cambia fotocamera — alterna anteriore/posteriore
Annulla — ferma lo streaming

Flusso stati interni

Stato iniziale
  └─ [Click "Scatta foto"]
       └─ Richiesta permesso fotocamera
            ├─ [Permesso negato] → Errore + messaggio
            └─ [Permesso concesso] → Streaming attivo
                 ├─ [Click "Scatta"] → Cattura → Anteprima
                 └─ [Click "Annulla"] → Stato iniziale

Slot per upload file

Oltre alla fotocamera, il componente offre nativamente il pulsante "Carica immagine" che apre un file picker con filtro accept="image/*.

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Data URL base64 aggiornato
`capture`	`string`	Emesso dopo cattura o upload (data URL)
`error`	`Error`	Errore accesso fotocamera o stream

Validazione suggerita

import { z } from 'zod'

const schema = z.object({
  fotoDocumento: z.string()
    .startsWith('data:image/', 'L\'immagine non è in formato valido')
    .nullable()
    .refine(v => v !== null, { message: 'La foto del documento è obbligatoria' }),
})

BarcodeScanner

Scanner di codici a barre e QR code tramite fotocamera del dispositivo, con fallback per input manuale.

DynamicFormDialog

Dialog modale con form dinamico per creazione/modifica record con DynamicFormLayouts integrato.