LiveShare SDK does not work in SPFx meeting app

[canturan]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version: 1.18.1
• New Teams Web Client
• New Teams Desktop Client
• Old Teams Web Client
• Old Teams Desktop

Describe the bug / error

I was testing the LiveShare SDK with the new SPFx Version 1.18.1 which has the Teams JS version 2.12. The new SPFx version finally fulfills the Teams JS dependency requirement of the GA version of the LiveShare SDK (^2.11) so I gave it a go. Then I sadly found out that the LiveShare SDK is still not working in a SPFx meeting app.

When I start the app in a meeting (sidePanel), my app crashes and I get the error message "The library has not yet been initialized"

I could be able to debug the code and the code crashes on the creation of the LiveShareHost (the class comes from the Teams JS package of the SPFx: @microsoft/teams-js-v2):

const host = LiveShareHost.create();

To test it

• I have created a new web part with the SPFx 1.18.1 generator.
• Installed the LiveShare SDK packages: npm install fluid-framework @fluidframework/azure-client @microsoft/live-share --save
• There is also a dev dependency which needed to be installed (@fluidframework/test-client-utils) - This step is only documented in the getting started documentation of LiveShare SDK
• Added the needed code to join to the liveShare container to the code
• Packaged and deployed the solution and added the app to a meeting
• Joined to the meeting and opened the app 

The following code is all you need to join the container:

protected async onInit(): Promise<void> {

    if (!!this.context.sdks.microsoftTeams){
      this.teamsApp = this.context.sdks.microsoftTeams.teamsJs.app;
      await this.teamsApp.initialize();
      if (this.teamsApp.isInitialized()){
        const frameContext = this.teamsApp.getFrameContext();

        if (frameContext === FrameContexts.meetingStage || frameContext === FrameContexts.sidePanel){
          const liveShareJoinResult = await this.joinContainer();
          this.container = liveShareJoinResult.container;
        }
      }
    }

    return this._getEnvironmentMessage().then(message => {
      this._environmentMessage = message;
    });
  }

  private async joinContainer():Promise<ILiveShareJoinResults> {
    // Are we running in teams?
    const host = LiveShareHost.create();

    // Create client
    const client = new LiveShareClient(host);

    // Join container
    return await client.joinContainer(containerSchema);
  }

As you can see in the code I am ensuring that the Teams JS is initialized successfully and I am executing the joinContainer code only in the sidePanel or meetingStage on which liveShare should be available.

I have checked the initialized Teams Js version and it was correct, 2.12

I have also tested the app as mentioned above in the additional env. detail on all available Teams client, on the new one as well on the old one, in web and desktop client.

I have also checked and configured all the prerequisites from the getting started documentation including the RSC permissions: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-live-share-capabilities?tabs=javascript#prerequisites

@AJIXuMuK : Please check the issue. You have the best knowledge of the history of it :) Thanks a lot!!

Steps to reproduce

• I have created a new web part with the SPFx 1.18.1 generator.
• Installed the LiveShare SDK packages: npm install fluid-framework @fluidframework/azure-client @microsoft/live-share --save
• There is also a dev dependency which needed to be installed (@fluidframework/test-client-utils) - This step is only documented in the getting started documentation of LiveShare SDK
• Added the needed code to join to the liveShare container to the code
• Packaged and deployed the solution and added the app to a meeting
• Joined to the meeting and opened the app 

Expected behavior

That I can create and join to a liveShare container in a SPFx meeting app.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@canturan - the library should be initialized by our code. You should not call initialize again.
And as you pass the initialized check - seems like something additional should be done for the LiveShare SDK...

I'm not too familiar with the LiveShare part and why it would not work...

[canturan]

Because the error message says "The library has not yet been initialized", I just wanted to ensure the TeamsJS is initialized. Removing this part does not change anything.

On the LiveShare part there is nothing more that I can do. As you can see in the documentation: Join a meeting session, you need to create the LiveShareHost and then the client.

The app crashes already on the line: LiveShareHost.create() which is coming from the TeamsJS library. In that case no code can be executed from the LiveShare library (Next line: const client = new LiveShareClient(host); ). It is not coming that far. Because of that, I assume the problem is not related with the LiveShare SDK.

[canturan]

Is there any updates on this topic?

[pheidler]

@canturan Did you ever end up finding a solution to this? I am having the same issue.

[pheidler]

Never mind- accessing LiveShareHost from BaseClientSideWebPart instead of importing directly from @microsoft/teams-js worked.

this.context.sdks.microsoftTeams.teamsJs.LiveShareHost.create()