Integrate QR or barcode scanner capability
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:
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 |
See also
Platform Docs