Integrate QR or barcode scanner capability

Artikel
03/21/2023

Barcode is a method of representing data in a visual and machine-readable form. The barcode contains information about a product, such as a type, size, manufacturer, and Country or region of origin in the form of bars and spaces. The code is read using the optical scanner on your native device camera. For a richer collaborative experience, you can integrate the QR or barcode scanner capability provided in the Teams platform with your Teams app.

You can use Microsoft Teams JavaScript client library, which provides the tools necessary for your app to access the user’s native device capabilities. Use the scanBarCode API to integrate the scanner capability within your app.

Advantage of integrating QR or barcode scanner capability

Following are the advantages of integration of QR or barcode scanner capabilities:

The integration allows web app developers on Teams platform to leverage QR or barcode scanning functionality with Teams JavaScript client library.
With this feature, the user only needs to align a QR or barcode within a frame at the center of the scanner UI and the code gets scanned automatically. The stored data is shared back with the calling web app. This avoids the inconvenience and human errors of entering lengthy product codes or other relevant information manually.

To integrate QR or barcode scanner capability, you must update the app manifest file and call the scanBarCode API. For effective integration, you must have a good understanding of code snippet for calling the scanBarCode API, which allows you to use native QR or barcode scanner capability. The API gives an error for an unsupported barcode standard. It's important to familiarize yourself with the API response errors to handle the errors in your Teams app.

Note

Microsoft Teams support for QR or barcode scanner capability is only available for mobile clients.

Update manifest

Update your Teams app manifest.json file by adding the devicePermissions property and specifying media. It allows your app to ask for requisite permissions from users before they start using the QR or barcode scanner capability. The update for app manifest is as follows:

"devicePermissions": [
    "media",
],

Note

The Request Permissions prompt is automatically displayed when a relevant Teams API is initiated. For more information, see Request device permissions.

ScanBarCode API

The scanBarCode API invokes scanner control that enables the user to scan different types of barcode, and returns the result as a string.

To customize the barcode scanning experience, optional barcode configuration is passed as input to scanBarCode API. You can specify the scan time-out interval in seconds using timeOutIntervalInSec. Its default value is 30 seconds and the maximum value is 60 seconds.

The scanBarCode() API supports the following barcode types:

Barcode Type	Supported on Android	Supported on iOS
Codebar	Yes	No
Code 39	Yes	Yes
Code 93	Yes	Yes
Code 128	Yes	Yes
EAN-13	Yes	Yes
EAN-8	Yes	Yes
ITF	No	Yes
QR Code	Yes	Yes
RSS Expanded	Yes	No
RSS-14	Yes	No
UPC-A	Yes	Yes
UPC-E	Yes	Yes

The following image depicts web app experience of QR or barcode scanner capability:

web app experience for qr or barcode scanner capability

Error handling

You must ensure to handle these errors appropriately in your Teams app. The following table lists the error codes and the conditions under which the errors are generated:

Error code	Error name	Condition
100	NOT_SUPPORTED_ON_PLATFORM	API isn't supported on the current platform.
500	INTERNAL_ERROR	Internal error is encountered while performing the required operation.
1000	PERMISSION_DENIED	Permission is denied by the user.
3000	NO_HW_SUPPORT	Underlying hardware doesn't support the capability.
4000	INVALID_ARGUMENTS	One or more arguments are invalid.
8000	USER_ABORT	User aborts the operation.
8001	OPERATION_TIMED_OUT	Couldn't detect the barcode in the given time interval.
9000	OLD_PLATFORM	Platform code is outdated and doesn't implement this API.

Code snippet

Calling ScanBarCode() API for scanning QR or barcode using camera:

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

Code sample

Sample name	Description	.NET	Node.js	Manifest
Bot join team by QR	This sample shows how to use a feature where user can join a team using QR code containing the team's id through bot.	View	View	View
Tab product inspection	This sample app shows how to use a feature where user can scan a product, capture an image, and mark it as approved/rejected.	View	View	View

Delen via