Ajouter la lecture de codes-barres à votre application

Pourquoi lire les codes-barres ?

La lecture de codes-barres est la fonctionnalité phare des applications de nutrition. L’utilisateur pointe son téléphone vers un produit et voit instantanément les calories, les macronutriments et les ingrédients. Avec 6,1 millions de produits dans notre base — dont 4,1 millions avec code-barres issus d’Open Food Facts — votre application peut reconnaître la plupart des produits en rayon dans le monde entier.

Comment fonctionnent les codes-barres

La plupart des produits alimentaires utilisent l’un de ces deux formats de code-barres :

• EAN-13 (13 chiffres) — utilisé partout dans le monde, surtout en Europe, en Asie et en Australie
• UPC-A (12 chiffres) — utilisé principalement en Amérique du Nord

Notre API accepte les deux formats. Il suffit de passer le code numérique à l’endpoint des codes-barres :

curl "https://foodbase.dev/v1/foods/barcode/5449000000996" \
  -H "X-API-Key: food_your_key_here"

Choisir une bibliothèque de lecture

Applications web (via la caméra)

Pour les applications web, ZXing ou QuaggaJS peuvent lire des codes-barres depuis un flux vidéo :

// Using html5-qrcode (lightweight, well-maintained)
import { Html5QrcodeScanner } from "html5-qrcode";

const scanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: { width: 250, height: 250 },
});

scanner.render(async (barcode) => {
  scanner.clear();
  const product = await lookupBarcode(barcode);
  if (product) {
    displayProduct(product);
  } else {
    showNotFound(barcode);
  }
});

React Native / mobile

Pour React Native, utilisez react-native-camera ou expo-barcode-scanner :

import { BarCodeScanner } from "expo-barcode-scanner";

function Scanner() {
  const handleScan = async ({ data }) => {
    const product = await lookupBarcode(data);
    // Navigate to product detail screen
  };

  return <BarCodeScanner onBarCodeScanned={handleScan} />;
}

iOS/Android natif

• iOS : utilisez AVCaptureMetadataOutput d’AVFoundation pour la détection de codes-barres intégrée
• Android : utilisez l’API Barcode Scanning de Google ML Kit

La fonction de recherche

Voici l’intégration de l’API qui fonctionne avec n’importe quel lecteur :

const API_KEY = "food_your_key_here";

async function lookupBarcode(barcode) {
  const res = await fetch(
    `https://foodbase.dev/v1/foods/barcode/${barcode}`,
    { headers: { "X-API-Key": API_KEY } }
  );

  if (res.status === 404) return null; // Product not found
  if (!res.ok) throw new Error(`API error: ${res.status}`);

  return res.json();
}

Ce que vous recevez

Une recherche par code-barres réussie renvoie le produit complet avec un résumé nutritionnel :

{
  "name_default": "Original Taste",
  "brand": "Coca-Cola",
  "barcode": "5449000000996",
  "nutriscore": "e",
  "nova_group": 4,
  "image_url": "https://images.openfoodfacts.org/...",
  "nutrition_summary": {
    "energy_kcal": 42,
    "proteins_g": 0,
    "carbs_g": 10.6,
    "fat_g": 0,
    "sugars_g": 10.6,
    "fiber_g": null
  },
  "allergens": null,
  "ingredients": [
    {"lang": "en", "text": "carbonated water, sugar, colour..."}
  ]
}

Gérer les produits « introuvables »

Certains scans ne trouveront aucune correspondance — le plus souvent des marques locales ou régionales. Bonnes pratiques :

1. Affichez un message clair — « Produit introuvable dans notre base de données »
2. Laissez l’utilisateur chercher par nom en solution de repli
3. Mettez en cache les produits trouvés localement pour que les scans répétés soient instantanés
4. Autorisez la saisie manuelle pour les produits absents de toute base de données

Pas de code-barres ? Utilisez une photo

Deux options supplémentaires quand la piste du code-barres mène à une impasse, toutes deux alimentées par des crédits IA (chaque offre inclut une allocation) :

• POST /v1/vision/barcode décode le code-barres à partir d’une photo — plus besoin de bibliothèque de lecture. C’est de la pure vision par ordinateur (0 crédit, comptabilisée dans votre quota quotidien) et elle renvoie directement le produit correspondant.
• POST /v1/vision/product reconnaît un produit à partir de la photo de sa face avant et renvoie des correspondances du catalogue classées par score — la solution de secours pour les codes-barres abîmés ou absents.

async function lookupByPhoto(file) {
  const form = new FormData();
  form.append("image", file);
  const res = await fetch("https://foodbase.dev/v1/vision/product", {
    method: "POST",
    headers: { "X-API-Key": API_KEY },
    body: form,
  });
  if (!res.ok) return null;
  const { matches } = await res.json();
  return matches[0]?.product ?? null; // matches are score-ranked
}

Vous pouvez essayer les deux dans le navigateur sur le playground photo.

Conseils de performance

• Mettez les recherches en cache localement — les données produit changent rarement, les produits trouvés peuvent donc être conservés côté client très longtemps
• Appliquez un debounce aux callbacks du lecteur — certaines bibliothèques se déclenchent plusieurs fois pour le même code-barres
• Préchargez les produits courants — si vous connaissez les habitudes d’achat de vos utilisateurs, utilisez l’endpoint bulk pour les précharger

Notes sur la couverture

La couverture des codes-barres suit celle des données sous-jacentes : la plus forte pour les produits vendus en Europe et en Amérique du Nord, plus mince pour les marques régionales ailleurs — et elle s’améliore en continu à mesure que de nouveaux produits sont ajoutés. Plutôt que de vous fier à un tableau de couverture statique, testez avec les produits que vos utilisateurs scannent réellement : collez un code-barres dans l’explorateur de produits et voyez immédiatement s’il est reconnu.

Commencer avec la lecture de codes-barres — l’offre gratuite inclut les recherches par code-barres.