| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Submission Checklist | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/submission-checklist.md | Your app's name (specifically, its *[short name](~/resources/schema/manifest-sch :::row::: :::column span="3"::: :::column-end::: :::column span="1"::: :::column-end::: A concise summary of your app that should be original, engaging, and directed at :::row::: :::column span="3"::: :::column-end::: :::column span="1"::: :::column-end::: While this description can be as long as 4,000 characters, most users will only :::row::: :::column span="3"::: :::column-end::: :::column span="1"::: :::column-end::: Screenshots provide a prominent visual preview of your app to complement your ap :::row::: :::column span="3"::: :::column-end::: :::column span="1"::: :::column-end::: During submission, you're asked to categorize your app. The following table maps | Teams categories | Partner Center categories | |:|:|-| Analytics and BI | Analytics, Data Visualization, and BI | -| Developer and IT | Developer Tools, IT Admin | +| Data Visualization and BI | Analytics, Data Visualization, and BI | +| Developer Tools | Developer Tools, IT Admin | | Education | Education |-| Human resources | Human Resources and Recruiting | +| Human resources & recruiting| Human Resources and Recruiting | | Productivity | Content Management, Files and documents, Productivity, Training and Tutorials, and Utilities | | Project management | Communication, Project Management, Workflow, and Business Management | | Sales and support | Customer and Contact Management, Customer Support, Financial Management, and Sales and Marketing |-| Social and fun | Image and Video Galleries, Lifestyle, News and Weather, Social, Travel, and Navigation | +| Social | Image and Video Galleries, Lifestyle, News and Weather, Social, Travel, and Navigation | ### Localize your store listing |
| platform | Media Capabilities | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/media-capabilities.md | -For effective integration, you must have a good understanding of [code snippets](#code-snippets) for calling the respective APIs, which allow you to use native media capabilities. It's important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app. +For effective integration, you must have a good understanding of [code snippets](#code-snippets) for calling the respective APIs, which allows you to use native media capabilities. It's important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app. ## Advantages -The main advantage of integrating device capabilities in your Teams apps is it leverages native Teams controls to provide a rich and immersive experience to your users. The following scenarios showcase the advantages of media capabilities: +The main advantage of integrating device capabilities in your Teams apps is it uses native Teams controls to provide a rich and immersive experience to your users. The following scenarios showcase the advantages of media capabilities: * Allow the user to capture the rough mockups drawn on a physical whiteboard through the cell phone and use the captured images as poll options in Teams group chat. The main advantage of integrating device capabilities in your Teams apps is it l * Allow the user to scan the physical documents from the smartphone to file a car insurance claim. +* Allow the user to record a video at a worksite and upload for attendance. + > [!NOTE] > > * Currently, Teams doesn't support device permissions in pop out chat window, tabs, and the meeting side panel.</br> Update your Teams app [manifest.json](../../resources/schem# The [selectMedia](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-selectmedia), [getMedia](/javascript/api/@microsoft/teams-js/media.media#@microsoft-teams-js-media-media-getmedia), and [viewImages](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-viewimages) APIs enable you to use native media capabilities as follows: * Use the native **microphone** to allow users to **record audio** (record 10 minutes of conversation) from the device.-* Use native **camera control** to allow users to **capture and attach images** on the go. +* Use native **camera control** to allow users to **capture and attach images** and **capture videos** (record upto 5 minutes of video) on the go. * Use native **gallery support** to allow users to **select device images** as attachments. * Use native **image viewer control** to **preview multiple images** at one time. * Support **large image transfer** (from 1 MB to 50 MB) through the SDK bridge. Ensure to handle these errors appropriately in your Teams app. The following tab |Error code | Error name | Description| | | | -- |-| **100** | NOT_SUPPORTED_ON_PLATFORM | API is not supported on the current platform.| +| **100** | NOT_SUPPORTED_ON_PLATFORM | API isn't supported on the current platform.| | **404** | FILE_NOT_FOUND | File specified isn't found in the given location.| | **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 | The hardware does not support the capability.| +| **3000** | NO_HW_SUPPORT | The hardware doesn't support the capability.| | **4000**| INVALID_ARGUMENTS | One or more arguments are invalid.| | **8000** | USER_ABORT |User aborts the operation.| | **9000**| OLD_PLATFORM | Platform code is outdated and doesn't implement this API.|-| **10000**| SIZE_EXCEEDED | Return value is too big and has exceeded the platform size boundaries.| +| **10000**| SIZE_EXCEEDED | Return value is too large and has exceeded the platform size boundaries.| ## Code snippets * Call `selectMedia` API for capturing images using camera: -```javascript -let imageProp: microsoftTeams.media.ImageProps = { - sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery], - startMode: microsoftTeams.media.CameraStartMode.Photo, - ink: false, - cameraSwitcher: false, - textSticker: false, - enableFilter: true, -}; -let mediaInput: microsoftTeams.media.MediaInputs = { - mediaType: microsoftTeams.media.MediaType.Image, - maxMediaCount: 10, - imageProps: imageProp -}; -microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => { - if (error) { - if (error.message) { - alert(" ErrorCode: " + error.errorCode + error.message); - } else { - alert(" ErrorCode: " + error.errorCode); + ```javascript + let imageProp: microsoftTeams.media.ImageProps = { + sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery], + startMode: microsoftTeams.media.CameraStartMode.Photo, + ink: false, + cameraSwitcher: false, + textSticker: false, + enableFilter: true, + }; + let mediaInput: microsoftTeams.media.MediaInputs = { + mediaType: microsoftTeams.media.MediaType.Image, + maxMediaCount: 10, + imageProps: imageProp + }; + microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => { + if (error) { + if (error.message) { + alert(" ErrorCode: " + error.errorCode + error.message); + } else { + alert(" ErrorCode: " + error.errorCode); + } }- } - if (attachments) { - let y = attachments[0]; - img.src = ("data:" + y.mimeType + ";base64," + y.preview); - } -}); -``` + if (attachments) { + let y = attachments[0]; + img.src = ("data:" + y.mimeType + ";base64," + y.preview); + } + }); + ``` -* Call `getMedia` API to retrieve large media in chunks: +* Call `selectMedia` API for capturing videos using camera: -```javascript -let media: microsoftTeams.media.Media = attachments[0] -media.getMedia((error: microsoftTeams.SdkError, blob: Blob) => { - if (blob) { - if (blob.type.includes("image")) { - img.src = (URL.createObjectURL(blob)); - } - } - if (error) { - if (error.message) { - alert(" ErrorCode: " + error.errorCode + error.message); - } else { - alert(" ErrorCode: " + error.errorCode); - } - } -}); -``` + * Capturing videos with `fullscreen: true`: -* Call `viewImages` API by ID, which is returned by `selectMedia` API: + `fullscreen: true` opens the camera in video recording mode. It provides an option to use both front and rear camera and also provides other attributes as mentioned in the following example: -```javascript -// View images by id: -// Assumption: attachmentArray = select Media API Output -let uriList = []; -if (attachmentArray && attachmentArray.length > 0) { - for (let i = 0; i < attachmentArray.length; i++) { - let file = attachmentArray[i]; - if (file.mimeType.includes("image")) { - let imageUri = { - value: file.content, - type: 1, + ```javascript + + const defaultLensVideoProps: microsoftTeams.media.VideoProps = { + sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery], + startMode: microsoftTeams.media.CameraStartMode.Video, + cameraSwitcher: true, + maxDuration: 30 + } + const defaultLensVideoMediaInput: microsoftTeams.media.MediaInputs = { + mediaType: microsoftTeams.media.MediaType.Video, + maxMediaCount: 6, + videoProps: defaultLensVideoProps + } + ``` ++ * Capturing videos with `fullscreen: false`: ++ `fullscreen: false` opens the camera in video recording mode and uses the front camera only. Typically `fullscreen: false` is used when user wants to record video while reading content on the device screen. ++ This mode also supports `isStopButtonVisible: true` which adds a stop button on the screen that allows user to stop the recording. If `isStopButtonVisible: false`, recording can be stopped either by calling mediaController API or when the recording duration has reached `maxDuration` time specified. ++ Following is an example to stop the recording with `maxDuration` time specified: ++ ```javascript + const defaultNativeVideoProps: microsoftTeams.media.VideoProps = { + maxDuration: 30, + isFullScreenMode: false, + isStopButtonVisible: false, + videoController: new microsoftTeams.media.VideoController(videoControllerCallback) + } + const defaultNativeVideoMediaInput: microsoftTeams.media.MediaInputs = { + mediaType: microsoftTeams.media.MediaType.Video, + maxMediaCount: 1, + videoProps: defaultNativeVideoProps + } + ``` ++ Following is an example to stop the recording by calling mediaController API: ++ ```javascript + const defaultNativeVideoProps: microsoftTeams.media.VideoProps = { + videoController.stop(), + isFullScreenMode: false, + isStopButtonVisible: false, + videoController: new microsoftTeams.media.VideoController(videoControllerCallback) + } + const defaultNativeVideoMediaInput: microsoftTeams.media.MediaInputs = { + mediaType: microsoftTeams.media.MediaType.Video, + maxMediaCount: 1, + videoProps: defaultNativeVideoProps + } + ``` ++* Call `selectMedia` API for capturing images and video using camera: ++ This allows users to select between capturing an image or a video. ++ ```javascript + + const defaultVideoAndImageProps: microsoftTeams.media.VideoAndImageProps = { + sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery], + startMode: microsoftTeams.media.CameraStartMode.Photo, + ink: true, + cameraSwitcher: true, + textSticker: true, + enableFilter: true, + maxDuration: 30 + } + + const defaultVideoAndImageMediaInput: microsoftTeams.media.MediaInputs = { + mediaType: microsoftTeams.media.MediaType.VideoAndImage, + maxMediaCount: 6, + videoAndImageProps: defaultVideoAndImageProps + } + + let videoControllerCallback: microsoftTeams.media.VideoControllerCallback = { + onRecordingStarted() { + console.log('onRecordingStarted Callback Invoked'); + }, + }; + + microsoftTeams.media.selectMedia(defaultVideoAndImageMediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => { + if (error) { + if (error.message) { + alert(" ErrorCode: " + error.errorCode + error.message); + } else { + alert(" ErrorCode: " + error.errorCode); + } + } + + var videoElement = document.createElement("video"); + attachments[0].getMedia((error: microsoftTeams.SdkError, blob: Blob) => { + if (blob) { + if (blob.type.includes("video")) { + videoElement.setAttribute("src", URL.createObjectURL(blob)); }- uriList.push(imageUri); - } else { - alert("File type is not image"); }- } -} -if (uriList.length > 0) { - microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => { if (error) { if (error.message) {- output(" ErrorCode: " + error.errorCode + error.message); + alert(" ErrorCode: " + error.errorCode + error.message); } else {- output(" ErrorCode: " + error.errorCode); + alert(" ErrorCode: " + error.errorCode); } }- }); -} else { - output("Url list is empty"); -} -``` + }); + }); + + ``` -* Call `viewImages` API by URL: +* Call `getMedia` API to retrieve large media in chunks: -```javascript -// View Images by URL: -// Assumption 2 urls, url1 and url2 -let uriList = []; -if (URL1 != null && URL1.length > 0) { - let imageUri = { - value: URL1, - type: 2, - } - uriList.push(imageUri); -} -if (URL2 != null && URL2.length > 0) { - let imageUri = { - value: URL2, - type: 2, - } - uriList.push(imageUri); -} -if (uriList.length > 0) { - microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => { + ```javascript + let media: microsoftTeams.media.Media = attachments[0] + media.getMedia((error: microsoftTeams.SdkError, blob: Blob) => { + if (blob) { + if (blob.type.includes("image")) { + img.src = (URL.createObjectURL(blob)); + } + } if (error) { if (error.message) {- output(" ErrorCode: " + error.errorCode + error.message); + alert(" ErrorCode: " + error.errorCode + error.message); } else {- output(" ErrorCode: " + error.errorCode); + alert(" ErrorCode: " + error.errorCode); } } });-} else { - output("Url list is empty"); -} -``` + ``` -* Call `selectMedia` and `getMedia` APIs for recording audio through microphone: +* Call `viewImages` API by ID, which is returned by `selectMedia` API: -```javascript -let mediaInput: microsoftTeams.media.MediaInputs = { - mediaType: microsoftTeams.media.MediaType.Audio, - maxMediaCount: 1, -}; -microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => { - if (error) { - if (error.message) { - alert(" ErrorCode: " + error.errorCode + error.message); - } else { - alert(" ErrorCode: " + error.errorCode); + ```javascript + // View images by id: + // Assumption: attachmentArray = select Media API Output + let uriList = []; + if (attachmentArray && attachmentArray.length > 0) { + for (let i = 0; i < attachmentArray.length; i++) { + let file = attachmentArray[i]; + if (file.mimeType.includes("image")) { + let imageUri = { + value: file.content, + type: 1, + } + uriList.push(imageUri); + } else { + alert("File type is not image"); + } } }- // If you want to directly use the audio file (for smaller file sizes (~4MB)) if (attachments) { - let audioResult = attachments[0]; - var videoElement = document.createElement("video"); - videoElement.setAttribute("src", ("data:" + y.mimeType + ";base64," + y.preview)); - //To use the audio file via get Media API for bigger audio file sizes greater than 4MB audioResult.getMedia((error: microsoftTeams.SdkError, blob: Blob) => { - if (blob) { - if (blob.type.includes("video")) { - videoElement.setAttribute("src", URL.createObjectURL(blob)); + if (uriList.length > 0) { + microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => { + if (error) { + if (error.message) { + output(" ErrorCode: " + error.errorCode + error.message); + } else { + output(" ErrorCode: " + error.errorCode); + } + } + }); + } else { + output("Url list is empty"); + } + ``` ++* Call `viewImages` API by URL: ++ ```javascript + // View Images by URL: + // Assumption 2 urls, url1 and url2 + let uriList = []; + if (URL1 != null && URL1.length > 0) { + let imageUri = { + value: URL1, + type: 2, }+ uriList.push(imageUri); }- if (error) { - if (error.message) { - alert(" ErrorCode: " + error.errorCode + error.message); - } else { - alert(" ErrorCode: " + error.errorCode); + if (URL2 != null && URL2.length > 0) { + let imageUri = { + value: URL2, + type: 2, }+ uriList.push(imageUri); }-}); -``` + if (uriList.length > 0) { + microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => { + if (error) { + if (error.message) { + output(" ErrorCode: " + error.errorCode + error.message); + } else { + output(" ErrorCode: " + error.errorCode); + } + } + }); + } else { + output("Url list is empty"); + } + ``` ++* Call `selectMedia` and `getMedia` APIs for recording audio through microphone: ++ ```javascript + let mediaInput: microsoftTeams.media.MediaInputs = { + mediaType: microsoftTeams.media.MediaType.Audio, + maxMediaCount: 1, + }; + microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => { + if (error) { + if (error.message) { + alert(" ErrorCode: " + error.errorCode + error.message); + } else { + alert(" ErrorCode: " + error.errorCode); + } + } + // If you want to directly use the audio file (for smaller file sizes (~4MB)) if (attachments) { + let audioResult = attachments[0]; + var videoElement = document.createElement("video"); + videoElement.setAttribute("src", ("data:" + audioResult.mimeType + ";base64," + audioResult.preview)); + audioResult.getMedia((error: microsoftTeams.SdkError, blob: Blob) => { + if (blob) { + if (blob.type.includes("video")) { + videoElement.setAttribute("src", URL.createObjectURL(blob)); + } + } + if (error) { + if (error.message) { + alert(" ErrorCode: " + error.errorCode + error.message); + } else { + alert(" ErrorCode: " + error.errorCode); + } + } + }); + }); + ``` ## See also |
| platform | Azure Provisioning Instructions Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions-tab.md | Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands"::: -1. Select a subscription to use for the Azure resources. +1. Select anyone of the existing subscription. ++ :::image type="content" source="~/assets/images/teams-toolkit-v2/select-subscription.png" alt-text="Select Subscription"::: ++1. Select a resource group to use for the Azure resources. :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing resources for provisioning"::: Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool 1. Select **Provision**. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provision-warning.png" alt-text="Screenshot of the provisioning dialog."::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/provision-confirm1.png" alt-text="Select Subscription"::: The provisioning process creates resources in the Azure cloud. It may take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice: Once the provisioning and deployment steps are complete: Congratulations, your first tab app is running in your Azure environment! :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/azure-deployed-apptab.png" alt-text="Screenshot shows message to try the app now or later":::- |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Microsoft Teams platform features that are available to all app developers. | **Date** | **Update** | **Find here** | | -- | | -|+| 09/06/2022 | `selectMedia` API for capturing videos using camera | Integrate device capabilities > [Integrate media capabilities](concepts/device-capabilities/media-capabilities.md#code-snippets) | | 08/09/2022 | Introduced Teams Toolkit for Visual Studio 2022 | Tools and SDK > Teams Toolkit for Visual Studio > [Teams Toolkit overview for Visual Studio](toolkit/teams-toolkit-overview-visual-studio.md) | | 08/03/2022 | Share to Teams from personal app or tab | Integrate with Teams > Share to Teams > [Share to Teams from personal app or tab](concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md) | | 08/03/2022 | Added feature for retrieving meeting transcripts in the post-meeting scenario. | Build apps for Teams meetings and calls > Get meeting transcripts using Graph APIs > [Overview](graph-api/meeting-transcripts/overview-transcripts.md) | |