Microsoft Teams标签开发：独立窗口运行时媒体权限申请失效问题

数据老陈

2026-9-27

解决方案

1. 补全应用manifest.json配置

在原有devicePermissions配置的基础上，补充两个配置项：

根节点添加"supportsPopout": true，明确声明应用支持弹出独立窗口，触发Teams的跨窗口权限同步逻辑
若你使用的是静态标签，在staticTabs对应的配置项中，给context数组新增"popout"取值

修改完成后的示例配置如下：

{
  // 其他manifest配置
  "devicePermissions": [ 
    "media"
  ],
  "supportsPopout": true,
  "staticTabs": [
    {
      // 你的标签原有配置
      "context": ["personalTab", "channelTab", "popout"]
    }
  ]
}

修改完成后重新打包应用并更新到Teams后台，重新安装应用生效。

2. 调整麦克风权限申请逻辑

不要直接调用浏览器原生的navigator.mediaDevices.getUserMedia接口申请权限，必须先走Teams JS SDK的权限申请流程，确保独立窗口下的权限申请会被转发到Teams客户端处理，代码示例如下：

// 先初始化Teams SDK
microsoftTeams.app.initialize().then(async () => {
  // 先申请Teams层面的媒体权限
  const permissionResult = await microsoftTeams.media.requestPermissions([microsoftTeams.media.Permission.Media]);
  if (permissionResult === microsoftTeams.media.PermissionStatus.Granted) {
    // 拿到Teams授权后再调用原生媒体接口
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 后续处理媒体流逻辑
  } else {
    // 引导用户授权的提示逻辑
  }
});