APIs mobiles dans une PWA : GPS, caméra, scan QR, micro et torche

Le composable capture la position GPS avec enableHighAccuracy: true et signale quand la précision dépasse 50 mètres. Les messages d'erreur sont différents selon le navigateur et l'OS pour guider l'utilisateur vers le bon menu de paramètres.

const ACCURACY_THRESHOLD = 50  // mètres, position signalée comme imprécise
const TIMEOUT = 10000          // ms

function getPermissionDeniedMessage(): string {
  if (isIOS) {
    return "Accès bloqué. Sur iOS : Réglages → Confidentialité et sécurité → " +
           "Service de localisation → Safari → \"Lors de l'utilisation\"."
  }
  if (isAndroid && isSamsung) {
    return "Sur Samsung Internet : cadenas dans la barre d'adresse → " +
           "Autorisations → Localisation → Autoriser."
  }
  if (isAndroid) {
    return 'Sur Android : Paramètres → Localisation → Utiliser la localisation.'
  }
  return "Cliquez sur l'icône cadenas → Autorisations → Localisation → Autoriser."
}

async function capture(): Promise<GeoPosition | null> {
  return new Promise((resolve) => {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        position.value = {
          lat: pos.coords.latitude,
          lng: pos.coords.longitude,
          accuracy: Math.round(pos.coords.accuracy),
          capturedAt: new Date().toISOString(),
        }
        isImprecise.value = pos.coords.accuracy > ACCURACY_THRESHOLD
        resolve(position.value)
      },
      (err) => {
        if (err.code === err.PERMISSION_DENIED) {
          error.value = getPermissionDeniedMessage()
        } else if (err.code === err.TIMEOUT) {
          error.value = 'Délai dépassé. Déplacez-vous vers une zone dégagée.'
        } else {
          error.value = 'Position indisponible. Réessayez dans un moment.'
        }
        resolve(null)
      },
      { enableHighAccuracy: true, timeout: TIMEOUT, maximumAge: 0 }
    )
  })
}

Cas d'usage terrain : les coordonnées GPS sont attachées à l'intervention au moment de la création, avec le champ geoAccuracy persisté dans Dexie. Si la précision dépasse le seuil, une alerte visuelle invite le technicien à se déplacer avant de valider la saisie.

Le scan démarre le flux caméra arrière et décode en continu. Un cooldown de 1 seconde évite de déclencher plusieurs fois sur le même code. Les formats supportés incluent QR, EAN-13, EAN-8, Code 128, Code 39, PDF417, Aztec, Data Matrix et plus.

import { BrowserMultiFormatReader } from '@zxing/browser'
import { NotFoundException, BarcodeFormat } from '@zxing/library'

const SCAN_COOLDOWN_MS = 1000
let lastScanAt = 0

async function startScan(): Promise<void> {
  const codeReader = new BrowserMultiFormatReader()

  controls = await codeReader.decodeFromConstraints(
    { video: { facingMode: 'environment' } },
    videoRef.value,
    (scanResult, scanError) => {
      if (scanResult) {
        isCodeVisible.value = true
        const now = Date.now()
        if (now - lastScanAt > SCAN_COOLDOWN_MS) {
          lastScanAt = now
          result.value = {
            code: scanResult.getText(),
            format: BarcodeFormat[scanResult.getBarcodeFormat()],
            capturedAt: new Date().toISOString(),
          }
        }
        return
      }
      isCodeVisible.value = false
      // NotFoundException levée à chaque frame sans code : comportement normal,
      // on ne l'affiche pas comme une erreur.
      if (scanError && !(scanError instanceof NotFoundException)) {
        error.value = 'Erreur pendant le scan. Réessayez.'
        stopScan()
      }
    }
  )
  isScanning.value = true
}

Cas d'usage : dans notre Démo PWA terrain, le technicien scanne le QR code de l'équipement (extincteur, alarme, dérat) pour préremplir la référence dans le formulaire d'intervention. Dans la Démo PWA parcours touristique, le visiteur scanne le panneau pour ouvrir la fiche du point d'intérêt.

La capture utilise un <input type="file" capture="environment"> caché, ce qui délègue au navigateur la gestion du flux caméra et du stockage temporaire. La compression se fait côté client dans un Web Worker pour ne pas bloquer le thread principal.

async function capturePhoto(file: File): Promise<void> {
  const originalSize = file.size

  const compressed = await imageCompression(file, {
    maxWidthOrHeight: 1200,
    initialQuality: 0.75,
    useWebWorker: true,   // compression hors thread principal
  })

  // Si la compression n'apporte pas de gain (photo déjà compressée),
  // on conserve l'original : évite d'aggraver la taille.
  const finalBlob = compressed.size < file.size ? compressed : file

  const url = URL.createObjectURL(finalBlob)
  const label = `Photo du ${now.toLocaleDateString('fr-FR')} à ${now.toLocaleTimeString('fr-FR')}`

  photos.value.unshift({ id: uuidv7(), url, originalSize, compressedSize: finalBlob.size, label })
}

// Révocation des object URLs au unmount : évite les fuites mémoire sur les blobs Dexie
onUnmounted(() => {
  photos.value.forEach(p => URL.revokeObjectURL(p.url))
})

Révocation des object URLs : chaque photo crée une URL blob temporaire (createObjectURL) qui référence un blob en mémoire. Sans revokeObjectURL au unmount, ces blobs restent en mémoire indéfiniment. Sur une application terrain avec 50 photos par intervention, c'est une fuite mémoire significative.

La torche utilise MediaTrackCapabilities.torch via applyConstraints. L'API n'est disponible que sur Android Chrome. Le composable détecte le device au montage et expose isSupported pour que l'interface adapte son affichage sans erreur.

import { isAndroid } from '@/utils/deviceDetect.js'

// Détection au montage : iOS ne supporte pas torch, on coupe court.
function checkSupport(): void {
  if (!isAndroid) {
    isSupported.value = false
  }
}

async function acquireStream(): Promise<boolean> {
  stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: 'environment' },
  })
  track = stream.getVideoTracks()[0]
  const capabilities = track.getCapabilities() as MediaTrackCapabilities & { torch?: boolean }
  if (!capabilities.torch) {
    isSupported.value = false
    releaseStream()
    return false
  }
  isSupported.value = true
  return true
}

async function toggle(): Promise<void> {
  if (isOn.value) {
    await track?.applyConstraints({ advanced: [{ torch: false }] })
    releaseStream()
    isOn.value = false
    return
  }
  const ok = await acquireStream()
  if (!ok) { error.value = 'Flash non disponible sur cet appareil.'; return }
  await track.applyConstraints({ advanced: [{ torch: true }] })
  isOn.value = true
}

// Extinction automatique si l'app passe en arrière-plan (onglet caché)
function handleVisibilityChange(): void {
  if (document.hidden && isOn.value) { releaseStream(); isOn.value = false }
}

Cas d'usage terrain : le technicien inspecte un équipement dans un local technique sombre (armoire électrique, local technique, comble). Il allume la torche depuis l'app sans sortir de l'interface d'intervention. L'extinction automatique au changement d'onglet évite de laisser la torche allumée en arrière-plan.

MediaRecorder sélectionne automatiquement le meilleur format audio disponible sur l'appareil (WebM Opus en priorité, MP4 en fallback). HTTPS requis : une erreur explicite est retournée en HTTP pour guider le développeur en local.

// Sélection du format selon le support de l'appareil
function getSupportedMimeType(): string {
  const candidates = [
    'audio/webm;codecs=opus',   // Chrome / Firefox desktop + Android
    'audio/webm',               // fallback WebM sans codec explicite
    'audio/ogg;codecs=opus',    // Firefox
    'audio/mp4',                // Safari iOS
  ]
  return candidates.find(t => MediaRecorder.isTypeSupported(t)) ?? ''
}

async function startRecording(): Promise<void> {
  // HTTPS requis : en HTTP, getUserMedia() est bloqué par le navigateur.
  // En dev local, utiliser ngrok ou 'pnpm dev:https'.
  if (!window.isSecureContext) {
    error.value = "L'enregistrement nécessite HTTPS. Utilisez ngrok ou pnpm dev:https."
    return
  }

  stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  const mimeType = getSupportedMimeType()
  mediaRecorder = mimeType
    ? new MediaRecorder(stream, { mimeType })
    : new MediaRecorder(stream)   // fallback navigateur

  mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data) }
  mediaRecorder.onstop = () => {
    const blob = new Blob(chunks, { type: mediaRecorder?.mimeType ?? 'audio/webm' })
    recordings.value.unshift({ id: uuidv7(), url: URL.createObjectURL(blob), duration, label })
  }
  mediaRecorder.start(100)  // chunk toutes les 100ms
}

Alternative au clavier sur le terrain : la saisie vocale permet au technicien de dicter une observation sans enlever ses gants. La note est horodatée automatiquement et stockée en attente de synchronisation avec le rapport d'intervention.