Microphone permissions on desktop version Teams

New Contributor

Hello.

 

I'm developing a Teams custom app that translates speech into text by speech recognition. I want to make a web app that converts voice into text available in Teams tabs.

 

The problem is:

Voice recognition can be performed with personalTab and channelTab, but device access cannot be permitted with privateChatTab, meetingChatTab, and meetingDetailTab, and voice data cannot be acquired. The web version works fine on all tabs.

 

For this issue, I tried the following:
  • Changed to require microphone access permission from the app manifest. The device access permission item is displayed, but even if you [Allow], once you close it, it returns to [Deny] (see image).

 

  • Changed to request device permission from the web application side . The dialog requesting device permission is not displayed.

 

  • Check operation with DevTools. When starting the web application, the error "Uncaught (in promise) DOMException: Permission denied" is displayed on the console.

 

Please help me.

1 Reply

Hello @DAICHI_HADAMA ,
We tried to do it at our end and we didn't face any issue on Teams desktop application.

Following are the repro steps from our end - 

  1. We hope that your app manifest's context for configurableTabs includes the following: 
    "context":[
            "channelTab",
            "privateChatTab",
            "meetingChatTab",
            "meetingDetailsTab",
            "meetingSidePanel",
            "meetingStage"
         ]​
    Please refer the following doc for further details about specific context : 
  2. Make sure that microphone is in Allowed state. (you can find the microphone icon at top-right corner of address bar as in below screenshot) HunaidHanfeeMSFT_0-1626245697071.png
  3. Once you allow the permission to use microphone, the app instance remembers it until you are logged in the same session. To check if the microphone permission is granted you can use this: 
    navigator.permissions.query({name:'microphone'}).then(function(result) {
          alert(result.state);
        });​
  4. We have used the following method for testing microphone functionality at our end: 
    navigator.mediaDevices.getUserMedia({ audio: true, video: true })​

Thanks,

Hunaid Hanfee

--------------------------------------------------------------------------------------------------------------------------------------------

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.