Microsoft 365 Community Microsoft Teams, 16 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Sample Showcase: Virtual Event Manager

Description

In this 16-minute Developer-focused demo, Microsoft presenters Sathya Raveendran and Arun Kumar Anaparthi introduce the audience to a new PnP sample app that leverages Graph APIs to deliver: Calling & Meeting bot that initiates and pulls participants into a call, a Teams app that automatically gets added to a meeting scope, capture notes/Q&A (transcript) during meeting and saving it in OneNote, and capture attendance of who actually joined the call. Identified use scenarios including Education, Enterprise, Helpdesk Contact Center. This PnP Community demo is taken from the Microsoft Teams community call - February 2021, recorded on February 16, 2021.

Demo Presenters:
• Sathya Raveendran (Microsoft)
• Arun Kumar Anaparthi (Microsoft)

Supporting documents:
• Repo - Create Microsoft Teams Meeting with Calling & Meeting Bot, and add a custom app to the meeting programmatically- Sample code | https://github.com/pnp/teams-dev-samples/tree/master/samples/app-virtual-events-meeting-extensibility
• Teams Documentation - Apps in Teams meetings | https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings
• Graph Documentation – Add App to chat | https://docs.microsoft.com/en-us/graph/api/chat-post-installedapps?view=graph-rest-beta&tabs=http
• Graph Documentation - Calls and online meetings bots | https://docs.microsoft.com/en-us/microsoftteams/platform/bots/calls-and-meetings/calls-meetings-bots-overview
• Graph Documentation – List participants | https://docs.microsoft.com/en-us/graph/api/call-list-participants?view=graph-rest-1.0&tabs=http
• Graph Documentation - Graph notebook | https://docs.microsoft.com/en-us/graph/api/onenote-post-notebooks?view=graph-rest-1.0&tabs=http

Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog

A

Thanks everyone for joining I'm a product manager with teams insuring, I have with me my colleague, arun kumar as well. We are excited to take you through the features and capabilities of the latest app sample that we had published under the pnp teams, tip samples.

A

This sample app virtual event manager, as we call it, is extremely powerful in the sense that it bundles a variety of marquee teams. Platform capabilities in one single app, specifically this sample app, will help you as a developer to get to play with a following key aspects. The first one, of course, is the calling and meeting bots we have bots that can be registered and set up such that it can initiate peer-to-peer, calls invite more people into an existing or ongoing call by using graph apis for calling for calls and online meetings.

A

We call them as communication apis. This app sample that we have over here utilizes such a bot to initiate a call and pull participants into the call. The next one or the key capability that we are highlighting in this sample code is apps and teams meetings. I'm sure most of you would know about this, not so recently. I think it would be some four or five months back. We had announced about the availability of teams apps in the meeting surface.

A

You all know and are familiar with apps that are in the personal scope that are in a team or channel scope. Now you can have the goodness of teams apps on the meeting surface as well.

A

If you don't know about this, I strongly recommend that you check out the developer documentation around this. We have a good amount of information on the sample code, app as well that talks about how you can build apps, specifically for teams meetings and how that experience would look and feel like for the end users. This is a really interesting capability, and this unlocks a huge number of scenarios, so apps and teams meeting is definitely something that you should check out.

A

If you do, if you haven't heard about this so far, but this is old news right what this sample does in addition to apps and things meeting, is it uses a graph api to programmatically? Add an app that we want into a meeting with no manual intervention at all third capability. This app will also showcase a use of onenote graph apis that we use to save notes that you take during a meeting into a onenote section and a page of yours, your choice.

A

Finally, I think this is also very important, especially when you're developing apps and education sector education sector scenarios right the app provides a way for you to programmatically capture attendance of people who actually join the courts, not all the attendees, but people who actually joined the calls so be on the lookout. For these four points, these four capabilities in our demo. Now what what you see over here is basically a demo of the app and action we open the app- and this is primarily designed from a personal as a personal scope, app.

A

We have a tab sso that we are using for signing in and once we sign in, we use the personal scope, tab interface that you see over here to create a teams. Meeting this step uses a graph api called create even graph api that uses input parameters such as the subject, the participant information that we entered, which is by the way, uses a people picker, and we use the input parameters also the start date and time end date and time of a meeting to call the ap and schedule a meeting according to those parameters.

A

Now this gets added to all the attendees calendar on its own and creates a team's meeting join url as well as your familiar once. This event is created. This is a crucial step. If you see over here at the time of meeting the bot actually calls you there is an actual call that gets placed to the user. This is a meeting joint notification that typically appears for any team meeting, but in this case there's a bot calling all the attendees and when you click on answer, you get pulled into a meeting.

A

That's the way, a calling and meeting bot works, and once inside a meeting you can have a business logic such that you can have an ivr uh on entering a certain sequence. The uh the person is pulled into a meeting, that's up to your business logic, as you can see over here. The bot also is a participant. This is the other person also getting pulled into a meeting. If you see over here, the bot is also added as a participant in the meeting.

A

What this means is whatever we have in terms of audio or video discussions, as part of the meeting is something that the bot gets access to as well. While this is not something that we use as part of the sample app, this is potentially something that you can extend. You can take up and do some audio or video processing of the content that is presented in the meeting or discussions that happen in the meeting, a possible idea that I'm just throwing out there is, since the bot gets access to the audio stream as well.

A

You can potentially use some kind of audio processing to do live translations as well.

A

Now. The third capability that we talked about is adding an app as part of the meeting right. That's what you see over here now. In this case, we didn't add an app to the meetings manually. This has been programmatically added uh by the app by the business logic itself, using a graph api which we will cover in much more detail in a bit.

A

What you see over here is using this app surface on the side panel you are able to the users. The attendees in this particular meeting are able to capture notes that are happening during the meeting. Any team discussions, anything that you want to be added, as notes can be captured on the side panel and when saved or shared. This is calling the onenote graph apis in the backend and storing it in the in the onenote section on page that we create programmatically as well.

A

This is a beautiful integration across a meeting service, an app on teams, our team's platform and onenote all different uh different platforms within ecosystem coming together in one go the same way, you can also use not just one node graph, apis, think about using tasks and other apis as well and integrate taking notes and action items as part of a meeting right in one place.

A

The last part that I mentioned regarding capturing the attendee details to join the meeting right. This is also equally important when you think about education scenarios in a lot of education sector. One of the frequent ask that we hear from customers is uh the ability to programmatically capture who joined the meeting and when and then report it in some form of a dashboard. Now this sample app provides you a means to do that.

A

What it does is it periodically captures the snapshot of attending information every three minutes when I say periodically, it captures every three minutes and locks it in azure cosmos db. So you have all the list of attendees at three minute interval, which you can potentially merge all these snapshots and then do your own processing and analysis on top of it to come up with the meeting capture retirements with that, I would want to hand over to my colleague arun to walk you through rest of the capabilities in much more detail in the technical layer.

B

Thanks sacha and myself arun, so I am working in teams, partner ecosystem as a full stack developer and supporting partners, as well as developing these sample codes. So whatever sacha showed it is already available in the pnp samples and in the github. As such, I said there are the four different sections on this. The first section is creating online event. So for that we used this graph api.

B

For all my samples, we used delegated permissions, but this is the graph apa we used for creating an event. So whenever you will create an event with the parameters like users and the subject and the participants it will, it will take that input and it will create a online event in your calendar, so that participants also can see that meeting in their calendars.

B

That's the first graph api which we used and the second one is once we created an online event based on the time or based on that schedule time my calling and online meeting bought in this case I used audio call and my calling and online meeting board will initiate the call to rest of all the folks and they can join the call once they can join the call. You know we also used a graph api called list of participants. That means whoever joining the meeting.

B

I want to capture all those people and you know, store it into one storage either. In my case, I stored in the cosmos db, but we can also store it in the like sql, also whenever wherever you require, but we used a graph apa to capture all the list of participants this one. This is a communication api. In that you need to pass the caller id. I mean call id. That means our meeting id. Then you can able to get all the participants information from that call.

B

So these are the three different sections. One is online, creating an event using this graph apa. Once we created an event, then used a calling and online meeting board after that we we used a list of participants now uh coming to that app in a team array how we developed a app in a tip. So this is the documentation which such as shared. So in our case, in our case, we used side panel experience.

B

So there are the four different experiences. uh If you want to develop a any app for a meetings, one is like a pre-meeting app experience. Another one is a pre-meeting tab and another one is the post meeting. The other one is a the other. One is in meeting dialogue, so in meeting dialogue means it will use a notification apa and also it will pop up like a task model in a meeting the last one is the side panel, one which we used it this one. This is one is a side panel.

B

So if you, if you, if once you installed your app so that the app icon will you can able to see here and you can able to see all your window here, this is called a side panel. So in our sample we use the side panel app so that you can capture over all nodes information. You can capture one not in updates in the meeting as an owner or as a member.

B

I can update my nodes also so in in we took that concept and we added side panel app in our sample and how we can so earlier. We, we don't have a graph api to add any app into meeting, but recently there is a new, a graph api introduced, and this is the graph api for that. So, if you want to add any app into meeting, you can use a add a add a app to chart.

B

That means you can able to add a chart using a chart id using a in-person chart id or using a group chat id are using a meeting chart id. You can able to add your app into particular meetings. So in that case, in our case, we use this graph api and we used a delegated permission for this. But this is also will support for application permissions, as once we so using that we are able to add our app into that particular meeting, whatever we created using online meeting.

B

So it is like a sequence, once we created an online event based on that meeting id, I can able to add a app which is already installed in my tenant. So there is a sequence like we. We followed like one once we created online event meeting or after we created online even meeting based on that meeting id based on the chart id, which I already installed my onenote app into my tenant. That app I installed into every meeting.

B

So imagine that if you have a like a doctor and patient condition like if you want to as a admin, if you want to schedule a calls so that you can shoot like also that in every in every meeting, if you want to add a meeting so that you can do you can use this automation or you can use this graph api to do all those things and finally, for our sample, we used a notebook graph apis to create a notebook on fly. So in.

B

In my case, I used a notebook called group, slash id because I binded for one particular group id that's why we created a onenote graph apis and once we created a onenote page as a owner as a meeting owner I'll create a first one note page once it is created. As a member, I can update the particular page and I can update my notes. So these are the different graph apis. We used as part of this sample.

A

Thanks for walking through the door uh in terms of uh in terms of the what you saw over here is just a framework right, a sample app right as we likely call it it's a sample app. It's it's a base framework that has been given to you, which you can extend into multiple user scenarios, use case scenarios that you can build as a full-fledged app and you can take it to other customers or build for your own requirements now in terms of what scenarios can potentially be lighted up using the sample.

A

App is what you see over here. This is not a complete list. This is just a starting point, I'm just giving you some ideas or to think along these lines. Definitely like even like I don't mention right now. There is even a doctor-patient scenario that can be lighted up now. What you see over here is in an education sector using the sample app.

A

You can extend some parts of it to build a solution to build an app that allows professors or teachers to create teams meeting for classes and have a bot listening and transcribe that meeting into a language of choice for students. It can even listen for keywords that need to be marked or tagged, and you can do further analysis based on that students.

A

Part of the same class who want to take notes together, can use the side panel and all notes that can be taken can also be grouped together in a particular location within fields and, of course the continence report feature is something that we saw already in an enterprise scenario. uh Take any enterprise. uh There is always manager team meetings that happen.

A

Definitely this could be used as a collaboration mechanism for teams to come together, uh keep track of nodes across different meeting instances and action items, and you can, like I mentioned earlier- even integrate tasks and planner into this. Collaborating on learning and development would also be made easier by this. By way of having questions posed during training session and gathering participant answers, the site panel, as you saw in the documentation, the opportunities are limitless in terms of help test contact center. This is another area that calling and meeting bot would be vital.

A

Imagine any contact center scenario right when, uh when someone raises a support request, it gets assigned to an available agent. The meeting that the meeting and the app that we have currently have calls the attendees that are explicitly mentioned. You can customize it such that when a user, when a support request comes through the bot, looks up a set of agents in a database, identify who's available based on their presence or shift timings or calendar availability, and then call an agent who is currently available. Who can answer that particular request?

A

So in this way you can use this sample app as a base and can actually build the contact center solution as well. These are some of the ideas that I want to put in front of you. Of course, there are more multiple other scenarios that you can imagine and build on top of this, and I'm happy to hear if you have any questions any anything around this and we can, we can take the questions in the q a section over to youtube.

B

Awesome this was super interesting and really great. Thank you. Satya and naren really appreciate it.