React Native Flow

Fonctionnalités de l'app

Texte imprimé via la caméra

Dans un flux classique de scan de documents avec Expo, l’aperçu en direct vous aide à repérer approximativement où se trouve le texte imprimé, et la capture déclenche une lecture plus poussée qui peut envoyer la transcription vers une autre partie de l’app. Le ton reste volontairement neutre pour que vous puissiez le rapprocher de votre propre implémentation.

Référence monofichier (téléchargement)

Le lien ci-dessous propose un bundle pédagogique qui regroupe toute la chaîne dans un fichier React Native : aides OCR, préparation d’image pour la passe finale, projection des boîtes sur l’aperçu, boucle temporisée en direct, puis déclencheur vers ce que vous faites ensuite du texte. Il reprend le découpage courant de ce flux en plusieurs modules ; ce n’est pas une route prête à coller. Après téléchargement, réattachez les imports (`ScreenHeader`, `ROUTES`, thème et vos helpers de persistance ou de navigation) et ajoutez les clés i18n `scan.*` / `a11y.*` attendues, ou remplacez ces appels par vos propres libellés.

Paquets : `expo-camera`, `expo-text-extractor`, `expo-image-manipulator`, `expo-file-system`, `expo-router`, `react-i18next` et votre fournisseur de safe area. L’exemple importe `navigate` depuis un chemin interne d’Expo Router ; sur un SDK plus récent, préférez l’API de navigation officiellement supportée.

Captures d’écran de démo

Issues d’une app Expo de référence avec OCR sur l’appareil (`expo-text-extractor` et `expo-camera`).

Caméra braquée sur un document ; des contours bleu clair avec coins marquent chaque bloc de texte détecté.
Aperçu en direct : boîtes englobantes issues d’instantanés légers, projetées sur la vue caméra.
Écran sombre « Extracted text » avec le nombre de caractères et le texte issu du scan.
Après capture : texte reconnu en entier (ici avec compteur de caractères) prêt pour relecture ou l’étape suivante.

Ce que voit l’utilisateur ou l’utilisatrice

La caméra occupe l’écran. De temps en temps, l’app enregistre une photo rapide et légère uniquement pour repérer les blocs de texte. Ces zones apparaissent comme de simples coins sur l’aperçu, pour montrer que le système « voit » la page. Ce passage sert surtout à guider le cadrage, pas à être parfait. Ensuite, une capture volontaire déclenche une lecture plus complète ; le texte extrait peut s’ouvrir sur l’écran suivant déjà rempli.

Comment le flux est en général câblé

  1. L’aperçu connaît sa largeur et sa hauteur à l’écran, ce qui permet de mettre à l’échelle et de positionner les encadrés comme vous les voyez.
  2. À intervalle régulier, l’app enregistre une petite photo compressée, lance une détection de texte sur l’appareil, projette les rectangles sur l’aperçu puis supprime le fichier temporaire pour ne pas encombrer le stockage.
  3. Lors de la capture principale, l’app enregistre une photo de meilleure qualité, réduit parfois les très grandes images pour garder la reconnaissance rapide, extrait tout le texte, mémorise le résultat pour l’écran suivant et y navigue.

Où le traitement a lieu

Dans une configuration Expo classique avec extraction native, la reconnaissance s’exécute en général sur l’appareil. Ce schéma n’oblige pas à envoyer le flux de prévisualisation vers un serveur ; vérifiez vos modules et votre politique de confidentialité pour confirmer le comportement de votre build.

Situations à prévoir

  • Dans le navigateur, l’OCR caméra est souvent indisponible ou limité. Mieux vaut afficher un message clair et permettre de revenir en arrière plutôt que de simuler une fonctionnalité absente.
  • Certains appareils ou builds n’exposent pas l’extracteur natif. Un court état « non pris en charge ici » vaut mieux qu’un échec silencieux.
  • Si aucun texte n’est trouvé après la capture, l’app peut l’expliquer simplement au lieu de laisser un écran vide.

Organisation du fichier téléchargé

À lire du haut vers le bas : d’abord les utilitaires partagés, puis l’écran. Les erreurs utilisent les codes chaîne `OCR_WEB`, `OCR_UNSUPPORTED` et `OCR_EMPTY` pour afficher des alertes localisées.

Extraction de texte (texte entier vs blocs)

`extractPrintedTextFromImageUri` vérifie le web et `isSupported`, appelle `extractTextFromImage`, assemble les segments taillés avec des retours ligne et lance `OCR_EMPTY` s’il ne reste rien. `extractPrintedTextBlocksFromImageUri` ne renvoie que les blocs (`extractTextBlocksFromImage`) pour l’aperçu en direct, pas la transcription finale.

`prepareImageForOcr`

Si la largeur ou la hauteur dépasse 1600 px sur le plus grand côté, l’image est redimensionnée pour que ce bord vaille 1600 px, puis enregistrée en JPEG (compression 0.82). Cela borne mémoire et coût OCR pour la passe finale sans toucher à la logique de l’aperçu live.

`mapTextBlocksToPreview` (mode couvrir)

La vue est un rectangle fixe : la fonction met l’échelle avec `Math.max` pour couvrir la vue, centre avec des décalages, multiplie les coordonnées normalisées (`x`, `y`, `width`, `height`) par la taille affichée et plafonne les surlignages à `maxBoxes` (28).

`ScanTextRegionHighlight`

Chaque zone a un fond léger, quatre coins en L dimensionnés selon le rectangle, et un fin contour intérieur via `accentToRgba` pour suivre la couleur d’accent du thème sans masquer la caméra.

Intervalle live et nettoyage

Quand la caméra est prête, la permission accordée, la mise en page connue et l’OCR final inactif (`busy` faux), une minuterie tourne environ toutes les 820 ms : photo basse qualité (`quality` 0.22), extraction de blocs, mise à jour de `highlights`, puis suppression de l’URI via `FileSystem.deleteAsync`. `liveBusyRef` empêche deux passes live simultanées.

Déclencheur et OCR complet

`onCapture` prend une photo de meilleure qualité (`quality` 0.78), transmet largeur/hauteur à `prepareImageForOcr` puis `extractPrintedTextFromImageUri`. Le callback qui suit compresse les espaces, impose une longueur minimale, enregistre la chaîne pour l’écran suivant et navigue avec votre propre route. Sur le web, un en-tête minimal et des alertes à l’ouverture permettent de revenir en arrière.

Si vous l’implémentez

Les noms varient selon les dépôts ; on retrouve souvent un écran caméra, des utilitaires pour les chaînes OCR et les boîtes englobantes, une étape pour redimensionner l’image avant la passe finale, un mappage des coordonnées normalisées vers les pixels de l’aperçu, et un petit cache pour transmettre le texte extrait à l’écran suivant. L’extraction native repose en général sur un module Expo de cette famille.

Traitez cette page comme une carte conceptuelle. Alignez fichiers et constantes sur votre dépôt et vos exigences produit.

Sponsorisé

Promo rapide