Spotlight states

In this article, you learn how to implement Microsoft Teams spotlight capability with Azure Communication Services Calling SDKs. This capability allows users in the call or meeting to pin and unpin videos for everyone. Since the video stream resolution of a participant is increased when spotlighted, it should be noted that the settings done on Video Constraints also apply to spotlight.

Prerequisites

Install the SDK

Use the npm install command to install the Azure Communication Services Common and Calling SDKs for JavaScript:

npm install @azure/communication-common --save
npm install @azure/communication-calling --save

Initialize required objects

A CallClient instance is required for most call operations. Here, you create a new CallClient instance. You can configure it with custom options like a Logger instance.

When you have a CallClient instance, you can create a CallAgent instance by calling the createCallAgent method on the CallClient instance. This method asynchronously returns a CallAgent instance object.

The createCallAgent method uses CommunicationTokenCredential as an argument. It accepts a user access token.

You can use the getDeviceManager method on the CallClient instance to access deviceManager.

const { CallClient } = require('@azure/communication-calling');
const { AzureCommunicationTokenCredential} = require('@azure/communication-common');
const { AzureLogger, setLogLevel } = require("@azure/logger");

// Set the logger's log level
setLogLevel('verbose');

// Redirect log output to console, file, buffer, REST API, or whatever location you want
AzureLogger.log = (...args) => {
    console.log(...args); // Redirect log output to console
};

const userToken = '<USER_TOKEN>';
callClient = new CallClient(options);
const tokenCredential = new AzureCommunicationTokenCredential(userToken);
const callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'optional Azure Communication Services user name'});
const deviceManager = await callClient.getDeviceManager()

Communication Services or Microsoft 365 users can call the spotlight APIs based on role type and conversation type

In a one to one call or group call scenario, the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
startSpotlight ✔️ ✔️ ✔️
stopSpotlight ✔️ ✔️ ✔️
stopAllSpotlight ✔️ ✔️ ✔️
getSpotlightedParticipants ✔️ ✔️ ✔️

For meeting scenario the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
startSpotlight ✔️ ✔️
stopSpotlight ✔️ ✔️ ✔️
stopAllSpotlight ✔️ ✔️
getSpotlightedParticipants ✔️ ✔️ ✔️

Spotlight is an extended feature of the core Call API. You first need to import calling Features from the Calling SDK:

import { Features} from "@azure/communication-calling";

Then you can get the feature API object from the call instance:

const spotLightFeature = call.feature(Features.Spotlight);

Start spotlight for current participant:

To pin the video of the current/local participant, use the following code. This action is idempotent, trying to start spotlight on a pinned participant does nothing

spotLightFeature.startSpotlight();

Spotlight specific participants

Any participant in the call or meeting can be pinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can start spotlight for other participants. This action is idempotent, trying to start spotlight on a pinned participant does nothing

// Specify list of participants to be spotlighted
CommunicationUserIdentifier acsUser = new CommunicationUserIdentifier(<USER_ID>);
MicrosoftTeamsUserIdentifier teamsUser = new MicrosoftTeamsUserIdentifier(<USER_ID>)
spotLightFeature.startSpotlight([acsUser, teamsUser]);

Stop spotlight for current participant:

To unpin the video of the current/local participant, use the following code. This action is idempotent, trying to stop spotlight on an unpinned participant does nothing

spotLightFeature.stopSpotlight();

Remove spotlight from participants

Any pinned participant in the call or meeting can be unpinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can unpin other participants. This action is idempotent, trying to stop spotlight on an unpinned participant does nothing

// Specify list of participants to be spotlighted
CommunicationUserIdentifier acsUser = new CommunicationUserIdentifier(<USER_ID>);
MicrosoftTeamsUserIdentifier teamsUser = new MicrosoftTeamsUserIdentifier(<USER_ID>)
spotLightFeature.stopSpotlight([acsUser, teamsUser]);

Remove all spotlights

All pinned participants can be unpinned using this API. Only MicrosoftTeamsUserIdentifier users who have an organizer, co-organizer or presenter role can unpin all participants.

spotLightFeature.stopAllSpotLight();

Handle changed states

The Spotlight API allows you to subscribe to spotlightChanged events. A spotlightChanged event comes from a call instance and contains information about newly spotlighted participants and participants whose spotlight were stopped

// event : { added: SpotlightedParticipant[]; removed: SpotlightedParticipant[] }
// SpotlightedParticipant = { identifier: CommunicationIdentifier, order?: number }
// where: 
//  identifier: ID of participant whos spotlight state is changed
//  order: sequence of the event

const spotlightChangedHandler = (event) => {
    console.log(`Newly added spotlight state ${JSON.stringify(event.added)}`);
    console.log(`Newly removed spotlight state ${JSON.stringify(event.removed)}`);
};
spotLightFeature.on('spotlightChanged', spotlightChangedHandler);

Use the following to stop receiving spotlightUpdated events

spotLightFeature.off('spotlightChanged', spotlightChangedHandler);

Get List of all participants currently spotlighted

To get information about all participants that are spotlighted on the current call, use the following API call. It returns an array of SpotlightedParticipant

let spotlightedParticipants = spotLightFeature.getSpotlightedParticipants();

Install the SDK

Locate your project-level build.gradle file and add mavenCentral() to the list of repositories under buildscript and allprojects:

buildscript {
    repositories {
    ...
        mavenCentral()
    ...
    }
}
allprojects {
    repositories {
    ...
        mavenCentral()
    ...
    }
}

Then, in your module-level build.gradle file, add the following lines to the dependencies section:

dependencies {
    ...
    implementation 'com.azure.android:azure-communication-calling:1.0.0'
    ...
}

Initialize the required objects

To create a CallAgent instance, you have to call the createCallAgent method on a CallClient instance. This call asynchronously returns a CallAgent instance object.

The createCallAgent method takes CommunicationUserCredential as an argument, which encapsulates an access token.

To access DeviceManager, you must create a callAgent instance first. Then you can use the CallClient.getDeviceManager method to get DeviceManager.

String userToken = '<user token>';
CallClient callClient = new CallClient();
CommunicationTokenCredential tokenCredential = new CommunicationTokenCredential(userToken);
android.content.Context appContext = this.getApplicationContext(); // From within an activity, for instance
CallAgent callAgent = callClient.createCallAgent(appContext, tokenCredential).get();
DeviceManager deviceManager = callClient.getDeviceManager(appContext).get();

To set a display name for the caller, use this alternative method:

String userToken = '<user token>';
CallClient callClient = new CallClient();
CommunicationTokenCredential tokenCredential = new CommunicationTokenCredential(userToken);
android.content.Context appContext = this.getApplicationContext(); // From within an activity, for instance
CallAgentOptions callAgentOptions = new CallAgentOptions();
callAgentOptions.setDisplayName("Alice Bob");
DeviceManager deviceManager = callClient.getDeviceManager(appContext).get();
CallAgent callAgent = callClient.createCallAgent(appContext, tokenCredential, callAgentOptions).get();

Communication Services or Microsoft 365 users can call the spotlight APIs based on role type and conversation type

In a one to one call or group call scenario, the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
startSpotlight ✔️ ✔️ ✔️
stopSpotlight ✔️ ✔️ ✔️
stopAllSpotlight ✔️ ✔️ ✔️
getSpotlightedParticipants ✔️ ✔️ ✔️
maxSupported ✔️ ✔️ ✔️

For meeting scenario the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
startSpotlight ✔️ ✔️
stopSpotlight ✔️ ✔️ ✔️
stopAllSpotlight ✔️ ✔️
getSpotlightedParticipants ✔️ ✔️ ✔️
maxSupported ✔️ ✔️ ✔️

Spotlight is an extended feature of the core Call API. You first need to import calling Features from the Calling SDK:

import com.azure.android.communication.calling.SpotlightFeature;

Then you can get the feature API object from the call instance:

SpotlightCallFeature spotlightCallFeature;
spotlightCallFeature = call.feature(Features.SPOTLIGHT);

Start spotlight for participants:

Any participant in the call or meeting can be pinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can start spotlight for other participants. This action is idempotent, trying to start spotlight on a pinned participant does nothing

To use this feature, a list of participants identifiers is required

List<CommunicationIdentifier> spotlightIdentifiers = new ArrayList<>();
CommunicationUserIdentifier acsUser = new CommunicationUserIdentifier(<USER_ID>);
MicrosoftTeamsUserIdentifier teamsUser = new MicrosoftTeamsUserIdentifier(<USER_ID>);
spotlightIdentifiers.add(new CommunicationUserIdentifier("<USER_ID>"));
spotlightIdentifiers.add(new MicrosoftTeamsUserIdentifier("<USER_ID>"));
spotlightCallFeature.StartSpotlight(spotlightIdentifiers);

The following API can also be used to start the spotlight of participants

CommunicationUserIdentifier acsUser = new CommunicationUserIdentifier(<USER_ID>);
MicrosoftTeamsUserIdentifier teamsUser = new MicrosoftTeamsUserIdentifier(<USER_ID>);
spotlightCallFeature.StartSpotlight(acsUser, teamsUser);

Remove spotlight from participants

Any pinned participant in the call or meeting can be unpinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can unpin other participants. This action is idempotent, trying to stop spotlight on an unpinned participant does nothing

To use this feature, a list of participants identifiers is required

List<CommunicationIdentifier> spotlightIdentifiers = new ArrayList<>();
CommunicationUserIdentifier acsUser = new CommunicationUserIdentifier(<USER_ID>);
MicrosoftTeamsUserIdentifier teamsUser = new MicrosoftTeamsUserIdentifier(<USER_ID>);
spotlightIdentifiers.add(new CommunicationUserIdentifier("<USER_ID>"));
spotlightIdentifiers.add(new MicrosoftTeamsUserIdentifier("<USER_ID>"));
spotlightCallFeature.StopSpotlight(spotlightIdentifiers);

The following API can also be used to remove the spotlight of participants

CommunicationUserIdentifier acsUser = new CommunicationUserIdentifier(<USER_ID>);
MicrosoftTeamsUserIdentifier teamsUser = new MicrosoftTeamsUserIdentifier(<USER_ID>);
spotlightCallFeature.StopSpotlight(acsUser, teamsUser);

Remove all spotlights

All pinned participants can be unpinned using this API. Only MicrosoftTeamsUserIdentifier users who have an organizer, co-organizer or presenter role can unpin all participants.

spotlightCallFeature.stopAllSpotlight();

Handle changed states

The Spotlight API allows you to subscribe to SpotlightChanged events. A SpotlightChanged event comes from a call instance and contains information about newly spotlighted participants and participants whose spotlight were stopped

import com.azure.android.communication.calling.SpotlightedParticipant;

// event : { added: SpotlightedParticipant[]; removed: SpotlightedParticipant[] }
// SpotlightedParticipant = { identifier: CommunicationIdentifier }
// where: 
//  identifier: ID of participant whos spotlight state is changed
void onSpotlightChanged(SpotlightChangedEvent args) {
    Log.i(ACTIVITY_TAG, String.format("Spotlight Changed Event"));
    for(SpotlightedParticipant participant: args.getadded()) {
        Log.i(ACTIVITY_TAG, String.format("Added ==>: %s %d", Utilities.toMRI(participant.getIdentifier())));
    }

    for(SpotlightedParticipant participant: args.getremoved()) {
        Log.i(ACTIVITY_TAG, String.format("Removed ==>: %s %d", Utilities.toMRI(participant.getIdentifier())));
    }
}
spotlightCallFeature.addOnSpotlightChangedListener(onSpotlightChanged);

Get all spotlighted participants:

To get information about all participants that have spotlight state on current call, you can use the following API. The returned array is sorted by the order the participants were spotlighted.

List<SpotlightedParticipant> currentSpotlightedParticipants = spotlightCallFeature.getSpotlightedParticipants();
foreach (SpotlightedParticipant participant in currentSpotlightedParticipants)
{
    Trace.WriteLine("Participant " + participant.Identifier.RawId + " has spotlight");
}

Get the maximum supported spotlight:

The following API can be used to get the maximum number of participants that can be spotlighted using the Calling SDK

spotlightCallFeature.maxSupported();

Set up your system

Create the Xcode project

In Xcode, create a new iOS project and select the Single View App template. This quickstart uses the SwiftUI framework, so you should set Language to Swift and set Interface to SwiftUI.

You're not going to create tests during this quickstart. Feel free to clear the Include Tests checkbox.

Screenshot that shows the window for creating a project within Xcode.

Install the package and dependencies by using CocoaPods

  1. Create a Podfile for your application, like this example:

    platform :ios, '13.0'
    use_frameworks!
    target 'AzureCommunicationCallingSample' do
        pod 'AzureCommunicationCalling', '~> 1.0.0'
    end
    
  2. Run pod install.

  3. Open .xcworkspace by using Xcode.

Request access to the microphone

To access the device's microphone, you need to update your app's information property list by using NSMicrophoneUsageDescription. You set the associated value to a string that will be included in the dialog that the system uses to request access from the user.

Right-click the Info.plist entry of the project tree, and then select Open As > Source Code. Add the following lines in the top-level <dict> section, and then save the file.

<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access for VOIP calling.</string>

Set up the app framework

Open your project's ContentView.swift file. Add an import declaration to the top of the file to import the AzureCommunicationCalling library. In addition, import AVFoundation. You'll need it for audio permission requests in the code.

import AzureCommunicationCalling
import AVFoundation

Initialize CallAgent

To create a CallAgent instance from CallClient, you have to use a callClient.createCallAgent method that asynchronously returns a CallAgent object after it's initialized.

To create a call client, pass a CommunicationTokenCredential object:

import AzureCommunication

let tokenString = "token_string"
var userCredential: CommunicationTokenCredential?
do {
    let options = CommunicationTokenRefreshOptions(initialToken: token, refreshProactively: true, tokenRefresher: self.fetchTokenSync)
    userCredential = try CommunicationTokenCredential(withOptions: options)
} catch {
    updates("Couldn't created Credential object", false)
    initializationDispatchGroup!.leave()
    return
}

// tokenProvider needs to be implemented by Contoso, which fetches a new token
public func fetchTokenSync(then onCompletion: TokenRefreshOnCompletion) {
    let newToken = self.tokenProvider!.fetchNewToken()
    onCompletion(newToken, nil)
}

Pass the CommunicationTokenCredential object that you created to CallClient, and set the display name:

self.callClient = CallClient()
let callAgentOptions = CallAgentOptions()
options.displayName = " iOS Azure Communication Services User"

self.callClient!.createCallAgent(userCredential: userCredential!,
    options: callAgentOptions) { (callAgent, error) in
        if error == nil {
            print("Create agent succeeded")
            self.callAgent = callAgent
        } else {
            print("Create agent failed")
        }
})

Communication Services or Microsoft 365 users can call the spotlight APIs based on role type and conversation type

In a one to one call or group call scenario, the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
startSpotlight ✔️ ✔️ ✔️
stopSpotlight ✔️ ✔️ ✔️
stopAllSpotlight ✔️ ✔️ ✔️
spotlightedParticipants ✔️ ✔️ ✔️
maxSupported ✔️ ✔️ ✔️

For meeting scenario the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
startSpotlight ✔️ ✔️
stopSpotlight ✔️ ✔️ ✔️
stopAllSpotlight ✔️ ✔️
spotlightedParticipants ✔️ ✔️ ✔️
maxSupported ✔️ ✔️ ✔️

Spotlight is an extended feature of the core Call API. You first need to import calling Features from the Calling SDK:

import AzureCommunicationCalling

Then you can get the feature API object from the call instance:

@State var spotlightFeature: SpotlightCallFeature?

spotlightFeature = self.call!.feature(Features.spotlight)

Start spotlight for participants:

Any participant in the call or meeting can be pinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can start spotlight for other participants. This action is idempotent, trying to start spotlight on a pinned participant does nothing

To use this feature, a list of participants identifiers is required

var identifiers : [CommunicationIdentifier] = []
identifiers.append(CommunicationUserIdentifier("<USER_ID>"))
identifiers.append(MicrosoftTeamsUserIdentifier("<USER_ID>"))
spotlightFeature.startSpotlight(participants: identifiers, completionHandler: { (error) in
    if let error = error {
        print ("startSpotlight failed %@", error as Error)
    }
})

Remove spotlight from participants

Any pinned participant in the call or meeting can be unpinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can unpin other participants. This action is idempotent, trying to stop spotlight on an unpinned participant does nothing

To use this feature, a list of participants identifiers is required

var identifiers : [CommunicationIdentifier] = []
identifiers.append(CommunicationUserIdentifier("<USER_ID>"))
identifiers.append(MicrosoftTeamsUserIdentifier("<USER_ID>"))
spotlightFeature.stopSpotlight(participants: identifiers, completionHandler: { (error) in
    if let error = error {
        print ("stopSpotlight failed %@", error as Error)
    }
})

Remove all spotlights

All pinned participants can be unpinned using this API. Only MicrosoftTeamsUserIdentifier users who have an organizer, co-organizer or presenter role can unpin all participants.

spotlightFeature.stopAllSpotlight(completionHandler: { (error) in
    if let error = error {
        print ("stopAllSpotlight failed %@", error as Error)
    }
})

Handle changed states

The Spotlight API allows you to subscribe to SpotlightChanged events. A SpotlightChanged event comes from a call instance and contains information about newly spotlighted participants and participants whose spotlight were stopped

// event : { added: SpotlightedParticipant[]; removed: SpotlightedParticipant[] }
// SpotlightedParticipant = { identifier: CommunicationIdentifier }
// where: 
//  identifier: ID of participant whos spotlight state is changed

spotlightFeature = self.call!.feature(Features.spotlight)
spotlightFeature!.delegate = self.SpotlightDelegate

public class SpotlightDelegate: SpotlightCallFeatureDelegate {
    public func SpotlightCallFeature(_ spotlightCallFeature: SpotlightCallFeature, didChangeSpotlight args: SpotlightChangedEventArgs) {
        args.added.forEach { participant in
            print("Spotlight participant " + Utilities.toMri(participant.identifier) +  "is ON")
        }
        args.removed.forEach { participant in
            print("Spotlight participant " + Utilities.toMri(participant.identifier) +  "is OFF")
        }
    }
}

Get all spotlighted participants:

To get information about all participants that have spotlight state on current call, you can use the following API. The returned array is sorted by the order the participants were spotlighted.

spotlightCallFeature.spotlightedParticipants.forEach { participant in
    print("Spotlight active for participant: " + Utilities.toMri(participant.identifier))
}

Get the maximum supported spotlight:

The following API can be used to get the maximum number of participants that can be spotlighted using the Calling SDK

spotlightCallFeature.maxSupported();

Set up your system

Create the Visual Studio project

For a UWP app, in Visual Studio 2022, create a new Blank App (Universal Windows) project. After you enter the project name, feel free to choose any Windows SDK later than 10.0.17763.0.

For a WinUI 3 app, create a new project with the Blank App, Packaged (WinUI 3 in Desktop) template to set up a single-page WinUI 3 app. Windows App SDK version 1.3 or later is required.

Install the package and dependencies by using NuGet Package Manager

The Calling SDK APIs and libraries are publicly available via a NuGet package.

The following steps exemplify how to find, download, and install the Calling SDK NuGet package:

  1. Open NuGet Package Manager by selecting Tools > NuGet Package Manager > Manage NuGet Packages for Solution.
  2. Select Browse, and then enter Azure.Communication.Calling.WindowsClient in the search box.
  3. Make sure that the Include prerelease check box is selected.
  4. Select the Azure.Communication.Calling.WindowsClient package, and then select Azure.Communication.Calling.WindowsClient 1.4.0-beta.1 or a newer version.
  5. Select the checkbox that corresponds to the Communication Services project on the right-side tab.
  6. Select the Install button.

Communication Services or Microsoft 365 users can call the spotlight APIs based on role type and conversation type

In a one to one call or group call scenario, the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
StartSpotlightAsync ✔️ ✔️ ✔️
StopSpotlightAsync ✔️ ✔️ ✔️
StopAllSpotlightAsync ✔️ ✔️ ✔️
SpotlightedParticipants ✔️ ✔️ ✔️
MaxSupported ✔️ ✔️ ✔️

For meeting scenario the following APIs are supported for both Communication Services and Microsoft 365 users

APIs Organizer Presenter Attendee
StartSpotlightAsync ✔️ ✔️
StopSpotlightAsync ✔️ ✔️ ✔️
StopAllSpotlightAsync ✔️ ✔️
SpotlightedParticipants ✔️ ✔️ ✔️
MaxSupported ✔️ ✔️ ✔️

Spotlight is an extended feature of the core Call API. You first need to import calling Features from the Calling SDK:

using Azure.Communication.Calling.WindowsClient;

Then you can get the feature API object from the call instance:

private SpotlightCallFeature spotlightCallFeature;
spotlightCallFeature = call.Features.Spotlight;

Start spotlight for participants:

Any participant in the call or meeting can be pinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can start spotlight for other participants. This action is idempotent, trying to start spotlight on a pinned participant does nothing

To use this feature, a list of participants identifiers is required

List<CallIdentifier> spotlightIdentifiers= new List<CallIdentifier>();
spotlightIdentifiers.Add("USER_ID");
spotlightIdentifiers.Add("USER_ID");
spotlightCallFeature.StartSpotlightAsync(spotlightIdentifiers);

Remove spotlight from participants

Any pinned participant in the call or meeting can be unpinned. Only Microsoft 365 users who have an organizer, co-organizer or presenter role can unpin other participants. This action is idempotent, trying to stop spotlight on an unpinned participant does nothing

To use this feature, a list of participants identifiers is required

List<CallIdentifier> spotlightIdentifiers= new List<CallIdentifier>();
spotlightIdentifiers.Add("USER_ID");
spotlightIdentifiers.Add("USER_ID");
spotlightCallFeature.StopSpotlightAsync(spotlightIdentifiers);

Remove all spotlights

All pinned participants can be unpinned using this API. Only MicrosoftTeamsUserIdentifier users who have an organizer, co-organizer or presenter role can unpin all participants.

spotlightCallFeature.StopAllSpotlightAsync();

Handle changed states

The Spotlight API allows you to subscribe to SpotlightChanged events. A SpotlightChanged event comes from a call instance and contains information about newly spotlighted participants and participants whose spotlight were stopped

// event : { added: SpotlightedParticipant[]; removed: SpotlightedParticipant[] }
// SpotlightedParticipant = { identifier: CommunicationIdentifier }
// where: 
//  identifier: ID of participant whos spotlight state is changed
private void OnSpotlightChange(object sender, SpotlightChangedEventArgs args)
{
    foreach (SpotlightedParticipant rh in args.added)
    {
        Trace.WriteLine("Added ===========> " + rh.Identifier.RawId);
    }
    foreach (SpotlightedParticipant rh in args.removed)
    {
        Trace.WriteLine("Removed =========> " + rh.Identifier.RawId);
    }
}
spotlightCallFeature.SpotlightChanged += OnSpotlightChange;

Get all spotlighted participants:

To get information about all participants that have spotlight state on current call, you can use the following API. The returned array is sorted by the order the participants were spotlighted.

List<SpotlightedParticipant> currentSpotlightedParticipants = spotlightCallFeature.SpotlightedParticipants();
foreach (SpotlightedParticipant participant in currentSpotlightedParticipants)
{
    Trace.WriteLine("Participant " + participant.Identifier.RawId + " has spotlight");
}

Get the maximum supported spotlight:

The following API can be used to get the maximum number of participants that can be spotlighted using the Calling SDK

spotlightCallFeature.MaxSupported();

Next steps