How to have audio/video in Microsoft Teams Tabs/Call App?

Armen Kakosyan 5

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.

LiweiTian-MSFT 18,465 Reputation points Microsoft Vendor

2024-01-17T09:26:23.2866667+00:00

Hi @Armen Kakosyan

Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. Since your question is related to Teams Development, which is not in our support scope. Thanks for your understanding!

1 answer

Andrew Connell 141 Reputation points MVP

2024-01-16T23:15:21.85+00:00

Teams tabs are already iframes… it’s loading a webpage in your the teams client. So if your web app also has an iframe, it’s iframing an iframe which I’m sure will have all sorts of issues. your teams app can request access to the camera and mic on the users machine as part of the manifest declaration. is there a reason why you can’t have you app use the permissions and device capabilities in teams?
Please sign in to rate this answer.
Armen Kakosyan 5 Reputation points

2024-01-17T14:38:30.03+00:00

Thanks @Andrew Connell for the answer. I've tried getting permission. Which asked user permission before opening my app, but inside my app I still could not get the media devices. And I've received this error in the console (see screenshot below).

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

Armen Kakosyan 5 Reputation points

2024-01-17T14:44:12.29+00:00

this is the errors I get, can't attach screenshots

err -> { errorCode: 4000 } blob -> { size: 0, type: '' }

I receive this error when getting permission:
code -> 500
message -> 'permission does not exist in the app manifest' My manifest looks like this:

{ "$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 }

Andrew Connell 141 Reputation points MVP

2024-01-17T15:01:37.73+00:00

Is this with the double-nested iframe approach? First thing I'd suggest is eliminating that... iframes in iframes breaks all kinds of best practices. While not listed in the teams docs, I wouldn't be surprised if that's because it was never considered.

The error code you're receiving indicates your arguments aren't valid.

Look at the code snippets following the last link I shared. Compared to your code, looks like you're code isn't correct.

Prasad-MSFT 6,586 Reputation points Microsoft Vendor

2024-03-06T11:42:57.36+00:00

Armen Kakosyan - You need to add device permissions in your manifest as explained in below document:
https://learn.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#devicepermissions

Ex:
"devicePermissions": [

"media",

"geolocation"

]

Also refer this sample: https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-device-permissions
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to have audio/video in Microsoft Teams Tabs/Call App?

1 answer

Your answer