Intégrer la fonctionnalité de scanneur QR ou code-barres

  • Article

Le code-barres est une méthode de représentation des données sous une forme visuelle et lisible par l’ordinateur. Le code-barres contient des informations sur un produit, telles qu’un type, une taille, un fabricant et un pays ou une région d’origine sous la forme de barres et d’espaces. Le code est lu à l’aide du détecteur optique sur votre appareil photo natif. Pour une expérience collaborative plus riche, vous pouvez intégrer la fonctionnalité de QR ou de détecteur de codes-barres fournie dans la plateforme Teams à votre application Teams.

Vous pouvez utiliser la bibliothèque de client JavaScript Microsoft Teams, qui fournit les outils nécessaires à votre application pour accéder aux fonctionnalités natives de l’appareil de l’utilisateur. Utilisez l’API scanBarCode pour intégrer la fonctionnalité de détecteur dans votre application.

Avantage de l’intégration de la fonctionnalité QR ou du détecteur de codes-barres

Voici les avantages de l’intégration des fonctionnalités de QR ou de détecteur de codes-barres :

  • L’intégration permet aux développeurs d’applications web sur la plateforme Teams de tirer parti de la fonctionnalité d’analyse qr ou de code-barres avec la bibliothèque de client JavaScript Teams.
  • Avec cette fonctionnalité, l’utilisateur doit uniquement aligner un QR ou un code-barres dans un cadre au centre de l’interface utilisateur du scanneur et le code est analysé automatiquement. Les données stockées sont partagées avec l’application web appelante. Cela évite les désagréments et les erreurs humaines liés à la saisie manuelle de codes de produit longs ou d’autres informations pertinentes.

Pour intégrer la fonctionnalité de QR ou de détecteur de codes-barres, vous devez mettre à jour le fichier manifeste de l’application et appeler l’API scanBarCode . Pour une intégration efficace, vous devez avoir une bonne compréhension d’extrait de code pour appeler l’API scanBarCode, ce qui vous permet d’utiliser la fonctionnalité QR native ou le détecteur de codes-barres. L’API génère une erreur pour une norme de code-barres non prise en charge. Il est important de vous familiariser avec les Erreurs de réponse de l'API pour gérer les erreurs dans votre application Teams.

Remarque

Actuellement, la prise en charge de Microsoft Teams pour QR et le détecteur de code-barres QR est disponible uniquement pour les clients mobiles.

Mise à jour du manifeste

Mettez à jour le fichier manifest.json de votre application Teams en ajoutant la devicePermissionspropriété et en spécifiantmedia. Il permet à votre application de demander les autorisations requises aux utilisateurs avant qu’ils commencent à utiliser la fonctionnalité QR ou scanneur de codes-barres. La mise à jour du manifeste de l’application est la suivante :

"devicePermissions": [
    "media",
],

Remarque

L’invite d’autorisations de demande s’affiche automatiquement lorsqu’une API Teams pertinente est lancée. Pour plus d'informations, reportez-vous à la section Demander les autorisations du périphérique.

API ScanBarCode

L’API scanBarCode appelle le contrôle détecteur qui permet à l’utilisateur d’analyser différents types de code-barres et retourne le résultat sous forme de chaîne.

Pour personnaliser l’expérience d’analyse du code-barres, la configuration de code-barres facultatives sont transmises en entrée à l’API scanBarCode. Vous pouvez spécifier l’intervalle de délai d’expiration de l’analyse en secondes à l’aide de timeOutIntervalInSec. Sa valeur par défaut est 30 secondes et la valeur maximale est 60 secondes.

L’API scanBarCode() prend en charge les types de code-barres suivants :

Type de code-barres Pris en charge sur Android Pris en charge sur iOS
Barre de code Oui Non
Code 39 Oui Oui
Code 93 Oui Oui
Code 128 Oui Oui
EAN-13 Oui Oui
EAN-8 Oui Oui
ITF Non Oui
Code QR Oui Oui
RSS développé Oui Non
RSS-14 Oui Non
UPC-A Oui Oui
UPC-E Oui Oui

L’image suivante illustre l’expérience d’application web de la fonctionnalité QR ou de détecteur de codes-barres :

expérience d’application web pour la fonctionnalité qr ou détecteur de codes-barres

Gestion des erreurs

Vous devez vous assurer de traiter ces erreurs de manière appropriée dans votre application Teams. Le tableau suivant répertorie les codes d'erreur et les conditions dans lesquelles les erreurs sont générées :

Code d’erreur Nom de l’erreur Condition
100 NOT_SUPPORTED_ON_PLATFORM L’API n’est pas prise en charge sur la plateforme actuelle.
500 INTERNAL_ERROR Une erreur interne a été rencontrée lors de l'exécution de l'opération requise.
1 000 PERMISSION_DENIED L’autorisation est refusée par l’utilisateur.
3000 NO_HW_SUPPORT Le matériel sous-jacent ne prend pas en charge cette fonctionnalité.
4000 ARGUMENTS NON VALIDES Un ou plusieurs arguments ne sont pas valides.
8000 USER_ABORT L’utilisateur abandonne l’opération.
8001 OPERATION_TIMED_OUT Impossible de détecter le code-barres dans l’intervalle de temps donné.
9000 OLD_PLATFORM Le code de plateforme est obsolète et n’implémente pas cette API.

Extrait de code

Appel d’ScanBarCode() API pour l’analyse de QR ou code-barres à l’aide de la caméra :

const config: microsoftTeams.media.BarCodeConfig = {
  timeOutIntervalInSec: 30};
microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: string) => {
  if (error) {
    if (error.message) {
      output(" ErrorCode: " + error.errorCode + error.message);
    } else {
      output(" ErrorCode: " + error.errorCode);
    }
  } else if (decodedText) {
    output(decodedText);
  }
}, config);

Exemple de code

Exemple de nom Description .NET Node.js Manifeste
Bot rejoignez l’équipe par QR Cet exemple montre comment utiliser une fonctionnalité dans laquelle l’utilisateur peut rejoindre une équipe à l’aide d’un code QR contenant l’ID de l’équipe via un bot. View View View
Onglet Inspection du produit Cet exemple d’application montre comment utiliser une fonctionnalité dans laquelle l’utilisateur peut analyser un produit, capturer une image et la marquer comme approuvée/rejetée. View View View

Voir aussi