Integrar la función de escáner de código QR o de códigos de barras

  • Artículo

El código de barras es un método de representación de datos en un formato visual y legible por máquina. El código de barras contiene información sobre un producto, como un tipo, tamaño, fabricante y país o región de origen en forma de barras y espacios. El código se lee mediante el escáner óptico de la cámara del dispositivo nativo. Para una experiencia colaborativa más enriquecida, puede integrar la funcionalidad QR o escáner del código de barras proporcionada en la plataforma de Teams con su aplicación de Teams.

Puede usar la biblioteca cliente JavaScript de Microsoft Teams, que proporciona las herramientas necesarias para que la aplicación acceda a las funcionalidades de dispositivo nativo del usuario. Use la API scanBarCode para integrar la funcionalidad del escáner en la aplicación.

Ventaja de la integración de la funcionalidad del escáner de QR o códigos de barras

A continuación se muestran las ventajas de la integración de las funcionalidades del escáner de QR o código de barras:

  • La integración permite a los desarrolladores de aplicaciones web de la plataforma Teams aprovechar la funcionalidad de escaneo de códigos QR o códigos de barras con la biblioteca cliente de JavaScript de Teams.
  • Con esta característica, el usuario solo necesita alinear un QR o un código de barras dentro de un marco en el centro de la interfaz de usuario del escáner y el código se examina automáticamente. Los datos almacenados se comparten con la aplicación web que realiza la llamada. Esto evita los inconvenientes y errores humanos de escribir códigos de producto largos u otra información relevante manualmente.

Para integrar la funcionalidad QR o de escáner de códigos de barras, debe actualizar el archivo de manifiesto de la aplicación y llamar a la API scanBarCode. Para una integración eficaz, debe tener una buena comprensión del fragmento de código para llamar a la API scanBarCode, lo que le permite usar la funcionalidad nativa de escáner de QR o códigos de barras. La API proporciona un error para un estándar de código de barras no compatible. Es importante familiarizarse con los errores de respuesta de la API para controlar los errores en la aplicación de Teams.

Nota:

Actualmente, la compatibilidad de Microsoft Teams con la funcionalidad de escáner QR o códigos de barras solo está disponible para clientes móviles.

Actualizar manifiesto

Actualice el archivo manifest.json de la aplicación Teams agregando la devicePermissions propiedad y especificando media. Permite que la aplicación solicite los permisos necesarios a los usuarios antes de que empiecen a usar la funcionalidad de escáner de códigos QR o códigos de barras. La actualización del manifiesto de la aplicación es la siguiente:

"devicePermissions": [
    "media",
],

Nota:

El permiso de solicitud de permisos se muestra automáticamente cuando se inicia una API de Teams relevante. Para obtener más información, consulte Solicitar permisos de dispositivo.

ScanBarCode API

La API scanBarCode invoca el control de escáner que permite al usuario examinar diferentes tipos de código de barras y devuelve el resultado como una cadena.

Para personalizar la experiencia de escaneo de códigos de barras, se pasa la configuración de código de barras opcional como entrada a la API scanBarCode. Puede especificar el intervalo de tiempo de espera de examen en segundos mediante timeOutIntervalInSec. Su valor predeterminado es 30 segundos y el valor máximo es de 60 segundos.

La API scanBarCode() admite los siguientes tipos de código de barras:

Tipo de código de barras Compatible con Android Compatible con iOS
Barra de código Sí No
Código 39 Sí Sí
Código 93 Sí Sí
Código 128 Sí Sí
EAN-13 Sí Sí
EAN-8 Sí Sí
ITF No Sí
Código QR Sí Sí
RSS expandido Sí No
RSS-14 Sí No
UPC-A Sí Sí
UPC-E Sí Sí

En la siguiente imagen se muestra la experiencia de la aplicación web con la funcionalidad de escáner QR o código de barras:

Experiencia de aplicación web para la funcionalidad de escáner de códigos qr o códigos de barras

Control de errores

Debe asegurarse de controlar estos errores correctamente en la aplicación de Teams. En la tabla siguiente se enumeran los códigos de error y las condiciones en las que se generan los errores:

Código de error Nombre de error Condición
100 NOT_SUPPORTED_ON_PLATFORM La API no se admite en la plataforma actual.
500 INTERNAL_ERROR Se produce un error interno al realizar la operación necesaria.
1 000 PERMISSION_DENIED El usuario deniega el permiso.
3000 NO_HW_SUPPORT El hardware subyacente no admite la funcionalidad.
4000 InvalidArguments Uno o más argumentos no son válidos.
8000 USER_ABORT El usuario anula la operación.
8001 OPERATION_TIMED_OUT No se pudo detectar el código de barras en el intervalo de tiempo especificado.
9000 OLD_PLATFORM El código de la plataforma no está actualizado y no implementa esta API.

Fragmento de código

Llamando ScanBarCode() API para escanear QR o código de barras con cámara:

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);

Ejemplo de código

Ejemplo de nombre Descripción .NET Node.js Manifiesto
Bot join team by QR En este ejemplo se muestra cómo usar una característica en la que el usuario puede unirse a un equipo mediante código QR que contiene el identificador del equipo a través del bot. View View View
Inspección del producto de tabulación Esta aplicación de ejemplo muestra cómo usar una característica en la que el usuario puede examinar un producto, capturar una imagen y marcarla como aprobada o rechazada. View View Ver

Consulte también