Share via

Integrate present-live experiences in the Microsoft 365 Document Collaboration Partner Program

Meeting participants can interact and collaborate with PowerPoint Live directly in your collaboration application. Meeting attendees can keep in sync with the presenter or navigate through the presentation at their own pace.

To learn more about the PowerPoint Live experience currently available in Teams, see Present from PowerPoint Live in Microsoft Teams.

PowerPoint Live experience.

For a sample app demonstrating the experience, see Present-live Sample Integration App.

Live experience: Present in a meeting

Prerequisites

  • The Presenter has chosen a OneDrive for Business or SharePoint file to present.
  • The app must be able to obtain a valid user token to the OneDrive for Business or SharePoint resource.
  • The user has been signed in with a Microsoft 365 account.
  • The file must be a supported Present file type.
    • PowerPoint: pptx, ppsx, potx, pptm, ppsm

Example

import * as Microsoft from "@microsoft/document-collaboration-sdk";
import uuidv4 from "uuid/v4";

function launchPresenter(
    meetingId: string,
    userId: string,
    participantId: string,
    userDisplayName: string,
    siteUrl: string,
    itemId: string) 
{
    Microsoft.initializeMeeting({
        hostName: "Contoso",
        hostClientType: "Desktop"
    });

    const container = window.document.createElement("div");
    container.style.height = "100%";
    window.document.body.appendChild(container);

    Microsoft.startPresentation({
        meetingInfo: {
            id: meetingId
        },
        userInfo: {
            userId: userId,
            participantId: participantId,
            displayName: userDisplayName
        },
        documentInfo: {
            documentIdentifier: {
                siteUrl: siteUrl,  
                sourceDoc: itemId 
            },
        },
        sessionInfo: {
            // Use your preferred GUID generator package to get a unique ID for logging.
            hostCorrelationId: uuidv4()
        },
        container,
        fetchAccessToken: async (resourceUrl: string, claim?: string[]) => {
            const scopes: string[] = [];
            if (claim && claim.length > 0) { 
                claim.forEach((val) => {
                    scopes.push(`${resourceUrl}/${val}`);
                });
            } else {
                scopes.push(resourceUrl);
            }
            const token = await getTokenImpl( { scopes } );
            return token; 
        }
    })
    .then((response: Microsoft.BootInfo) => {
        // The joinInfo string can now be used by the host to initialize attendee sessions.
        console.log('Present API finished {0}, {1}, {2}, {3}', response.isBootSuccess, response.joinInfo, meetingId, response.errorInfo);
    })
    .catch((e : any) => {
        console.log(e);
    })
}

Live experience: Join as an attendee in a meeting

Prerequisites

  • The Presenter has called startPresentation and received a joinInfo string.
  • The joinInfo string has been sent to an attendee in the meeting.

Example

import * as Microsoft from "@microsoft/document-collaboration-sdk";
import uuidv4 from "uuid/v4";

function launchAttendee(
    meetingId: string,
    userId: string,
    participantId: string,
    userDisplayName: string,
    joinInfo: string)
{
    Microsoft.initializeMeeting({
        hostName: "Contoso",
        hostClientType: "Desktop"
    });

    const container = window.document.createElement("div");
    container.style.height = "100%";
    window.document.body.appendChild(container);

    Microsoft.joinPresentation({
        meetingInfo: {
            id: meetingId
        },
        userInfo: {
            userId: userId,
            participantId: participantId,
            displayName: userDisplayName
        },
        sessionInfo: {
            // Use your preferred GUID generator package to get a unique ID for logging.
            hostCorrelationId: uuidv4()
        },
        container,
        joinInfo
    })
    .then((response: Microsoft.BootInfo) => {
        console.log('Attendee join success: {0}, {1}, {2}', response.isBootSuccess, meetingId, response.errorInfo);
    })
    .catch((err: any) => {
        console.log(err);
    })
}

Live experience: Manage switching roles

In Teams, an attendee can take control of what's being presented by selecting Request control. If the presenter accepts the request, the attendee becomes the presenter and now controls slide navigation, etc. To learn more about this feature, see the "Take Control" section of Present content in Microsoft Teams meetings.

Through the MDCPP, you can implement this experience in your collaboration application by using the following steps.

  1. Keep track of which meeting participant is the Presenter.
  2. If an attendee indicates that they want to take control of the presentation (e.g., via a button in your application's attendee view) and the presenter approves the request (e.g., via a notification in your application's presenter view), first change the current presenter's role to attendee by calling switchRole({role: "attendee"});. This is to avoid having two presenters at the same time.
  3. Next, update the role of the attendee who requested control by calling switchRole({role: "presenter"});.

The following is an example implementation based on the code samples earlier in this article. @contoso/meetingCoordinationService generically represents a service you implemented for your application to manage interactions in the meeting.

Select the tab for the role you'd like to view.

import * as Microsoft from "@microsoft/document-collaboration-sdk";
import uuidv4 from "uuid/v4";
import { getMeetingCoordinationService } from "@contoso/meetingCoordinationService";

function launchPresenter(
    meetingId: string,
    userId: string,
    participantId: string,
    userDisplayName: string,
    siteUrl: string,
    itemId: string) 
{
    Microsoft.initializeMeeting({
        hostName: "Contoso",
        hostClientType: "Desktop"
    });

    const container = window.document.createElement("div");
    container.style.height = "100%";
    window.document.body.appendChild(container);

    const { onSwitchRole } = getMeetingCoordinationService({
        meetingId,
        participantId
    });

    Microsoft.startPresentation({
        meetingInfo: {
            id: meetingId
        },
        userInfo: {
            userId: userId,
            participantId: participantId,
            displayName: userDisplayName
        },
        documentInfo: {
            documentIdentifier: {
                siteUrl: siteUrl,  
                sourceDoc: itemId 
            },
        },
        sessionInfo: {
            // Use your preferred GUID generator package to get a unique ID for logging.
            hostCorrelationId: uuidv4()
        },
        container,
        fetchAccessToken: async (resourceUrl: string, claim?: string[]) => {
            const scopes: string[] = [];
            if (claim && claim.length > 0) { 
                claim.forEach((val) => {
                    scopes.push(`${resourceUrl}/${val}`);
                });
            } else {
                scopes.push(resourceUrl);
            }
            const token = await getTokenImpl( { scopes } );
            return token; 
        }
    })
    .then((response: Microsoft.BootInfo) => {
        // The joinInfo string can now be used by the host to initialize attendee sessions.
        console.log('Present API finished {0}, {1}, {2}, {3}', response.isBootSuccess, response.joinInfo, meetingId, response.errorInfo);
        onSwitchRole(({role}=>response.powerPointMeetingActions.switchRole({role})));

    })
    .catch((e : any) => {
        console.log(e);
    })
}

Live experience: Manage private viewing

In Teams, attendees can view slides at their own pace or sync to the presenter's view if private viewing is enabled. The presenter can turn it off or on by toggling Private view in the meeting controls. To learn more about this feature, see the "Audience view" section of Share slides in Microsoft Teams meetings with PowerPoint Live.

Through the MDCPP, you can implement this experience in your collaboration application by using the following steps.

  1. Keep track of which meeting participant is the Presenter.
  2. If the presenter indicates that they want to turn off private viewing (e.g., via a button in your application's presenter view), call setPrivateViewing({isEnabled: false}); for all participants (presenter and attendees).
  3. If the presenter later indicates that they want to turn private viewing on again, call setPrivateViewing({isEnabled: true}); for all participants.

The following is an example implementation based on the code samples earlier in this article. @contoso/meetingCoordinationService generically represents a service you implemented for your application to manage interactions in the meeting.

Select the tab for the role you'd like to view.

import * as Microsoft from "@microsoft/document-collaboration-sdk";
import uuidv4 from "uuid/v4";
import { getMeetingCoordinationService } from "@contoso/meetingCoordinationService";

function launchPresenter(
    meetingId: string,
    userId: string,
    participantId: string,
    userDisplayName: string,
    siteUrl: string,
    itemId: string) 
{
    Microsoft.initializeMeeting({
        hostName: "Contoso",
        hostClientType: "Desktop"
    });

    const container = window.document.createElement("div");
    container.style.height = "100%";
    window.document.body.appendChild(container);

    const { onSetPrivateViewing } = getMeetingCoordinationService({
        meetingId,
        participantId
    });
    
    Microsoft.startPresentation({
        meetingInfo: {
            id: meetingId
        },
        userInfo: {
            userId: userId,
            participantId: participantId,
            displayName: userDisplayName
        },
        documentInfo: {
            documentIdentifier: {
                siteUrl: siteUrl,  
                sourceDoc: itemId 
            },
        },
        sessionInfo: {
            // Use your preferred GUID generator package to get a unique ID for logging.
            hostCorrelationId: uuidv4()
        },
        container,
        fetchAccessToken: async (resourceUrl: string, claim?: string[]) => {
            const scopes: string[] = [];
            if (claim && claim.length > 0) { 
                claim.forEach((val) => {
                    scopes.push(`${resourceUrl}/${val}`);
                });
            } else {
                scopes.push(resourceUrl);
            }
            const token = await getTokenImpl( { scopes } );
            return token; 
        }
    })
    .then((response: Microsoft.BootInfo) => {
        // The joinInfo string can now be used by the host to initialize attendee sessions.
        console.log('Present API finished {0}, {1}, {2}, {3}', response.isBootSuccess, response.joinInfo, meetingId, response.errorInfo);
        onSetPrivateViewing(({isEnabled})=>response.powerPointMeetingActions.setPrivateViewing({isEnabled}));

    })
    .catch((e : any) => {
        console.log(e);
    })
}

See also