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

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.

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",
],

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 :

L’image suivante illustre l’expérience d’application web de la fonctionnalité QR ou de 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 :

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

Voir aussi

• Fonctionnalités de l’appareil
• Intégrer les fonctionnalités médias
• Intégrer les fonctionnalités d’emplacement
• Intégrer Sélecteur de personnes
• Schéma du manifeste d’application pour Teams