Share to Stage for Guest Users

[joylin2024]

Type of issue

Missing information

Feedback

A scenario where the host shares app content to the stage and the guest can see both the shared screen and the collaborative app content in a meeting using JavaScript.

Page URL

https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content

Content source URL

https://github.com/MicrosoftDocs/msteams-docs/blob/main/msteams-platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage.md

Author

@v-sdhakshina

Document Id

5ca1f6b3-347e-7182-0d26-d282e26f3614

[Nivedipa-MSFT]

@joylin2024 - Thank you for reporting your issue. We are not quite clear on the details. Could you please elaborate further?

[joylin2024]

Hi Teams Platform,

When the host shares their screen, guests can view both the host's screen and another screen from a different URL, allowing guests to interact with the content.

This is a screenshot of the guest's example

Feel free to reach out if you have any further questions.

Thanks, Joy Lin

[Nivedipa-MSFT]

@joylin2024 - thanks for sharing the screenshots for our understanding. Just a quick query here, do you want these to be documented in the official documentation or what is your actual requirement?

[JoyBlin]

Could you please guide me on where to find the code related to this specific feature?

Your help would be greatly appreciated.

Thanks,

Joy

[ChetanSharma-msft]

Hello @JoyBlin - Meeting stage sample is one of the sample linked to the documentation? https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#code-sample

You can also refer "Build apps for anonymous users" documentation: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-anonymous-user?tabs=javascript

Sample code: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-anonymous-user?tabs=javascript#code-sample

Please let us know if you have further queries.

[joylin2024]

Hi. Thank you for your prompt response. Unfortunately, I couldn't find the answer in the references you provided. How can I implement a feature where the host can share their screen while providing an interactive window for guests on the meeting stage?

[ChetanSharma-msft]

Hello @JoyBlin - Sorry for the inconvenience. We will check with the engineering team whether this feature is support or not and let you know the updates.

[joylin2024]

Thanks for checking with the engineering team. Looking forward to the updates.

[ChetanSharma-msft]

We will let you know once we get inputs from engineering team.

[ChetanSharma-msft]

Hello @JoyBlin - Sorry for delay in response. This functionality is not available as a supported scenario in the documentation, So, we are actively checking with engineering team on priority and let you know once we get any confirmation.

Thanks for your patience!

[Nivedipa-MSFT]

@JoyBlin - We got an update from engineering team saying that sharing stage and teams screen sharing side by side simultaneously is not possible. To achieve your requirements, we recommend you give your feedback in Teams Feedback Portal. .

If you don't mind having the interactive experience in the sidepanel, you can have both the screen sharing and interactive abilities concurrently. An example of this can be seen for the Polls app, in which the meeting participant can interact with the sidepanel, while seeing the video stream of the presenter who's presenting their view of Polls.

Presenter:

Meeting participant:

Please let us know if you have any further query here?

[joylin2024]

Thank you for the update and for providing an alternative solution.

I understand that sharing the stage and screen simultaneously is not possible at the moment. I will certainly give my feedback in the Teams Feedback Portal as recommended.

Regarding the interactive experience in the side panel, that sounds like a viable workaround. I will explore this option further. Could you please provide example code or additional guidance on how to implement this solution?

If I have any further queries or need additional assistance, I will reach out.

Thank you again for your help.

Best regards, Joy

[ChetanSharma-msft]

Hello @JoyBlin - Meeting stage sample is one of the sample linked to the documentation? https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#code-sample

You can also refer "Build apps for anonymous users" documentation: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-anonymous-user?tabs=javascript

Sample code: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-anonymous-user?tabs=javascript#code-sample

Please let us know if you have further queries.

@joylin2024 - Please refer these links for all the relevant contents and linked samples, specially below: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#code-sample

[ChetanSharma-msft]

Hello @JoyBlin - Please share your valuable feedback for us: Microsoft Teams Developer Community Response Feedback

Also, we will be closing this issue. Please feel free to reopen it or raise another issue.

[joylin2024]

Sharing the stage and screen simultaneously is possible, similar to what I've seen in other applications. I'm interested in learning how to code this functionality. Could you please check with the engineering team for more details?

I look forward to your reply. Thanks, Joy

[ChetanSharma-msft]

Hello @JoyBlin - Could you please share more details about Teams applications (1st party or 3rd party apps) where you have experienced this functionality (Sharing the stage and screen simultaneously)?

The engineering team already confirmed that this is not supported but still we will check on it once you share the above information.

[ChetanSharma-msft]

Hello @joylin2024 - Thanks for your inputs. I will check with the engineering team and let you know the updates.

[joylin2024]

Thank you! I'm eager to hear your updates soon.

[Nivedipa-MSFT]

@JoyBlin -

As said by engineering team, the functionality to simultaneously screen share and share to stage is implemented by Mentimeter team in their own web iframe. They are only using share to stage capability. Share to stage functionality is already documented here: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#share-to-stage.

I believe there are two options forward:

• As we recommended before, use meeting sidepanel for interactivity and stage for screen sharing (https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#screen-share-content-to-meetings)
• Check out Live Share, which is another potential SDK that might help in your goal (Live Share overview - Teams | Microsoft Learn).

You can use meeting sidepanel for interactivity and stage for screen sharing. Ref Doc: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#screen-share-content-to-meetings

The implementation of meeting sidepanel is documented here: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-tabs-for-meeting?branch=add-apps-in-meetings&tabs=desktop%2Cmeeting-chat-view-desktop%2Cmeeting-side-panel%2Cmeeting-stage-view-desktop%2Cchannel-meeting-desktop#configure-tab-app-for-a-meeting

Code sample here for meeting sidepanel: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-tabs-for-meeting?branch=add-apps-in-meetings&tabs=desktop%2Cmeeting-chat-view-desktop%2Cmeeting-side-panel%2Cmeeting-stage-view-desktop%2Cchannel-meeting-desktop#code-sample

And the implementation of screen sharing to stage with code sample is documented here: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cshare-app-content#screen-share-content-to-meetings

Please let us know if you have any other query here.

[joylin2024]

Great. Thanks!

[joylin2024]

In this document,
https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/build-apps-for-teams-meeting-stage?tabs=desktop%2Capp-content%2Cscreen-share-content#screen-share-content-to-meetings

For View Only Screen share
const shareSpecificAppContentScreenShare = (partName) => { var appContentUrl = ""; microsoftTeams.app.getContext().then((context) => { appContentUrl = partName == 'todo' ? ${window.location.origin}/todoView?meetingId=${context.meeting.id} : partName == 'doing' ? ${window.location.origin}/doingView?meetingId=${context.meeting.id} : ${window.location.origin}/doneView?meetingId=${context.meeting.id}; microsoftTeams.meeting.shareAppContentToStage((err, result) => { if (result) { // handle success console.log(result); }

              if (err) {
                  // handle error
                  alert(JSON.stringify(err))
              }
          }, appContentUrl,
              // Optional shareOptions with sharingProtocol set to ScreenShare
              {
                  sharingProtocol: microsoftTeams.meeting.SharingProtocol.ScreenShare
              });
      });
  };

I added this line of code, but it doesn't work. Could you clarify why it isn't working for me?

Looking forward to hear from you soon.

Thanks, Joy

[ChetanSharma-msft]

Hello @JoyBlin - Could you please share any error if you are getting?

[joylin2024]

On the guest side, I encountered the following error:

Thanks, Joy

[Nivedipa-MSFT]

@joylin2024 - We will test this and update you soon.

[joylin2024]

Great. Thanks!

[Nivedipa-MSFT]

@joylin2024 - Could you let us know which platform you are testing this on (web, desktop, or mobile) and also provide the OS details? Additionally, are you using classic Teams or the new Teams? In the meantime, we are also trying this out.

[Nivedipa-MSFT]

@joylin2024 - Could you please refer below sample for SharingProtocol.ScreenShare. Microsoft-Teams-Samples/samples/meetings-stage-view/csharp at main · OfficeDev/Microsoft-Teams-Samples (github.com)

We have tested this sample but getting below error.

We have raised an issue for this: https://github.com/OfficeDev/Microsoft-Teams-Samples/issues/1367

[joylin2024]

I am currently testing this on the web platform with Windows 11 Pro, version 23H2. I’m using the new Teams for this implementation. I appreciate you looking into this in the meantime!

[joylin2024]

Hi, I'm having trouble defining the host in my code. I tried using the snippet below, but it's not working as expected. Could you please help me figure out what's wrong?

app.getContext().then((context) => { let isHost = false; // Check if the user is the meeting organizer if (context.meeting.role === meeting.MeetingRole.Organizer) { isHost = true; } })

Thanks, Joy Lin

[ChetanSharma-msft]

Hello @JoyBlin - What error you are getting here? Could you please check this C# code: https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/meetings-sidepanel/csharp/SidePanel/Controllers/HomeController.cs#L95

[joylin2024]

Hi, sorry, I am using react.js, so I don't know how to test the C# code. Can we display different appContentUrls on the meeting stage based on the user's role, such as whether they are an attendee or not? If so, could you provide sample code for this?

var appContentUrl ="" meeting.shareAppContentToStage((err, result) => { if (result) { // Handle success console.log("Content shared successfully:", result); } if (err) { // Handle error console.error("Error sharing content to stage:", err); } }, appContentUrl);

[Nivedipa-MSFT]

@joylin2024 - To get the meeting user role such as guest, attendee, or presenter in Microsoft Teams, you can use the Microsoft Graph API. You need to retrieve the meeting details using the Microsoft Graph API. You can use the GET /me/onlineMeetings/{meetingId} endpoint to get the details of a specific meeting. In the response, you will find the participants property, which contains information about the participants in the meeting. Each participant will have a role property that indicates their role in the meeting (e.g., attendee, presenter, guest). After getting the role you can set the appContentUrl accordingly.

Refer the example from following document: https://learn.microsoft.com/en-us/graph/api/onlinemeeting-get?view=graph-rest-1.0&tabs=http#example-2-retrieve-an-online-meeting-by-meeting-id

[joylin2024]

Hi, thank you for your assistance. I was wondering if there is an alternative method to determine whether someone is a host?

[Nivedipa-MSFT]

@joylin2024 - Using Get participant API you can get the participant's role in the meeting. For example, 'Organizer' or 'Presenter' or 'Attendee'.

Please let us know if you have any other query here.

[joylin2024]

How about LiveShareHost?

[Nivedipa-MSFT]

@joylin2024 - Please refer below document for Live Share. https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-live-share-overview?tabs=javascript

[joylin2024]

Hi, I wanted to ask if there's a method to detect when the 'Share to Stage' button is activated so that the appContentUrl for the presenter is set to http://example.com/host, while other viewers receive http://example.com/guest as their appContentUrl?

[Nivedipa-MSFT]

@joylin2024 - We are checking this with engineering team, we will let you know once we get any input from them.

[joylin2024]

I appreciate the update.

[Nivedipa-MSFT]

@joylin2024 - We received an update from the engineering team stating that this scenario is not possible. We can only broadcast a single URL to all participants in the meeting. The engineering team has recommended handling this on the app side and displaying separate UIs for different types of users.

[joylin2024]

Hello, I would like to know if it's possible to embed a Microsoft Teams meeting into my website. Could you please provide some guidance on how to achieve this?

[Nivedipa-MSFT]

@joylin2024 - Embedding a Microsoft Teams meeting directly into a website is not natively supported by Microsoft Teams. However, there are alternative approaches you can consider to achieve similar functionality.

You can use the Microsoft Graph API to create the meeting. https://learn.microsoft.com/en-us/graph/api/application-post-onlinemeetings?view=graph-rest-1.0&tabs=http