'upload camera functionality doesn’t work on MS Teams task module on android

I have an extension in MS Teams, which open a task module - basically an angular application. as seen below:

enter image description here

The functionality of the app is to perform upload images.

HTML Code:

<input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload />

So, the issue is when I click the button on ios it gives me the option to upload from camera. But that’s not the case in android

After doing some research I tried a couple of options in HTML

<input accept="image/*" capture type="file" class="file-input" (change)="onFileSelected($event)" #cameraUpload  />

or,

<input type="file" accept="image/*;capture=camera">

none of them works inside the teams.

Now when I run the app in the browser and click on file upload it shows the camera options:

enter image description here

How can I perform the same functionality inside MS Teams, task module

htmlangularmicrosoft-teams


Solution 1:[1]

You can add below permissions to your manifest to support media capabilities:

"devicePermissions": [
"media"]


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

Can you please refer below documentation to integrate media capabilities. https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/mobile-camera-image-permissions

Git Repo for sample code: https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-device-permissions/nodejs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman

Related Questions