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

Artículo
03/22/2023

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:

La compatibilidad de Microsoft Teams con la funcionalidad qr o escáner de 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

Compartir a través de