PermissionDeniedError returned when trying to share screens using statefull components and teams toolkit

[AlbertoPerez8]

Im getting a permissionDeniedError when I attempt to share my screen using a video statefull component inside a teams toolkit app built with React.

Before switching to the statefull components, I was using the Video Composites and was able to share screens with no issue. I made sure that I had the correct permissions on both the teams toolkit manifest and on chrome's browser permissions. It turned out that for our use case, having the statefull components was a better fit and so we changed to that. When testing the call aspects, the camera and microphone work as intended, but the share screen feature returns the error above.

The calling component has this code:

Here is the complete state creation process:

The code section that manages the video stream is as follows:

And here is where the calling component is render along with the state checks being made:

Here are the currently active permissions present in the manifest files:

Finally here is my complete set of package dependancies:

• OS & Device: Windows 10 on PC
• Browser: Google Chrome & Microsoft Edge
• Browser Version: 114.0.5735.134 (Official Build) (64-bit) [Chrome]. Version 114.0.1823.43 (Official build) (64-bit) [Edge]

Code snippet as texts:
CallingComponents.txt (Component created)
ChatStatefuls.txt (state management & component called)
manifest.txt (app persmissions)
package.txt

[alkwa-msft]

@AlbertoPerez8 thanks for writing this issue. We are looking into this with the team and will be sharing a response when we have any ideas.

This is a really interesting scenario. We haven't directly tried building an experience with Azure Communication Services and Teams Toolkit but we do know it is quite a hot topic. Thanks for sharing you were able to have the Call Composite work directly with the Teams Toolkit with the correct permissions set.

From the console I believe I am reading we fail on the screenshare call, then we leave the call, and then we hit a button but we are already out of the call so that action is not allowed?

Perhaps you can walk us through some of the experience you are seeing.

• Do you have a screen sharing button?
• When you click on the screen sharing button is that when the exception throws?
• Are you able to load up the screen share chromium dialog to select your tab/window/screen?
• Are you hitting cancel at any time during the chromium screenshare dialog?

The more we understand about your experience the more insight we may have in helping to provide a helpful response.

[AlbertoPerez8]

We do have a small bug on the case when we answer a call from a sister app built solely with react, where the application on teams creates a secondary call when answering, but for the experience flow I'll explain the case when the call is created from the toolkit application since the duplicate call issues doesn't present itself.

The process begins where the user working with the teams toolkit app creates the call and the reciever on the sister app answers. From here the user has the options to click the buttons in the little menu to turn on/off the camera, mute/unmute, present your screen in the call, view chat participants, and end the call.

(call screen)
(call screen with developer tools on)

In this example, I cleared the developer tools console, and immediately pressed the button for screen sharing and took this screenshot with the error.
(error when pressing share screen button)

(error close up)

When I would reach this point in previous tests before checking the developer tools console, I did not received any indication that there were any errors or issues, apart from not being able to see any pop-ups that normally appear asking what screen or window to share in other applications. No screen share dialogs where opened when clicking the button at all.
That's when I was reminded to check the dev tools console, and saw the error above.

Other than this issue and the aforementioned double calls bug, no other issues appear from using the state full. I am able to operate camera and microphone actions, as well as terminating the call.

[mgamis-msft]

@AlbertoPerez8 Sorry for the late response.

I am wondering if there is something specific with using Teams toolkit that interferes with screen sharing operation. I tried screensharing from our calling quickstart and found no issues with screen sharing but I did not incorporate any Teams toolkit code. I will need some time to investigate and get acclimated with the basics of Teams tool kit.

Is Teams tool kit just used just for UI to wrap the stateful components code? Or does it also use the ACS token and id?

Also does the sister app, you mention also get this screensharing error? I'm assuming the sister app does not incorporate Teams toolkit code?

[AlbertoPerez8]

So the sister application is running the acs communication library just on a create-react-app application without the use of the Teams Toolkit, and it hasn't run into any screen sharing issues. The teams toolkit used for my app is wrapping my application, rendering it inside an Iframe. The toolkit does make me ask the user permission to gain access to their media (i.e. microphone, camera, and speakers) and its allowed when I'm testing in both the toolkit and browser window, but it still wouldn't let me screenshare.

[mgamis-msft]

Hey @AlbertoPerez8, sorry for the late response. Is this still an issue? I have not had a chance to try teams toolkit yet but we have had numerous permission fixes in our newest version since this issue was filed.

[mgamis-msft]

Closing this issue due to staleness. @AlbertoPerez8 please re-open if this issue is still happening.