microsoft / live-share-sdk

A framework for building collaborative Microsoft Teams and M365 experiences.

Live Share SDK

The Live Share SDK builds on the Fluid Framework to enable the creation of collaborative experiences for Microsoft Teams and Microsoft 365. This package focuses on building collaborative meeting applications for Microsoft Teams using Fluid. The SDK provides a LiveShareClient class for connecting to a special Fluid Container associated with each meeting. A collection of Live Share specific Distributed Data Structure (DDS) classes are also provided to simplify building applications for common meeting scenarios like shared media playback.

To get started, we recommend first familiarizing yourself with the Fluid Framework and Live Share overview. You can then follow our Quick Start Guide to build your first Teams Meeting App that uses Live Share.

You can find our detailed API reference documentation at Live Share reference docs and Live Share Media reference docs.

Collaborative features

Live Share has several features that make building collaborative apps easier than ever, including:

• LiveShareClient: Connect to a Fluid container associated with a Microsoft Teams meeting.
• LivePresence: Track who is using your app during a meeting and associate custom metadata for each user (e.g., camera position).
• LiveState: Synchronize a JSON-serializable value for maintaining consistent application state across clients.
• LiveTimer: Build a collaborative countdown timer.
• LiveEvent: Send one-time, stateless JSON-serializable values to each user in the session.
• LiveFollowMode (beta): Easily integrate features to present to all, follow specific users, and suspend/resume following.

Live Share Canvas is an optional extension that allows any app to add a collaborative whiteboard as an app overlay. Key classes include:

• InkingManager: Utilizes the HTML <canvas> element for turn-key pen, highlighter, laser pointer, and eraser tools.
• LiveCanvas: Synchronizes the InkingManager strokes and adds remote cursors for users in the session.

Live Share Media is an optional extension that makes it easy to add co-watch support to any video or audio player. Key classes include:

• LiveMediaSession: Synchronizes player state for everyone in the session.
• MediaPlayerSynchronizer: Delegate interface used with LiveMediaSession to execute playback commands against a media player; matches the HTML5 IMediaPlayer interface for <video> or <audio> elements.

Live Share React (beta) is an optional integration for React, providing a <LiveShareProvider> context provider component and a series of custom React hooks that correspond with each Live Share and Fluid DDS.

Fluid Framework also offers some useful collaborative features, each of which is compatible with Live Share, including:

• SharedMap: The DDS equivalent to a JavaScript Map, which is useful for synchronizing a collection of objects.
• SharedString: Synchronize a string text value, useful for building real-time text editors.
• SharedTree (alpha): Synchronize a complex tree of intersecting nodes.

Package Compatibility

The Live Share SDK contains dependencies for @microsoft/teams-js and fluid-framework packages among others. Both of these packages are sensitive to the package version your app any libraries use. You will likely run into issues if the package version your app uses doesn't match the version other libraries you depend on use.

It is critical that your app use the package dependencies listed in the table below. Lookup the version of the @microsoft/live-share you're using and set any other dependencies in your package.json file to match:

@microsoft/live-share	@microsoft/teams-js	fluid-framework	@microsoft/live-share-*	@fluidframework/azure-client	@microsoft/TeamsFx	@microsoft/TeamsFx-react
^1.0.0	^2.11.0	^1.2.3	^1.0.0	^1.0.0	^2.5.0	^2.5.0

Installing

Live Share

To add the latest version of the SDK to your application using NPM:

npm install fluid-framework @fluidframework/azure-client @microsoft/live-share --save

or using Yarn:

yarn add fluid-framework @fluidframework/azure-client @microsoft/live-share

Live Share Media

Optionally, to add the latest version of the media package to your application using NPM:

npm install @microsoft/live-share-media --save

or using Yarn:

yarn add @microsoft/live-share-media

Live Share Canvas

Optionally, to add the latest version of the canvas package (inking & cursors) to your application using NPM:

npm install @microsoft/live-share-canvas --save

or using Yarn:

yarn add @microsoft/live-share-canvas

Live Share integration with React

Optionally, to add the latest version of the React integration to your application using NPM:

npm install @microsoft/live-share-react --save

or using Yarn:

yarn add @microsoft/live-share-react

Contributing

There are several ways you can contribute to this project:

• Submit bugs and help us verify fixes as they are checked in.
  • (Please review FAQ and Known issues before filing a new item!)
• Review the source code changes.
• Engage with other Live Share developers on StackOverflow.
• Contribute bug fixes.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Preparing the Repository

To clone the repository to test samples and/or build the packages, ensure that you have the latest versions of Git and Node.js installed.

Clone a copy of the repo:

git clone https://github.com/microsoft/live-share-sdk.git

Change to the live-share-sdk directory:

cd live-share-sdk

Building Packages & Samples

To build the projects packages (with symlinks to the locally built packages), we use npm workspaces to prevent dependency errors.

Install all developer dependencies:

npm install

Build packages and samples:

npm run build

Run the sample of of your choice:

cd samples/javascript/01.dice-roller
npm start

Unit tests for all of the packages can be run using npm run test or npm run test:debug. Any previously built files can be deleted prior to building by first running npm run clean.

Code samples

There are several code samples available to use:

Sample name	Description	Javascript	TypeScript
Dice Roller	Enable all connected clients to roll a dice and view the result.	View	View
React Video	Basic example showing how the LiveMediaSession class works with HTML5 video.	View
Live Canvas demo	Synchronized pens, laser pointers, cursors, and more via Live Share Canvas.	View	View
Live Share React demo	Example of using the Live Share React package.	View	View
React Media Template	Enable all connected clients to watch videos together, build a shared playlist, transfer whom is in control, and annotate over the video.	View	View
Agile Poker	Enable all connected clients to play an Agile Poker planning activity.	View

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at [email protected]. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

Licensing & Copyright

Copyright (c) Microsoft Corporation. All rights reserved.

Live Share, Live Share media, and Live Share canvas are licensed under a special Microsoft Live Share SDK license.

Live Share Turbo and Live Share React are licensed under a special Microsoft Live Share SDK - Pre-Release Version license.

Code samples are licensed separately under MIT license.

live-share-sdk's Issues

[Enhancement] Add Live Share support audio ducking for local speaker

Currently, audio ducking only detects the remote speaker, not local.

This change will allow detection of the local speaker as well.

More information TBA

⚠️ PLEASE READ: FAQ & known issues ⚠️

FAQ

Live Share FAQ

Known Issues

Please check here to see if your problem is already listed before filing a new issue.
Previously known issues that have been fixed & released will be deleted from this list. Please update your packages to latest and test if your bug is resolved.

• Channel meeting guest users are not yet supported.

[Feature Request]: TypeScript port for sample #1

Our samples currently only are written in JavaScript, making it tedious for TypeScript developers to utilize. Let's port sample 1 to TypeScript to unblock key partner.

[Enhancement] Add Live Share support for 1-1 calls

More information TBA

[Bug]: EphemeralState fires duplicate state change events

EphemeralState fires duplicate state change events every 2 seconds. Found by @ryanbliss

[Enhancement] Add Live Share support for 'Meet now' calls

More information TBA

[JS Bug]: Error when trying to run "npm install" in javascript/21.react-media-template

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

When trying to run npm install, got a npm login error.

After login, when trying again to run npm install, got:

To Reproduce

1. Go to samples/javascript/21.react-media-template
2. Run on npm install
3. See the first error described
4. Run npm login to login in npm
5. Run npm install
6. See the second error described

• OS: Windows 10
• Browser Chrome
• Version 107

[Feature Request]: SVG export for Live Share Canvas

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe your user scenario

After a user completes annotating / drawing on LiveCanvas / InkingManager, some developer scenarios involve uploading that drawing to an external service so it can be viewed elsewhere.

Describe the solution you'd like

An SVG export where the developer can export the drawing, where a developer can choose the min/max X and Y coordinates within the canvas to include, would be very helpful for rendering the drawing in any system Irregardless of web vs. native clients.

Describe alternatives you've considered

• PNG export with screenshotting, though that doesn't work for all scenarios, nor does it scale well at any resolution

Cannot access 'debug' before initialization

I am trying to use live-share-sdk in a SPFx solution which would run in a Teams meeting (side panel or meeting stage).

I did not get any error messages installing the live-share package version 1.0.0-preview.4.
SPFx version is 1.16.1.
SPFx solutions are already including the teams-js, which is version 2.4.2. This version does not have the LiveShareHost. Because of that I have installed the teams-js 2.50 explicitly with an alias.

I can use the LiveShareHost without any problem

await app.initialize();
const host = LiveShareHost.create();

but as soon as I add the line:

const client = new LiveShareClient(host);

the solution does not load at all and I am getting the error message: Cannot access 'debug' before initialization:

Does anyone have an idea, what the issue can be? Any help would be appreciated.

Thank you!

[Feature Request]: Add ability to set tick rate for LiveTimer

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe your user scenario

A developer can set the tick rate for the onTick listener in EphemeralTimer. This is useful for developers who may only need to update their UI or have some recurring callback once on some pre-defined interval.

[Feature Request]: Add logic to limit the number of roles that can be enumerated for `LivePresence`

Describe your user scenario

Nothing prevents an app from trying to lookup roles for every member of a 1000 person meeting which would cause us to get throttled by Graph.

Describe the solution you'd like

Add logic to LivePresence to throttle the number of calls allowed by a client on a per/hour basis. The exact limits are TBD.

[Feature Request]: joinContainer() should throw an error if it takes too long to join the container

We should start a timer in TeamsFLuidClient.joinContainer() that waits 20 seconds for fluid to connect and if the connection times out we should throw an error. The error should include where we were at in the flow so we can tell if its the teams client that timed out or if we're somewhere in fluid.

In addition, we should log which step of the creation/get flow it got stuck at during the timeout and emit to the developer so they can log in their telemetry.

[Enhancement]: Rework VolumeLimiter to turn on/off

This work item is already known to the feature team, so just adding here for tracking purposes.

Describe your user scenario

The Teams Client SDK models audio ducking as a listener for when speaking did first start and when it ended. The VolumeLimiter class uses an algorithm that expects continual input while speaking is active, which adds additional complexity for developers when implementing audio ducking.

Describe the solution you'd like

Separate methods for starting audio ducking to begin ramp up and ending to ramp back up, e.g., volumeLimiter.start() and volumeLimiter.end().

Describe alternatives you've considered

Current workaround is to use setInterval to continually limit the volume during audio ducking.

[Enhancement] Add Live Share support for DRM media players (Widevine, FairPlay, etc.)

The Teams desktop client does not currently support DRM. Our client currently runs in Electron, which has discontinued active support for the feature. We are investigating how to resolve this and will post updates here.

[Bug]: "RoleVerifier: timed out" errors with 0.3.1

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Eoin (eoobrian) to provide logs and repro steps - see below discussion.

As of 10/7/2022, engineering team does not have a repro for this bug.

[Bug] npm install requires --legacy-peer-deps which causes problems with Teams Toolkit

@fluidframework/azure-client is a default dependency of the SDK's live-share package. When running npm install, adding --legacy-peer-deps is currently necessary due to differing package versions within @fluidframework/azureclient.

Unfortunately, using --legacy-peer-deps will cause issues if you are also using Teams Toolkit.

To fix, we will bump the fluid package that removes this requirement as soon as possible after it is released.

[work item]: Media Sync Algorithm Improvements

I'm working on a few improvements to the media sync algorithm to better support additional scenarios like Co Editing:

• Ability to disable frame skipping. The current sync algorithm always skips frames in an effort to keep playback in sync. That will now be an optional feature that while on by default, can be disabled using a canSkipFrames setting.
• New properties to track the playback lag for both the local client and any remote participants.
• Renaming maxPlaybackDrift setting to maxPlaybackLag to go along with new lag tracking properties.
• New properties to track clock error for both the local client and any remote participants. Using this plus the new lag tracking properties will allow for highly accurate tracking of how in sync clients are with each other.

[Feature Request]: CDN support

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Tracking request for CDN support for Live Share's packages.

[Feature Request]: Support limiting LivePresence to specific roles

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe your user scenario
It would be great if EphemeralPresence could support limiting events to specific roles, like other Ephemeral data structures.

One sceanrio I am using is using EphemeralPresence not for Presence, but for the ability to limit the data object to a single object per user. Specifically, I am sharing the user's cursor location to all the clients so that I can render the location across the board. In a 100 person meeting I don't need every viewer's cusor location, just those who are organisers or presenters.

Describe the solution you'd like
EphemeralPresence to support limiting events to specific roles.
I think it woul also be great to align the start() or initialize() functions across the data structures.

Describe alternatives you've considered
Using the getRoles API to filter on the recievers side. But this seems like a lot of wasted effort and AFR data transfers for something that is immediately dumped

Additional context

[Feature Request]: Undo/redo support for live-share-canvas

Describe your user scenario

User becomes frustrated when they draw a stroke that was incorrectly placed.

Describe the solution you'd like

Undo/redo latest stroke, eraser, line, clear action, etc. Anything that alters the state of the canvas should be undo/redo-able. Should be dedicated APIs and keyboard shortcuts.

[Enhancement] Add Live Share support for Cloud Video Interop for Microsoft Teams

Cloud Video Interop for Microsoft Teams

More information TBA

[Feature Request]: Switch fluid & teams-js dependencies from ~X.X.X to ^X.X.X

Fluid has confirmed that 1.0.0 brought semver support and commits to non-breaking minor / major releases. Before releasing to 1.0.0, we should upgrade our dependencies + dependency charts to ^1.X.X for Fluid and Teams JS to ^2.X.X

[Feature Request]: Add new LivePresence.getPresenceForClient() method

The EphemeralPresence class currently supports the same user being logged into multiple clients. It will then collapse all of the updates for the user into a single presence entry keyed off userId. The downside of this approach is that there's currently no way of looking up the presence information for a user given just a clientId as we throw away the clientId from the event.

We should add a new index that maps clientId to userId and then add an EphemeralPresence.getPresenceForClient() that lets us retrieve the PresenceInfo object given just a clientId. This saves having to include the userId in all the events an app sends.

@ryanbliss please comment

[TASK]: Add eslint/prettier to packages

We should add TSLint to our packages prior to GA as additional sanity check.

[TASK]: Report code coverage on main page

Prior to GA, we should run code coverage as part of build pipeline and then add a badge to the main page that reports our current build status and coverage levels.

[Enhancement]: Define a plugin model for frame skipping

It would be nice if you could replace the frame skipping algorithm in the same way you can replace the action throttler. This would allow for the creation of new experimental frame skippers like a predictive frame skipper that monitors buffering times and uses that to skip past any buffer intervals.

[Feature Request]: Double arrow stroke arrow support

Describe your user scenario

Double arrow / arrow pointing to the start of my stroke.

Describe the solution you'd like

Strokes on InkingManager should support the ability to have an arrow at the start of the stroke as well as the end (double arrow).

[Feature Request]: TypeScript ports for sample 21

Our samples currently only are written in JavaScript, making it tedious for TypeScript developers to utilize. Let's port sample 21 to TypeScript to unblock key partner.

[Feature Request]: Refresh role cache every 5 minutes

Roles for clientId in server refresh every 5 minutes. We need to refresh the SDK cached roles every 5 minutes as well so that role changes are updated without refreshing the application.

[Task]: Seek after pause to ensure paused frame is consistent for all users

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe your user scenario

When a user pauses a media player, other users should seek to that exact position so it is paused on the same frame. This is important for scenarios where Live Canvas is being used in parallel with a paused video.

Describe the solution you'd like

When a pause event is emitted through LiveMediaSession, clients that receive that event should pause and then seek the video to the timestamp of the user that emitted the pause event.

We may want to consider making this something that developers can disable but make it on by default.

[Feature Request]: Support for Azure Comminication Services

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe your user scenario

Developers building Azure Communication Services applications can use Live Share when joining a Teams meeting through the ACS SDK.

See their docs: https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/voice-video-calling/get-started-teams-interop?pivots=platform-web

Describe the solution you'd like

Integration with ACS

[Enhancement]: Add Live Share support ad-hoc participants in meetings

Currently everyone has to be in the calendar invitation for scheduled meetings. If you request someone join the meeting from the "People" tab of the Teams meeting clients, they do not get added to the calendar invitation, and thus Live Share cannot validate their participation in the meeting.

We are investigating a fix for this and will update when we have more information.

[Enhancement] Add Live Share support for group calls

More information TBA

[Bug]: Cannot draw a dot / single point stroke by clicking without dragging cursor

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe the bug

Cannot draw a dot / single point stroke by clicking without dragging cursor

To Reproduce

In any of the Live Share canvas samples, click without moving the mouse cursor. No stroke will appear in the canvas.

Expected behavior

A single point will appear in the canvas at the point which the user clicked/tapped.

[Enhancement]: Automatic audio ducking in VolumeManager

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe your user scenario

Currently, all developers for Live Share media need to implement the audio ducking feature themselves, writing repetitive code that we will have trouble maintaining on their behalf.

Describe the solution you'd like

Integrate microsoftTeams.meeting.registerSpeakingStateChangeHandler API from Teams Client SDK into VolumeLimiter so that developers do not need to replicate. Developers should be able to disable this feature, should they want to implement themselves or not use audio ducking in their application.

Describe alternatives you've considered

N/A

[Samples Bug]: React samples 21.react-media-template and 22.react-agile-poker throwing PropType errors

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe the bug
Running 21.react-media-template or 22.react-agile-poker leads to a blank browser window being opened and errors similar to below being shown in the console:

Uncaught ReferenceError: PropTypes is not defined
    at ./src/components/flex/FlexColumn.jsx (FlexColumn.jsx:42:1)

Uncaught ReferenceError: string is not defined
    at ./src/components/flex/FlexColumn.jsx (FlexColumn.jsx:44:1)
    
Warning: Failed prop type: FlexColumn: prop type `fill` is invalid; it must be a function, usually from the `prop-types` package, but received `number`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
    at FlexColumn (http://localhost:3000/static/js/bundle.js:3501:5)

To Reproduce

1. Clone the repo.
2. Install dependencies and build the repo

   npm install --legacy-peer-deps
   npm run build

3. Run either the 21.react-media-template or 23.react-live-canvas sample:

   cd samples/21.react-media-template
   npm start

4. In the browser that opens, note that the tab is white
5. Open the developer tools console.
6. See at least one of the errors described above

Expected behavior

The sample to work and for the console to have no errors

Screenshots

Desktop(s) (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version: 106.0.1370.52

[Feature Request]: Telemetry for container setup & role verification

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Our telemetry logger gives good insight into the sync related aspects of Live Share, but developers looking to troubleshoot issues related to the health of the container setup and role verification might have more trouble. For example, if the registerClientId API doesn't get executed, or is executed out of order, there is no way to monitor that in logs.

To fix, let's add each aspect of role verification and container mapping to our telemetry system.

ngrok command is incorrect in documentation, project is running on 8080

Hello Team,

We observed 01.dice-roller sample is running on port 8080 but in documentation its mentioned as port 3000.
Could you please correct the ngrok command. "ngrok http 8080 --host-header=localhost"

Documentation -

Project running port -

[Bug]: Dice LiveShare sample is missing a step to make it work

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe the bug

Following the actual step by step tutorial to load the Dice LiveShare sample won't work. You need to tell to people to generate an App ID and insert it inside the manifest. Otherwise, Teams won't load the manifest because of a parse error.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/microsoft/live-share-sdk/tree/main/samples/01.dice-roller#create-the-app-package-to-sideload-into-teams
2. You need to explain how to generate an App ID and to insert it in the manifest

The same issue is there: https://learn.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-live-share-tutorial

Expected behavior

Provide a link to https://learn.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#id to explain how to generate an ID and provide a fake ID to let developers side load the app.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop(s) (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version 106

Smartphone (please complete the following information):

N/A

Additional context

N/A

[JS Bug]: Samples don't support light or high contrast themes

Need to update all samples to either support different Teams themes or force dark theme backgrounds, as the current user experience shows white text on a light background when the Teams client is in light mode.

Need to update documentation for Agile Poker sample app

As per observations need to update below points for Agile Poker sample app.

#1. The sub folder location is incorrect in step 4. It should be "live-share-sdk-main\samples\javascript\22.react-agile-poker"

#2. In step 8 space is required between port 3000 and --host. It should be like "ngrok http 3000 --host-header=localhost"

#3. To run above command it requires ngrok account. (can we mention this in doc) because we observed below error.

Thanks !

[ENHANCEMENT] Add Live Share support for virtual devices

More information TBA

[Feature Request]: Public Teams RoleVerifier and SharedClock setup

Describe your user scenario

If a developer wants to use our RoleVerifier or SharedClock, they must first use joinContainer. If a developer wants to use Live Share DDS for a custom container that doesn't use our mapping service, we currently force them to implement their own shared clock and role verifier, even if they want to use the Teams APIs.

Describe the solution you'd like

Either public exports for role verifier and shared clock or public API for initializing/starting those two services.

[Feature Request]: Easier way to replace timestamp provider used by `SharedClock` & use `SharedClock` in `AzureClient`

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Describe your user scenario

Easier way to replace timestamp provider used by SharedClock & use SharedClock in AzureClient. Right now, you would have to copy the SharedClock code if you wanted to use Live Share APIs with an AzureClient outside of Teams.

Describe the solution you'd like

If SharedClock was exported with the Live Share package and one could easily swap the ITimestampProvider, this would make it easier for partners to use Live Share APIs outside of Teams (within acceptable use of license).

[Enhancement] Add Live Share support for Channel 'Meet now' calls

More information TBA

[Enhancement]: Add Live Share support for mobile experience

More information TBA

[TASK]: Setup ADO based build pipeline

Prior to GA, we should setup an ADO build pipeline so that we can require builds anytime a PR is made against main.

[JS Bug]: JavaScript sample "02.react-video" fails in install in Teams via sideload method

Please review FAQ and Known issues before filing a new item!

• [✅] I have reviewed the FAQ and known issues and did not find my topic

Describe the bug

User is unable to sideload 02.react-video sample project in to Teams and receives the error message: "There was a problem reaching this app"

To Reproduce

Run the app locally

1. cd samples\javascript\02.react-video\manifest
2. npm install
3. npm start
4. ngrok http 3000 --host-header=localhost

Create Microsoft app and modify manifest.json

1. Go to https://dev.teams.microsoft.com/apps and create a new app
2. Replace "id": "<<YOUR-MICROSOFT-APP-ID>>" in `samples\javascript\02.react-video\manifest\manifest.json with the newly created app ID
3. Replace "configurationUrl": "https://<<BASE_URI_DOMAIN>>/config?inTeams=true" with ngrok URL from step 5 above
4. Compress contents of samples\javascript\02.react-video\manifest to zip file

Sideload package

1. Follow instructions from sample Readme: https://github.com/microsoft/live-share-sdk/tree/main/samples/javascript/03.live-canvas-demo#test-it-out

Expected behavior

The app can be sideloaded in to Teams

Desktop(s) (please complete the following information):

• OS: [e.g. macOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Add any other context about the problem here.
It appears this issue also affects 21.react-media-template, but not 01.dice-roller and 03.live-canvas-demo (I have not tested with others)

LiveShareClient.joinContainer() throws error 500 for federated user

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe the bug
On one Window/Edge user participating in a Teams meeting initializing a stage canvas, the LiveShareClient.joinCointainer() fails with throwing an exception
500, message: 'Internal error encountered while performing the required operation'
This does not happen on other clients. Our Teams are on different tenants.

const containerSchema = {
    initialObjects: {
        presence: LivePresence,
    },
};

await app.initialize();

const host = LiveShareHost.create();
const client = new LiveShareClient(host);
await client.joinContainer(containerSchema);

• OS: Windows 11
• Browser Latest Edge
• Version [e.g. 22]

[Feature Request]: joinContainer() should throw error if not in a supported ring...

We just spent 30 minutes on a call helping a customer debug a Live Share issue only to figure out their Teams client was in the wrong ring. To avoid this in the future, we should add logic to TeamsFluidClient.joinContainer() that checks the context object for the users current ring and throws an error if they're in an unsupported ring. @ryanbliss can comment on the exact rings but I believe it's 3.6 or below...

The users current ring can be taken from the 'ringId` property of the context object and it will come out like "ring3_6" so we can use the expression below to parse it:

const parsed = Array.from("ring3_6")
  .map(ch => ch == '_' ? '.' : ch)
  .filter((ch) => "0123456789.".indexOf(ch) >= 0)
  .join("");
console.log(parseFloat(parsed));