Metaverse Collaborative Virtual Visit - Live Share sample

This repository contains a simple app that enables all connected clients to navigate together inside a 3D scene and see each other positions. It uses the Teams Live Share SDK which is an abtraction layer over the Fluid Framework. You can find more Live Share SDK samples there.

To better understand this demo, you can also watch a 20 min talk I've done during this M365 Community Call.

Requirements

Node 12.17+

Getting Started

After cloning the repository, install dependencies and start the application

npm install
npm start

Then open the app in various browsers or tabs to simulate various users. You can switch scenes by adding this query parameter at the end: http://localhost:8080/?scene=museum for instance.

Testing the app in Teams

Create a ngrok tunnel to allow Teams to reach your tab app

1. Download ngrok.
2. Launch ngrok with port 8080. ngrok http 8080 --host-header=localhost

Create the app package to sideload into Teams

1. Open .\manifest\manifest.json and update values in it, including your Application ID.
2. You must replace https://<<BASE_URI_DOMAIN>> with the https path to your ngrok tunnel.
3. It is recommended that you also update the following fields.
   • Set developer.name to your name.
   • Update developer.websiteUrl with your website.
   • Update developer.privacyUrl with your privacy policy.
   • Update developer.termsOfUseUrl with your terms of use.
4. Create a zip file with the contents of .\manifest directory so that manifest.json, color.png, and outline.png are in the root directory of the zip file.
   • On Windows or Mac, select all files in .\manifest directory and compress them.
   • Give your zip file a descriptive name, e.g. MetaverseLiveShare.

Test it out

1. Enable the Developer Preview mode of Microsoft Teams.
2. Schedule a meeting for testing from calendar in Teams.
3. Join the meeting.
4. In the meeting window, tap on + Apps and tap on Manage apps in the flyout that opens.
5. In the Manage apps pane, tap on Upload a custom app.
   • Don't see the option to Upload a custom app?! Follow instructions here to enable custom-apps in your tenant.
6. Select the zip file you created earlier and upload it.
7. In the dialog that shows up, tap Add to add your sample app into the meeting.
8. Now, back in the meeting window, tap + Apps again and type the name of your app in the Find an app textbox.
9. Select the app to activate it in the meeting.
10. In the configuration dialog, just tap Save to add your app into the meeting.
11. In the side panel, tap the share icon to put your app on the main stage in the meeting.
12. That's it! You should now see liveshare-metaverse on the meeting stage.

13. Your friends/colleagues invited to the meeting should be able to see your app on stage when they join the meeting.

Click on the picture below to watch a demo in video: