How to display Teams Participants' profile images in the composites

[JamesBurnside]

When joining Teams interop today, the Composites show the initials of others users in areas such as the video tile, the participant roster and the chat thread.

However, to make a richer experience you can display the participant's AAD (Azure Active Directory) profile image instead.

Before AAD Injection	After AAD Injection

This post uses MicrosoftGraph to query and fetch other Teams users' profile images.

Setup

To set user avatars to their AAD profile images you will need a few items setup:

• An AppRegistration for your Web App that has the Users.ReadBasic.All scope.
• An access token at runtime for making MicrosoftGraph queries using either your SPA or WebApp

Inject AAD images using Custom Data Injection

Injecting the AAD profile images will be done in two steps:

1. Create a method to fetch and cache profile images from MSGraph
2. Inject the images into the composite

Fetch and cache profile images from MicrosoftGraph

Microsoft Graph can be queried by either the client-side App or your server App (see Graph Tutorials for more info). This post will use the @microsoft/microsoft-graph-types which is a JavaScript wrapper around the MicrosoftGraph API.

/**
  * Fetch a profile image for a given AAD user from the Microsoft Graph
  * @param accessToken - user/app token with `Users.ReadBasic.All` permission
  * @param userId - AAD id of the user to fetch the profile image of.
  */
const fetchProfileImage = async (accessToken: string, userId: string): Promise<Blob> => {
  const msGraphClient = graphServiceUtils.getAuthenticatedClient(accessToken);
  return await msGraphClient.api(`/users/${userId}/photo/$value`).get();
};

Convert the image to a URL

The API on the CallCompsite and CallWithChatComposite requires a URL. The response from the MicrosoftGraph is a Blob. We can easily convert the blob to a base64 encoded url of the image:

const imageBlobToBase64 = (blob: Blob): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result as string);
    };
    reader.onerror = reject;
    reader.abort = reject;
    reader.readAsDataURL(blob);
  });
};

Cache the image

To avoid repeatedly fetching user profiles, we want to cache the profile image. For this purpose images will be cheaply cached locally for the lifetime of the app. You may consider caching for longer or shorter depending on your use case.

const CACHED_PROFILE_IMAGES: { [key: string]: string } = {};

/**
 * Get profile image from microsoft graph.
 *
 * @remarks
 * Caching policy: the result is cached and subsequent calls will return the cached result.
 * Caching expiration: the cache is local to the application. It is never expired for the lifetime of the application.
 *
 * @returns base64 encoded image
 */
const fetchProfileImageWithCaching = async (
  userId: string,
  options: {
    token: string;
  }
): Promise<string | undefined> => {
  // Check if we already have retrieved this image
  if (CACHED_PROFILE_IMAGE[userId]) {
    return CACHED_PROFILE_IMAGE[userId];
  }

  // fetch and convert the image to base64
  const blob = await fetchProfileImage(options.token, userId);
  const base64 = await imageBlobToBase64(blob);

  // cache image for subsequent calls
  CACHED_PROFILE_IMAGE[userId] = base64;
  return base64;
};

Display profile images in the Composite

To have the Composites use the profile images for avatars, we use Custom Data Model Injection; specifically the onFetchAvatarPersonaData function. First check the user is an AAD user, then fetch the profile image for the user:

<CallWithChatComposite
  adapter={/*yourAdapter*/}
  onFetchAvatarPersonaData={async (userId) => {
    const isAADUser = userId.startsWith('8:orgid:');
    if (!props.userGraphToken || !isAADUser) {
      return {};
    }
    const id = userId.replace('8:orgid:', '');
    const imageUrl = await fetchProfileImageWithCaching(id, { token: props.userGraphToken });
      return { imageUrl };
  }}
/>

Try it out and drop a comment if you have any questions!