Teams应用开发中microsoftTeams JS库无法访问media对象问题咨询

解决方案 #

• 升级 Teams JS SDK 到 v2 版本
  你当前使用的 v1.11.0 版本 SDK 未内置媒体设备能力相关接口，这是 microsoftTeams.media 为 undefined 的核心原因。直接替换 _layout.cshtml 中的 SDK 引入代码即可：

<script src="https://res.cdn.office.net/teams-js/2.21.0/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>

• 必须等待 SDK 初始化完成后再调用接口
  所有 Teams 相关接口调用都需要在初始化完成后执行，调整你的 JS 逻辑顺序：

// 页面加载后先初始化SDK
microsoftTeams.initialize(() => {
  // 初始化完成后再绑定按钮事件或者执行业务逻辑
  document.querySelector('#takePhotoBtn').addEventListener('click', takePhotos);
});

• 在应用 manifest 中添加设备权限声明
  打开 Teams 应用的配置清单 manifest.json，新增媒体权限配置：

"devicePermissions": [
  "media",
  "camera",
  "photos"
]

配置修改后需要重新上传应用或者侧加载更新才能生效。

• 增加兼容判断避免运行时报错
  调用媒体接口前先判断是否存在对应对象，适配不同客户端环境：

function takePhotos() {
  // 新增兼容判断
  if (!microsoftTeams?.media) {
    alert("当前运行环境不支持媒体采集能力");
    return;
  }
  // 你的原有逻辑
  var listOfSelectedImages = new Array();
  var imageProp = {
    sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
    startMode: microsoftTeams.media.CameraStartMode.Photo,
    ink: false,
    cameraSwitcher: false,
    textSticker: false,
    enableFilter: true,
  };
  var mediaInput = {
    mediaType: microsoftTeams.media.MediaType.Image,
    maxMediaCount: 10,
    imageProps: imageProp
  };
  microsoftTeams.media.selectMedia(mediaInput, function (error, attachments) {
    if (error) {
      if (error.message) {
        alert(" ErrorCode: " + error.errorCode + error.message);
      } else {
        alert(" ErrorCode: " + error.errorCode);
      }
    }
    if (attachments) {
      // 处理返回的附件逻辑
    }
  });
}

额外提示：首次调用媒体接口时，Teams 会弹出权限申请弹窗，用户同意授权后才能正常访问相机/相册。另外 Teams 网页版对媒体能力的支持有限，建议优先在桌面客户端、移动端客户端测试功能。

内容的提问来源于stack exchange，提问作者Vishnu K Rao