Create a 3D collaborative app for Teams Meeting using Live Share SDK, Live Share Canvas and Babylon

[Guest freistli]

Teams Live Share seamlessly integrates meetings with Fluid Framework. As a recent GA SDK in Oct, 2022, Live Share provides a free, fully managed, and ready to use Azure Fluid Relay backed by the security and global scale of Teams.

 

 

 

With this technology, participants in the same Teams meeting can easily interactively work together on the same content or object, for example, with real time shared annotations, operations, to exchange ideas efficiently.

 

 

 

 

 

 

Starting from the simple live canvas demo, I verified more functions by integrating below parts together:

 

• Live Share Canvas
  
• Fluid UI/Web Component
  
• BabyLon Js
  
• Customized Fluid Relay Service
  

 

and implement a collaborative inking 2D/3D objects teams meeting extension. It also supports switching different backend Fluid Relay Services. Regarding 3D rendering, it works in Teams Web App with WebGL2 and works in Teams Desktop App with WebGL. Here is a screen snapshot that two clients in the same live share session in teams meeting (one is teams web app, another is Teams Desktop App):

 

 

 

 

 

 

Developers can get main ideas of how Live Share works for Teams especially with Babylon 3D and Fluid UI packages from the project. Here is the pubic github repo, I shared setup/build/test steps in it as well:

 

 

 

freistli/LiveShareCanvasBabylon (github.com)

 

 

 

Enjoy Teams Platform Development!

 

Continue reading...