Build apps for Teams meeting stage

Microsoft Teams enhances meeting experiences by providing features that facilitate seamless collaboration and communication. The screen sharing function is a prime example, allowing users to present their entire screen, specific windows, or even whiteboard sessions. This capability is essential for effective presentations and collaborative work, as it ensures all participants can view and interact with the shared content, making virtual meetings more dynamic and engaging.

In addition to screen sharing, Microsoft Teams offers various tools designed to make virtual interactions more productive. These tools replicate the dynamics of in-person meetings, enabling users to work together efficiently, regardless of their physical location. Integrating these features in Teams empowers organizations to conduct more interactive and fruitful meetings, driving better teamwork and results.

Share to Stage and Screen share content to meetings are features that enhance the sharing experience in Teams. Share to Stage allows users to share an app to the meeting stage from the meeting side panel in an ongoing meeting. Screen share content to meetings enables users to share content to the meeting stage in Teams using the screen sharing architecture.

The following table lists the scenarios to use Screen share and Share to stage features:

Share to stage

Share to stage allows users to share an app to the meeting stage from the meeting side panel in an ongoing meeting. This sharing is interactive and collaborative in comparison to passive screen sharing.

To invoke share to stage, users can select the Share to Stage icon on the upper-right side of the meeting side panel. Share to Stage icon is native to Teams client and selecting it shares the entire app to the meeting stage.

App manifest

To share an app to the meeting stage, you must configure the context and Resource-specific consent (RSC) permissions in the app manifest:

1. Update the context property in the app manifest as follows:

   "context": [
     "meetingSidePanel",
     "meetingStage"
   ]
   

2. Obtain the RSC permissions by configuring the authorization property, and the name and type in the resourceSpecific field as follows:

   "authorization": {
     "permissions": {
       "resourceSpecific": [
         {
           "name": "MeetingStage.Write.Chat",
           "type": "Delegated"
         }
       ]
     }
   }
   

Advanced share to stage APIs

There are many scenarios where sharing the entire app to the meeting stage isn't as useful as sharing specific parts of the app:

1. For a brainstorming or whiteboard app, a user might want to share a specific board in a meeting versus the entire app with all the boards.

2. For a medical app, a doctor might want to share just the X-Ray on the screen with the patient versus sharing the entire app with all the patients records or results and so on.

3. A user might want to share content from a single content provider at a time (for example, YouTube) versus sharing an entire video catalog onto stage.

To help users in such scenarios, APIs in the Microsoft Teams JavaScript client library (TeamsJS) allow you to programmatically invoke share to stage for specific parts of the app from a button in the meeting side panel.

If you use an advanced share to stage API, you can customize the text on the button. Here are the guidelines for customization:  

• Use Share and not Present or Screenshare, if your experience offers simple sharing of app content to the stage. This sets the right expectation for users as Share consistently means Share to stage in Teams meetings.
• Use more specific text to provide meaningful context of the scenario. For example, you can use text such as Watch together or Play together if your app offers videos or casual games.

Use the following APIs to share specific part of the app:

const appContentUrl = "https://www.bing.com/";

microsoftTeams.meeting.shareAppContentToStage((err, result) => {
    if (result) {
        // handle success
    }
    if (err) {
        // handle error
    }
}, appContentUrl);

microsoftTeams.meeting.getAppContentStageSharingState((err, result) => {
    if (result.isAppSharing) {
        // Indicates if app is sharing content on the meeting stage.
    }
});

{
  "isAppSharing": true
}

microsoftTeams.meeting.getAppContentStageSharingCapabilities((err, result) => {
    if (result.doesAppHaveSharePermission) {
        // Indicates if the meeting participant has permission to share content to the meeting stage.
    }
});

{
   "doesAppHaveSharePermission":true
} 

Screen share content to meetings

Users can screen share content to the meeting Stage in Teams using the screen sharing architecture. When a user shares an app to the meeting stage, the app is rendered only on the presenter’s device and then the screen is shared or mirrored to all other attendees in a new window. After the app content is shared in a meeting, all the participants can view the content, but only the presenter has the ability to interact with the content, which provides a multi-player viewing experience.

Screen share content to the meeting Stage simplifies app content sharing during meetings and provides a seamless multi-player viewing experience. Let's explore the use cases of the feature:

Users can screen share content to the meeting stage in the following scenarios:

• Share entire app: When you share a tab to the Meeting Stage in a Teams meeting, the contentUrl associated with the tab is poped-out a new window for the app and screen shares that window with all other meeting participants. The page.frameContext property in the getContext object is set to meetingStage to signal the app that it's being presented on a large surface, allowing the app to update its content appropriately.

  Note

  Apps that specify MeetingStage in the page.frameContext property of the getContext object in the manifest and declare MeetingStage.Write.Chat permissions support collaborative Share to Stage infrastructure. The share button initiates the existing collaborative protocol instead of the screen sharing protocol.

• Share specific parts of your app to the meeting stage: Specify the appropriate sharing protocol along with the appContentURL.

The following code is an example of sharing app content to meeting stage view and share content in view only screen sharing mode:

   // Share the content to meeting stage view.
    const shareSpecificAppContent = (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);
        });
    };

  // Share the content in view-only screen sharing mode.
      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
                  });
          });
      };

For more information on parameters, see shareAppContentToStage.

Scenarios

Advantages

• You can show coordinated content to multiple participants over a larger stage, getting more attention, and integrating more closely with the meeting lifecycle.
• Basic sharing for the entire app is available without additional investment.
• Users can use their favorite tools within the context of their ongoing communication, improving meeting outcomes.
• Content is displayed inline within the meeting window.
• A sharing button is available on all meeting side panels for users with organizer or presenter roles.
• Users can initiate sharing through a deep link or the Share in Meeting button.

Get app content in meeting side panel

The sharing.history.getContent API enables you to fetch the content shared in a meeting and display in the meeting side panel.

When a meeting begins, the app, in which the content is shared, automatically opens the meeting side panel for the user who shared the content. You can call the sharing.history.getContent API to fetch a list of shared content and display it in the side panel, making it readily accessible. For an upcoming recurring meeting, where the app is already added, developers can call the API to get the latest content to be displayed in the app's side panel.

The following code is an example to fetch shared content in the meeting side panel:

// Define an async function
async function fetchContentDetails() {
    // Fetches a list of content details that was shared in the meeting
    const contentDetails = await microsoftTeams.sharing.history.getContent();

    // Above content details can be used to hydrate the meeting side panel 
    // to share to meeting stage

}

Response payload parameters

The following table includes the response payload parameters:

Response codes

The following table provides the response codes:

For more information, see sharing.history.getContent.

Build an in-meeting document signing app

You can build an in-meeting app for enabling meeting participants to sign documents in real time. It facilitates reviewing and signing documents in a single session. The participants can sign the documents using their current tenant identity.

You can use an in-meeting signing app to:

• Add documents to be reviewed during a meeting.
• Share documents to be reviewed to main stage.
• Sign documents using the signer’s identity.

The participants can review and sign documents, such as purchase agreements and purchase orders.

The following participant roles might be involved during the meeting:

• Document creator: This role can add their own documents to be reviewed and signed.
• Signer: This role can sign reviewed documents.
• Reader: This role can view the documents added to the meeting.

Code sample

Step-by-step guide

Follow the step-by-step guide to build an in-meeting document signing app.

See also

• Apps for Teams meetings
• Enable authentication using third-party OAuth provider
• Resource-specific consent for delegated permissions
• Create deep links
• Meeting app APIs
• Custom Together Mode scenes
• Live Share SDK