Microsoft 365 Community Microsoft Teams, 4 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams Meeting App – Record and playback attendee names

Description

How do I say that person’s name? In this 14-minute developer-focused demo, Markus Möller delivers a virtual assistant – the means to capture and subsequently hear upon demand, the pronunciation of a meeting participant’s name. Start by creating a meeting and install Teams app into the meeting. See experience in UI from scheduler and participant perspectives. Understand usage prerequisites, pre-meeting and in-meeting experiences, and step through core code - Teams manifest, handling device types, meeting status, custom audio control. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on October 14, 2021.

Demo Presenter: Markus Möller (Avanade) | @ Moeller2_0

Supporting materials:
• Article - Meeting apps in Microsoft Teams (1) – Pre-meeting | https://mmsharepoint.wordpress.com/2021/09/07/meeting-apps-in-microsoft-teams-1-pre-meeting/
• Sample - tab meeting record name - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-meeting-record-name
• Documentation - Apps for Teams meetings | https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Today I want to talk about microsoft teams, meeting apps and I want to give you a sample on the pre-meeting and the in-meeting experience, and the sample is an idea given to me by microsoft, by bob german and by jaik also today, in the call and thanks for your support by the way, because they were not only giving the idea well supporting me about the um background stuff, because this is relatively new short about me.

A

My name is marcus muller for those about who don't know me: microsoft, 365, developer, expert, I'm working for abernath in germany, and you can find me on twitter as well as wire, my public blog, where I also illustrate the given sample today, let's directly jump into the demo to first show what we have and later quickly explain how it works.

A

Let's first start with how to install a quick meeting app into a meeting. So therefore, we first have to create.

B

A

A

B

We already have.

A

And, what's really important is to have this apps up and running? Is you always need a meeting with at least one attendee?

A

There can one use one of my demo users and send this out once we have this meeting, we can open or edit it again and then we can add a hidden teams app in my case. I already installed it, but I could also sideload it here from there, but I have already installed it and running it. So, in my case this is a tab and, as you might know how to install it regularly, um this is quite the same. You install your tab with the configuration in my case.

A

I don't need it and what we have here now already. What you see here already now is the so-called pre-meeting experience, meaning we have a tap in our meeting, which is not running yet, but this is in my case. This is the purpose that all the attendees can record their name to help others later on in if they are in doubt about their pronunciation and therefore I have a record area here, and this works simply uh like a speech message in whatsapp. You would like so push the button.

A

uh Once you push it, um you can record it once you lose it. The recording ends, marcus, demonstrating, live.

A

What happened now is the audio get recorded and will be stored in the background in a configured, sharepoint library and there we have it back. We also have some user information like a photo or so, and what I additionally did. I created the custom audio control and was not using the the standard one, and I will later show you why and once marcus demonstrating live. We hear what we recorded.

A

I hope you can also hear it, and this is what you can do in pre-meeting, what every participant can do now it becomes a bit tricky because I would like to show you now here directly the in meeting experience, but therefore I need some help, because this in meeting experience currently only works with a physical team's desktop client, and this is what I had to prepare with another machine beside my currently actively running teams- client here, where I from where I'm presenting- and this is another private laptop- and here I have prepared another demo already, because I did already several recordings and this meeting now we can directly join if we can have the microphone or not doesn't really matter.

A

You also do not really need the video, it's all disturbing and what we see here now, if you pay attention on the icons above here where we can also give feedback, and so here we have an additional custom icon, which is our app that we have and this app we can now open up like you could also do for um like you can also do for the chat or for the attendees, and here we have all the recordings of the attendees that already recorded their name, and you can now playback, if you're in doubt about their pronunciation, hans hansen, klaus, clausen, marcus mellon, so that's it.

A

This is how it works in the in experience and, as you know, from the chat, uh this emitting experience is only valid for the user, who picks it. So, in my case I see it now. The others might not see it, but then the others see it when they open it themselves. So it's like you might one of you might have opened the chat here in the uh running call the others might have not yeah.

A

There are other options where you can also share something, but this I will show you in the slides back and I think it's all from the demo side, and now we can go back to our slides and explain how this works.

A

As I already said, there are some prerequisites. What you need. You need a meeting with at least one participant to install an app for the in-meeting experience. You need a physical team's, desktop client and not a web client or also a retro client like windows, 365, and so this is currently not supported.

A

What you additionally need and this you might even need on on two levels. If you do it like, I did you need some device permissions.

A

One may be for the browser, as I was recording the pre-meeting experience from a browser client, but also the team's client, now requests device permissions and this will be handled via the team's manifest first and then by wire user acceptance. I can show you the teams manifest in a minute and the user acceptance. You can also see some screenshots in my blog and, of course you need this team's tab application and the specific teams manifest and there we will come to in the over next slide.

A

We also have some additional options. I already touched this somehow so I called this um pre or post meeting experience, which is quite the same area. This is, can be uh in parallel to the team's chat or to the meeting chat as well as the meeting itself. This is currently quite the same, and you also have the shown in meeting experience as a side panel, but this can also show up as a dialog box, which is more centered or as in meeting stage and in the opposite to the side panel.

A

The stage, if I open the stage, which can be, for instance, initiated by one participant from the side panel, then it's like when he presents for all so if you have something some content that you would like to present on demand to all users coming from an app also, then you would use the stage panel as already announced. Let's now have a quick look at what specifics we have in the team's manifest yeah.

A

On the one hand, we have a scope which at least needs to be group check, and then we have the context and the meeting surface which work somehow in parallel right now. This is um where we really say: hey. This app shall show up shall be available in the meeting details, tab on the chat tab, which is the pre-meeting experience, but it should be also available in the meeting site panel, for instance, and last not least, we have the device permissions, and here we are asking for media, which is uh not only audio.

A

It's also a video in that case, but we only need the audio permissions. The next thing, which is quite specific in terms of the in the opposite to a normal team step, is we have some specific parameters for the meeting which I also used in this sample. On the one hand, I used the meeting id this comes from the context. This meeting id is a specific to it. uh It's not the same like the id when you have it in your event or invent of the participants and also not an online meeting id.

A

This is a specific id for the meeting, but you can treat it and what I do as a unique key. So I can store my recordings, for instance, in combination with the meeting id so that I clearly know these recordings are for that meeting and these recordings are for another meeting.

A

The second thing: uh what I'm using is the so called frame context, and this is here in the recording area and the recording area, I'm only showing, as you might have seen in the pre-meeting experience now, you have seen it in a browser when I recorded it, but when I was switching to the team's client to the in meeting experience, I did not show it anymore, and this is what I'm here checking for. Am I in the frame context, content which is, uh in that case the pre-meeting one or this could be also?

A

uh I don't know by heart now it's like a side panel or meeting side panel or so then I know hey now, I'm in a side panel running and then I can show up different things. If I would like to do next, uh some things about the recording.

A

What you see on the left hand side is uh simply the ui stuff. So here I have a button with a microphone on. I can yeah and once I on mouse down, I record some data and on mouse up, I stopped the recording. This is what you've seen and the recording takes place on the right side, and what I'm using here still is um the navigator sdk so from the browser stuff.

A

There's also a teams sdk already available for that, but this is currently only supported for mobile devices, and there was uh this is why I was still keeping my fingers off here, because mobile devices, of course much harder when you only have mobile devices running much harder to investigate and to debug or to test it out.

A

So the first thing what we are doing here is uh we try to get the user media, so the microphone access, and once we have it here, then we instantiate a media recorder, and this media recorder gets the mime type. We try to get the the first track for it and then on start. I shorten this up a bit that it fits on. One slide, then I can make it visible here.

A

Set recording is nothing else than something uh putting to the state hey the recording is running now, because then I need to display a different microphone.

A

A filled out microphone instead of an empty one, and so on is not that important, but once we have the data, we push it to our current chunk and once the recording stops, of course, once again putting it to the state, and then we try to get the track and we try to push back the audio stream to an uh from an upper component uh coming to a callback method.

A

That's it so far how this works. You might have also seen this in the browser. This is uh as I'm using. The um the navigator thing is that the browser of course pays attention, hey, there's a recording running and this uh will get off once the recording is stopped and uh yeah.

A

This is how it looks like in the uh how it looked like simply that we had this uh two microphone icons empty and filled out, one so that you can see that you still push the button and then last but not least, what I did is what I was creating is a custom audio control.

A

um This is also quite simple. I used several icons here and then I uh yeah, I put some methods on it on the media stream and what you also have is the audio component.

A

This is the standard audio component, and if you remove here, the control stack, which you do not see here, then this audio control, the standard audio control does not show up but physically, is still available and gives us things like this here that we can pause it or we can play it or we can put the volume uh increase it or we can uh put it to mute. Also, no.

A

Here's sorry that for those of you who might not know what I'm talking about in terms of the custom audio control, that the standard audio control looks a bit like this and my custom, one you have seen, looks like this or this, and this is also the reason because this custom control, I'm using the fluent ui react, not star components, can easily adjust it based on the team's seam yeah, and this, I think, looks much better than the other one.

A

This breaks a bit up, that's all from my side here the typical resources, my blog series on that sample, but also the pmp sample itself and the repository and the official microsoft documentation on teams meeting apps, that's for my site! Thank you.

B

Awesome stuff, marcus, really incredible feedback in the chat. There's some questions in there I'll. Let you go address those while we move into our next demo excellent job.