Forum Discussion

ArmenKakosyan's avatar
ArmenKakosyan
Copper Contributor
Jan 16, 2024

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

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 https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab?tabs=vs&pivots=node-java-script. Maybe the issue comes from an iframe.

developer
microsoft teams

4 Replies

    • ArmenKakosyan's avatar
      ArmenKakosyan
      Copper Contributor
      Jan 18, 2024
      Thank you 😄 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?
    • ArmenKakosyan's avatar
      ArmenKakosyan
      Copper Contributor
      Jan 17, 2024

      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 error

       

      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
}