Issue with auido/video (media devices) in Microsoft Teams App

Copper Contributor

I am trying to build a Microsoft Teams app, that will be either used inside the call or as a "Tab". In my application I am using user's audio/video and screen sharing. I have created an app as a Tab, but the permission are not there for the media devices. So those features are not working. Is there a way or a different integration type so I can have media devices available in my app. Here (link attached below) you can see that class has an integration within the call with audio/video. So I guess it should be possible. https://www.class.com/built-on-microsoft-teams/#form

In my application I put an iframe in the html, which opens my app. I have used Micrososft Teams Tabs. Maybe the issue comes from an iframe.

4 Replies

Hello @ChetanSharma-msft. Thanks for the reply.

 

I've tried this but can't get it working:

``

media.requestPermission().then(permissions => { console.log("permissions", permissions); }).catch(e => { console.log("permissions error", e); });

const mediaObj = new media.Media();
const log = (err, blob) => {
    if (err) {
        console.log("err", err);
    }
    if (blob) {
        console.log("blob", blob);
    }
};
mediaObj.getMedia(log);

 

I get this errorScreenshot 2024-01-17 at 18.36.09.png

 

I checked my manifest. If I get it right I have the needed permission. This is my manifest.json:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.13/MicrosoftTeams.schema.json",
  "manifestVersion": "1.13",
  "id": "{{APPLICATION_ID}}",
  "version": "{{VERSION}}",
  "packageName": "{{PACKAGE_NAME}}",
  "developer": {
    "name": "InSpace",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "privacyUrl": "https://{{PUBLIC_HOSTNAME}}/privacy.html",
    "termsOfUseUrl": "https://{{PUBLIC_HOSTNAME}}/tou.html"
  },
  "name": {
    "short": "InSpace",
    "full": "InSpace"
  },
  "description": {
    "short": "TODO: add short description here",
    "full": "version 1.1"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#D85028",
  "configurableTabs": [],
  "devicePermissions": [
    "media",
    "geolocation",
    "notifications",
    "openExternal",
    "midi"
  ],
  "defaultInstallScope": "meetings",
  "defaultGroupCapability": {
      "meetings": "tab"
  },
  "staticTabs": [
    {
      "entityId": "d6f8e14c-ef6b-435a-aeb3-7baa5a1904f7",
      "name": "InSpace Tab",
      "contentUrl": "https://{{PUBLIC_HOSTNAME}}/inSpaceTab/?name={loginHint}&tenant={tid}&theme={theme}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "personalTab",
      "name": "Personal Tab ",
      "contentUrl": "https://{{PUBLIC_HOSTNAME}}/inSpaceTab/personal.html",
      "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
      "scopes": ["personal"]
    }
  ],
  "bots": [],
  "connectors": [],
  "composeExtensions": [],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "{{PUBLIC_HOSTNAME}}"
  ],
  "showLoadingIndicator": false
}

@ArmenKakosyan Sorry, I would try to help, I know some code but not this complex like you do! Good job, keep it up! :hearteyes:

Thank you :D Is there a place or a contact where I can reach out to get more information or maybe a walkthrough on how can I get this done?