Microsoft 365 Community Microsoft Teams, 22 Aug 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building interactive meeting app for Microsoft Teams with Live Share SDK and Fluid Framework

Description

📺 In this 14 minute developer focused demo, Robert showcases the Hack Together: Microsoft Teams Global Hack Grand Winner 2023 Teams for solution creation (Robert Schouten (Rapid Circle), Shrusti Shah (Rapid Circle) & Maarten Visser (Rapid Circle)): A Live Patient Review Teams meeting app using Live Share SDK and Fluid Framework. he provides a comprehensive demo of the solution and code walkthrough.

This demo is taken from the Microsoft 365 & Power Platform weekly call – 22nd of August, 2023 Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Robert Schouten (Rapid Circle)

📖 Learn more
• Demo solution - https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-sp-dev-teams-sample-tab-live-patient-review-liveshare/

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

B

With first introducing ourselves, uh hello, everybody um we did. The hackathon, together uh with srishti uh Shah, see Scott consultant from India within the rapid Circle, uh together with Martin Fisher, he's business consultant uh within a rapid Circle, and me myself, uh Robert I'm, a principal sergeant and also MVP, uh and also working within rapid Circle, so um yeah.

B

What we're going to talk today is: uh let's go to the next slide. First, some things globally around the team's Global hack. We only have 15 minutes so I try to keep it uh as fast as possible, and we also try to do some demo and and uh some some codes review on what what did what we did within the uh a meeting app we built so first we're going to into more into the team's Global hack. Then we go into more okay.

B

What was our scenario we built, and then we go into more some into the some techniques we used like the the live share, SDK we used uh and some of those features uh within that and in the end we give a short demo.

B

So uh yeah for everyone who don't know about the team's Global act that teams Global act uh was a global academe first till June 15th and it was on creating an apps, an app for Microsoft teams.

B

um There were some specific categories like AI productivity, but you could just any kind of app for teams was feasible to add.

B

um We thought well, a lot of people will jump on the AI uh kind of things which was introduced during build, but there were also some other nice new features uh yeah over there on builds, so we thought let's build something around the live share, SDK, because we think this will really change how you can collaborate during meetings and within your apps around that so uh yeah.

B

If you would like to know more around the the the global hack there's a link within the presentation, we will share that later on um and you can find more about it, but also find all the the solutions uh there were around 60 Solutions uh uh during the hack created so yeah. You can find out more about in there and go take a look there.

B

So yeah our live patient review app. What what did we actually uh build? We built a Microsoft teams, meeting app um and yeah. We were thinking about. Okay. Can we grab a real live scenario? uh uh We can support with these new techniques.

B

um So yeah. We thought about um we're pretty much doing things within the healthcare, um so yeah Martin came up with a really great scenario around a multi-disciplinary consultation meetings which are meetings which takes place within hospitals in a physical room and during those meetings uh yeah. The doctors discussed multiple cases, mostly around four to six patients and uh yeah, and they go through all those patients.

B

uh What treatment do they need or do they need change in medication or food procedures which needs to be followed or other things um and yeah those meetings uh with 10 Specialists or uh around that that can take pretty much time around a few hours and and one of the key challenges that they they have around. That is that those doctors are are often uh yeah need to leave the room because they have emergencies, they have to go through and uh yeah. We thought what could we do to to support that?

B

And would it be great if those doctor scripts stay in the meeting well they're going to an emergency, maybe on their phone or get back into the meeting afterwards and still see what has been talked about? Etc so yeah? If you want more information, there's also a link to the Microsoft sample solution, Gallery, where it's uh uploaded to so you can find more uh around it there and, of course, we will show some more later on in the demo.

B

uh So yeah as I said, one of the things we've used within uh the the our solution is the live share, SDK and yeah. For all of you who don't know around the live share, SDK it was introduced uh during build last May and the live share. Sdk is an SDK designed to transform the teams apps into collaborative multi-user experiences, but without writing any dedicated back-end code, um so yeah with live share.

B

You can your users can co-watch go, create and go edits during meetings it seamlessly integrates with the fluid framework and in the next slide, I will collaborate a little bit more on the fluid framework.

B

um The the live share uh within teams uh is uh providing you with a fully free, managed and ready to use Azure flute relay that's a resource within Azure, um uh supporting the fluid framework service.

B

um Yeah the live share. Sdk itself consists of three three primary packages: the live share, core the live share, media and the live share. Kansas.

B

um We only use the live share core and the live share, canvas um yeah, so in the core and the canvas f, multiple uh yeah features and and objects. You can use uh to to really have that collaboration and life updating uh um within your applications.

B

So, for instance, you that there's a live share. Client, which makes it really easy for you to um yeah, connect to to the flute framework and flute framework containers can create them um and yeah with with the Azure flute relay you you get, uh you don't have to worry about all the plumbing around security and and things like that. uh It's it's all in your own tenant.

B

um Everyone within the meeting has automatically uh uh access to that container. So all that security Etc is.

A

B

Yeah taken away for you and that that's really uh a great thing around it um yeah there are all those things you could use within it, but it also leverage all the uh features of the fluid framework where you can have shared Maps uh where uh to to share your state and your state objects within your application and to all the clients connected to it.

B

um Another thing we used was was a canvas so the last year, SDK also has a live canvas, uh something like uh the the. uh How do you call it? The.

B

The Whiteboard, where you can ink on and stuff like that, and you have a laser pointer and things like that to your proposal and yeah. You also have a real-time mouse, cursor with user info, for instance, and you can build so yeah.

B

The fluid framework, uh as I said that Azure flute relay is a managed off ring for the fluid framework that helps with helps to build real-time collaborative experiences and replicate States across a connected JavaScript clients and the Microsoft whiteboards, Loop and OneNote are all examples of apps built with a fluid framework today and using that Azure fluid relay um so yeah as I said, um BD uh the Azure fluid relay is there for you, so you don't have to deploy anything to Azure around that um and yeah. It really helps to replicate that state.

B

So, as you can see on the screen, there's uh if I click this remove button, all the other users see that that user is removed, for instance, and you can really replicate that state change to all your clients and it's really low latency. So it's really quick uh in in in in updating all those clients.

B

Okay um for the time I'm going through a little bit quicker because we only have 15 minutes. There is some things like life presence where you can have the state of the user and see the mouse cursor for from the all users. um Also, the last presence contains current meeting user roles. We also used it within the application to see uh where we can also hide certain things like uh so only the organizer is able to do certain things within the application.

B

Etc um and, as I said, the life canvas where you can have inking uh uh mouse cursor, but also the laser pointer, which is really handy. Etc.

B

Let's switch to the demo I've already set up a meeting where I've added our uh just a map. uh uh As you can see here, it's the live patient review, I already opened it it's connected to the fluid container and, as you can see here, I have two different users, but this user is not the organizer and doesn't see anything yet, and this is the organizer and he has the option to add new patients. So we can accessor pause Luca. Also in and John, it's awesome right.

B

So, as you can see, I'm adding new patients here and instantly real time. The other app is updated there because I'm, the organizer I can also remove users here and we use the the live presence object there, and that gives us back uh every user within the meeting and its role. So we use that role to hide certain things within the application.

B

um We can say: okay, we go to the next patient Etc, that's what the organizer can do and we can also share the patients to the stage.

B

And now you can see it's a little bit squeezed. We need some styling here and there for the for some screen sizes, but normally you see it's a little bit wider um and what we can do within the application here is add some feedback so uh well speak. Professor.

B

And each user can do that, so we decided that each user can add feedback, and maybe another user is called back uh to an emergency and comes back later and and can see okay. What what has been discussed uh but also can already adds some uh feedback for John here.

B

And do that already and then or come back later, Etc and yeah, you can really uh yeah. Do those scenarios like we did we've discussed for this uh live patient read. We also had an option to add an image where you can choose a file.

B

And yeah, as you can see, on the right side, you can see I am there pointing so you ought to use this C is seeing what I'm doing and I can just ink on it and yeah. I can also say: I want a laser pointer and you see now a live laser pointer here. Seeing okay, hey, that's great, so yeah, that's uh our scenario and what we did um I'm pretty much almost out of time. So I have uh uh also some codes. Things prepared so I'm not sure.

B

If I can go on a little bit. um We have a fluid, live share um and yeah.

A

Robert- sorry- let's be really fast in here, because we do have two demos and we need to stop on power so but key.

B

Is the scenario anyway so yeah? Then then I'll I'll skip the codes uh walkthrough. um Thank you. Everyone uh uh for having us and I hope you liked our uh Our Winning hackathon solution. Thank you.