{"id":6079,"date":"2021-03-09T12:39:10","date_gmt":"2021-03-09T20:39:10","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6079"},"modified":"2021-03-09T12:39:10","modified_gmt":"2021-03-09T20:39:10","slug":"4-device-capabilities-developers-can-utilize-for-microsoft-teams-mobile-apps","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/4-device-capabilities-developers-can-utilize-for-microsoft-teams-mobile-apps\/","title":{"rendered":"Four device capabilities developers can utilize for Microsoft Teams mobile apps"},"content":{"rendered":"

Microsoft Teams is designed to \u201cmeet users where they are\u201d \u2013 enhancing productivity and collaboration no matter where you are or how you work. And customers are using Teams and its ecosystem of apps to support diverse work scenarios that support their unique needs, such as a growing need for mobile-first scenarios. To meet these needs, developers need tools and resources to build innovative Teams apps for both desktop and mobile.<\/p>\n

That\u2019s where the Microsoft Teams JavaScript client SDK<\/a> fits in and is a tool you should utilize as you build your Teams app. It\u2019s a toolkit that makes it easy to integrate your own services within Teams for desktop and mobile app development. We are excited to share four device capabilities<\/a> – image, microphone, location, QR\/Barcode scanner – that you can now utilize to light up new and compelling scenarios. These high-value experiences come out-of-box in the SDK and can be leveraged with minimal effort, reducing the barrier to app development.<\/p>\n

Before you get started<\/h4>\n

Before we jump into these great device capabilities to take advantage of, you\u2019ll need to request device permissions to access native device capabilities<\/a>. The Teams JavaScript client SDK will provide all the tools necessary for your Teams mobile app to access the user\u2019s device permissions. With a few updates to your app\u2019s manifest, you\u2019ll be on your way.<\/p>\n

Capture or select media from the device camera<\/h4>\n

For scenarios that you want to build involving device camera or photo gallery, we\u2019ve introduced the selectMedia() API<\/a>. This API allows users to capture or select media from the device camera and return it to the web-app. In response to selectMedia, the web-app receives the media IDs of selected images and a thumbnail of the selected media. The native camera control is powered by Microsoft Office Lens SDK which allows for advanced functionalities such as scanning documents and whiteboard, letting users leverage edit features such as crop, rotate and annotate over an image.<\/p>\n

You can access the code snippet for the selectMedia() API<\/a> from our docs.<\/p>\n

Here’s how the experience looks in a sample application:<\/p>\n

\"Image<\/p>\n

Record audio from the device microphone<\/h4>\n

You can also design powerful scenarios involving use of device microphone. We have enhanced our selectMedia() API<\/a> to support audio recording capability as well. This allows end users to record audio via the device microphone and preview the audio file before submitting. Relevant scenarios that this capability would enable include real-time note taking for field representatives\/agents that need to capture notes quickly on their device.<\/p>\n

You can access the code snippet for the selectMedia() API<\/a> from our docs.<\/p>\n

Here\u2019s how the experience looks in a sample application:<\/p>\n

\"Image<\/p>\n

 <\/p>\n

Fetch and show device location on map<\/h4>\n

For scenarios involving end users sharing their current location and picking a specific location on map, we have introduced getLocation() API<\/a> in Teams JavaScript client SDK. Furthermore, showLocation() API could be leveraged to open location coordinates in native location supporting applications.<\/p>\n

You can access the code snippet for the getLocation() API and showLocation() API<\/a> from our docs.<\/p>\n

Here\u2019s how the experience looks in a sample application:<\/p>\n

\"Image<\/em><\/p>\n

 <\/p>\n

Utilize the device camera for QR code or barcode scanning<\/h4>\n

And lastly, for scenarios requiring users to scan a barcode to complete a workflow, we have introduced scanBarCode() API<\/a> in Teams client SDK. Barcode is a method of representing data in a visual and machine-readable form and this capability lets a Teams webapp leverage scanner control powered by Microsoft Office Lens SDK to read it and share the details back with the underlying application. These can light up scenarios that eliminate the arduous and manual components of some activities.<\/p>\n

You can access the code snippet for the scanBarCode() API<\/a> from our docs.<\/p>\n

Here\u2019s how the experience looks in a sample application:<\/p>\n

\"Image<\/p>\n

 <\/p>\n

To see these capabilities in action, view this example app that we\u2019ve built using camera, microphone, and location:<\/p>\n

\u00a0<\/em><\/p>\n

\"GIF<\/em><\/p>\n

 <\/p>\n

 <\/p>\n

And here\u2019s an example of an app using QR code scanner capabilities:<\/p>\n

\"\"<\/em><\/p>\n

 <\/p>\n

All of the above capabilities are now generally available with the release of version 1.9 of Teams JavaScript client SDK<\/a> \u2013 and we have more new features coming soon that will integrate \u2018People Picker\u2019 high value components, video capture\/player capabilities, and image capture\/location capabilities (desktop).<\/p>\n

Now that you\u2019ve learned about these four great device capabilities, you can start using these APIs to enable innovative scenarios in your Teams app for the mobile workforce! We\u2019ve provided our developer documentation and SDK reference documentation pages below for easy access to learn more on how to integrate these in your webapps.<\/p>\n

Happy coding!<\/p>\n

Documentation links<\/p>\n