Updates from: 02/19/2021 04:19:53
Service Microsoft Docs article Related commit history on GitHub Change details
platform Device Capabilities Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/device-capabilities-overview.md
Title: Overview of device capabilities description: Overview of native device capabilities.
-keywords: camera image media microphone capabilities native device permissions
+keywords: camera image media microphone mic qr code qrcode bar code barcode scan scanner capabilities native device permissions
# Device capabilities
-Microsoft Teams platform is continuously enhancing developer capabilities aligning with built-in first-party experiences. The enhanced Teams platform allows partners to integrate device capabilities, such as camera, photo gallery, microphone, and location, with their web apps. This integration reduces the barrier to app development, speeds-up development-cycle, and creates new scenarios or use-cases for the developer community.
+Microsoft Teams platform is continuously enhancing developer capabilities aligning with built-in first-party experiences. The enhanced Teams platform allows partners to integrate device capabilities, such as camera, QR or barcode scanner, photo gallery, microphone, and location with their web apps. This integration reduces the barrier to app development, speeds-up development-cycle, and creates new scenarios or use-cases for the developer community.
## Native device capabilities
A mobile or desktop device has built-in devices, such as a camera and microphone
* Camera * Microphone * Gallery
+ * QR or barcode scanner
* Location After getting access to the device capabilities, you can integrate them with Teams platform to enhance the collaborative experience. ## Request device permissions
-Use the tools present in [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) to request the required [permissions](native-device-permissions.md) for accessing the native device capabilities. While access to these capabilities is standard in modern web browsers, you must inform Teams about the capabilities that you are using by updating your app manifest. This update allows you to request permissions while your app runs on Teams mobile or desktop clients.
+Use the tools present in [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) to request the required [permissions](native-device-permissions.md) for accessing the native device capabilities. While access to these capabilities is standard in modern web browsers, you must inform Teams about the capabilities that you are using by updating your app manifest. This update allows you to request permissions while your app runs on Teams mobile or desktop clients.
## Integrate device capabilities
-After getting access to device capabilities,use **Teams media capability APIs** to [integrate the capabilities](mobile-camera-image-permissions.md) with Teams platform to enhance the user experience. These integrated capabilities allow your app to:
+After getting access to device capabilities, use Teams media capability APIs to [integrate media capabilities](mobile-camera-image-permissions.md) with Teams platform to enhance the user experience. These integrated capabilities allow your app to:
* Capture and share images
+* Scan QR or barcode using [scanner control](qr-barcode-scanner-capability.md)
* Record audio through microphone * Share the location information--
platform Mobile Camera Image Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/mobile-camera-image-permissions.md
microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, at
} }); ```+
+## See also
+
+> [!div class="nextstepaction"]
+> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/native-device-permissions.md
You can enrich your Teams app with native device capabilities, such as camera, microphone, and location. This document guides you on how to request user consent and access the native device permissions. > [!NOTE]
-> To integrate media capabilities within your Microsoft Teams mobile app, see [Integrate media capabilities](mobile-camera-image-permissions.md).
+> * To integrate media capabilities within your Microsoft Teams mobile app, see [Integrate media capabilities](mobile-camera-image-permissions.md).
+> * To integrate QR or barcode scanner capability within your Microsoft Teams mobile app, see [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
## Native device permissions You must request the device permissions to access native device capabilities. The device permissions work similarly for all app constructs, such as tabs, task modules, or messaging extensions. The user must go to the permissions page in Teams settings to manage device permissions. By accessing the device capabilities, you can build richer experiences on the Teams platform, such as: * Capture and view images.
+* Scan QR or barcode.
* Record and share short videos. * Record audio memos and save them for later use. * Use the location information of the user to display relevant information.
The [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-cli
While access to these features is standard in modern web browsers, you must inform Teams about the features you use by updating your app manifest. This update allows you to ask for permissions while your app runs on the Teams desktop client. > [!NOTE]
-> Currently, Microsoft Teams support for media capabilities is only available for mobile clients.
+> Currently, Microsoft Teams support for media capabilities and QR barcode scanner capability is only available for mobile clients.
## Manage permissions
Device permissions are stored for every login session. It means that if you sign
> [!NOTE] > When you consent to the native device permissions, it is valid only for your _current_ login session.
-## Next step
+## Next steps
> [!div class="nextstepaction"] > [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)+
+> [!div class="nextstepaction"]
+> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
platform Qr Barcode Scanner Capability https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/qr-barcode-scanner-capability.md
+
+ Title: Integrate QR or barcode scanner capability
+description: How to use Teams JavaScript client SDK to leverage QR or barcode scanner capability
+keywords: camera media qr code qrcode bar code barcode scanner scan capabilities native device permissions
+++
+# 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 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. This document guides you on how to integrate the capability.
+
+You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), which provides the tools necessary for your app to access the userΓÇÖs [native device capabilities](native-device-permissions.md). Use the `scanBarCode` API to integrate the scanner capability within your app.
+
+## Advantage of integrating QR or barcode scanner capability
+
+* The integration allows web app developers on Teams platform to leverage QR or barcode scanning functionality with Teams JavaScript client SDK.
+* 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](#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 is important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app.
+
+> [!NOTE]
+> Currently, Microsoft Teams support for QR or barcode scanner capability is only available for mobile clients.
+
+## Update manifest
+
+Update your Teams app [manifest.json](../../resources/schem#devicepermissions) 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.
+
+``` json
+"devicePermissions": [
+ "media",
+],
+```
+
+> [!NOTE]
+> The **Request Permissions** prompt is automatically displayed when a relevant Teams API is initiated. For more information, see [Request device permissions](native-device-permissions.md).
+
+## 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 |
+
+**Web app experience for `ScanBarCode` API for QR or barcode scanner capability**
+![web app experience for qr or barcode scanner capability](../../assets/images/tabs/qr-barcode-scanner-capability.png)
+
+## 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 is not 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 does not support the capability.|
+| **4000** | INVALID_ARGUMENTS | One or more arguments are invalid.|
+| **8000** | USER_ABORT |User aborts the operation.|
+| **8001** | OPERATION_TIMED_OUT | Could not detect the barcode in the given time interval.|
+| **9000** | OLD_PLATFORM | Platform code is outdated and does not implement this API.|
+
+## Code snippet
+
+**Calling `ScanBarCode()` API** for scanning QR or barcode using camera:
+
+```javascript
+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);
+```
+
+## See also
+
+> [!div class="nextstepaction"]
+> [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/what-are-tabs.md
Apps that are [distributed through Appsource](~/concepts/deploy-and-publish/apps
> [!div class="nextstepaction"] > [Learn more: Integrate media capabilities](../concepts/device-capabilities/mobile-camera-image-permissions.md)+
+> [!div class="nextstepaction"]
+> [Learn more: Integrate QR or barcode scanner capability in Teams](../concepts/device-capabilities/qr-barcode-scanner-capability.md)
+
platform What Are Task Modules https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/what-are-task-modules.md
Microsoft Teams will ensure that keyboard navigation works properly from the tas
> [!div class="nextstepaction"] > [Learn more: Integrate media capabilities](../concepts/device-capabilities/mobile-camera-image-permissions.md)+
+> [!div class="nextstepaction"]
+> [Learn more: Integrate QR or barcode scanner capability in Teams](../concepts/device-capabilities/qr-barcode-scanner-capability.md)
platform Get Started Dotnet App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-dotnet-app-studio.md
You can use the same terminal window to run the commands in this tutorial.
## Download the sample
-You can get started with a simple [Hello, World!](https://github.com/OfficeDev/msteams-samples-hello-world-csharp) sample in C#. In a terminal window, run the following command to clone the sample repository to your local machine:
+You can get started with a simple [Hello, World!](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-hello-world/csharp) sample in C#. In a terminal window, run the following command to clone the sample repository to your local machine:
```bash
-git clone https://github.com/OfficeDev/msteams-samples-hello-world-csharp.git
+git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
``` > [!TIP]
-> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/msteams-samples-hello-world-csharp) to modify and save your changes to GitHub for reference.
+> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/Microsoft-Teams-Samples) to modify and save your changes to GitHub for reference.
<a name="BuildRun"></a> ## Build and run the sample
-After the repo is cloned, use Visual Studio to open the solution file `Microsoft.Teams.Samples.HelloWorld.sln` from the root directory of the sample and select `Build Solution` from the `Build` menu. To run the sample press `F5` or choose `Start Debugging` from the `Debug` menu.
+After the repo is cloned, use Visual Studio to open the solution file `Microsoft.Teams.Samples.HelloWorld.sln` from the **Microsoft-Teams-Samples/samples/app-hello-world/csharp** directory of the sample and select `Build Solution` from the `Build` menu. To run the sample press `F5` or choose `Start Debugging` from the `Debug` menu.
When the app starts, a browser window opens with the root of the app launched. You can navigate to the following URLs to verify that all the app URLs are loading:
platform Get Started Nodejs App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-nodejs-app-studio.md
You can continue to use this terminal window to run the commands that follow in
### Download the sample
-We have provided a simple [Hello, World!](https://github.com/OfficeDev/msteams-samples-hello-world-nodejs) sample to get you started. In a terminal window, run the following command to clone the sample repository to your local machine:
+We have provided a simple [Hello, World!](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-hello-world/nodejs) sample to get you started. In a terminal window, run the following command to clone the sample repository to your local machine:
```bash
-git clone https://github.com/OfficeDev/msteams-samples-hello-world-nodejs.git
+git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
``` > [!TIP]
-> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/msteams-samples-hello-world-nodejs) if you want to modify and check in your changes to your GitHub repo for future reference.
+> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/Microsoft-Teams-Samples) if you want to modify and check in your changes to your GitHub repo for future reference.
<a name="BuildRun"></a>
git clone https://github.com/OfficeDev/msteams-samples-hello-world-nodejs.git
Once the repo is cloned, change to the directory that holds the sample: ```bash
-cd msteams-samples-hello-world-nodejs
+cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/
``` In order to build the sample, you need to install all its dependencies. Run the following command to do this:
NODE_CONFIG_DIR points to the directory at the root of the repository (by defaul
Once you install the app into a team, you will need to configure it to show content. Go to a channel in the team and click on the **'+'** button to add a new tab. You can then choose `Hello World` from the **Add a tab** list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. Once you select the tab and click on `Save` you can see the `Hello World` tab loaded with the tab you chose.
-<img width="430px" src="~/assets/images/samples-hello-world-tab-configure.png" alt-text="Screenshot of configure" />
+<img width="430px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png"/>
### Test your bot in Teams You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type `@your-bot-name`, followed by your message. This is called an **\@mention**. Whatever message you send to the bot will be sent back to you as a reply.
-<img width="450px" alt-text="Bot responses" src="~/assets/images/samples-hello-world-bot.png" />
+<img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png"/>
<a name="ComposeRichMessages"></a>
You can now interact with the bot in Teams. Choose a channel in the team where y
To test your messaging extension, you can click on the three dots below the input box in your conversation view. A menu will pop up with the **'Hello World'** app in it. When you click it, you will see a number of random texts. You can choose any one of them and it will be inserted it into your conversation.
-<img width="430px" alt-text="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu.png" />
+<img width="430px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu.png" />
-<img width="430px" alt-text="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result.png" />
+<img width="430px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result.png" />
Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.
-<img width="430px" alt-text="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />
+<img width="430px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />