Edit

Share via

Reactions

  • Article

This article describes how to implement reactions for Azure Communication Services Calling SDKs. This capability enables participants in a group call or meeting to send and receive reactions with participants in Azure Communication Services and Microsoft Teams.

The configuration and policy settings in Microsoft Teams control reactions for users in Teams meetings. For more information, see Manage reactions in Teams meetings and webinars and Meeting options in Microsoft Teams.

Prerequisites

Limits on reactions

The system pulls reactions by batches at regular intervals. Current batch limitation is 20,000 reactions pulled every 3 seconds.

If the number of reactions exceeds the limit, leftover reactions are sent in the next batch.

Support

The following tables define support for reactions in Azure Communication Services.

Teams meeting support is based on Teams policy.

Identities and call types

The following table shows support for reactions in different call and identity types.

Identities Teams interop meeting Room 1:1 call Group call Teams interop Group Call
Communication Services user ✔️ ✔️ ✔️ ✔️
Microsoft 365 user ✔️ ✔️ ✔️

Operations

The following table shows support for reactions in Calling SDK to individual identity types.

Operations Communication Services user Microsoft 365 user
Send specific reactions (like, love, laugh, applause, surprised) ✔️ ✔️
Receive specific reactions (like, love, laugh, applause, surprised) ✔️ ✔️

SDKs

The following table shows support for Together Mode feature in individual Azure Communication Services SDKs.

Platforms Web Web UI iOS iOS UI Android Android UI Windows
Is Supported ✔️ ✔️

Install the SDK

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

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

Initialize required objects

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

With the CallClient instance, you can create a CallAgent instance by calling the createCallAgent. 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.

JavaScript 
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()

How to best manage SDK connectivity to Microsoft infrastructure

The Call Agent instance helps you manage calls (to join or start calls). In order to work your calling SDK needs to connect to Microsoft infrastructure to get notifications of incoming calls and coordinate other call details. Your Call Agent has two possible states:

Connected - A Call Agent connectionStatue value of Connected means the client SDK is connected and capable of receiving notifications from Microsoft infrastructure.

Disconnected - A Call Agent connectionStatue value of Disconnected states there's an issue that is preventing the SDK it from properly connecting. Call Agent should be re-created.

  • invalidToken: If a token is expired or is invalid Call Agent instance disconnects with this error.
  • connectionIssue: If there's an issue with the client connecting to Microsoft infrascture, after many retries Call Agent exposes the connectionIssue error.

You can check if your local Call Agent is connected to Microsoft infrastructure by inspecting the current value of connectionState property. During an active call you can listen to the connectionStateChanged event to determine if Call Agent changes from Connected to Disconnected state.

JavaScript 
const connectionState = callAgentInstance.connectionState;
console.log(connectionState); // it may return either of 'Connected' | 'Disconnected'

const connectionStateCallback = (args) => {
    console.log(args); // it will return an object with oldState and newState, each of having a value of either of 'Connected' | 'Disconnected'
    // it will also return reason, either of 'invalidToken' | 'connectionIssue'
}
callAgentInstance.on('connectionStateChanged', connectionStateCallback);

Implement reactions for meeting participants

In Azure Communication Services participants can send and receive reactions during a group call:

  • Like
  • Love
  • Applause
  • Laugh
  • Surprise

To send a reaction, use the sendReaction(reactionMessage) API. To receive a reaction, the message builds with type ReactionMessage using Reaction enums as an attribute.

You need to subscribe to events that provide the subscriber event data:

JavaScript 
export interface ReactionEventPayload {
    /**
     * identifier for a participant
     */
    identifier: CommunicationUserIdentifier | MicrosoftTeamsUserIdentifier;
    /**
     * reaction type received
     */
    reactionMessage: ReactionMessage;
}

You can determine which reaction is coming from which participant using the identifier attribute and getting the reaction type from ReactionMessage.

Sample showing how to send a reaction in a meeting

JavaScript 
const reaction = call.feature(SDK.Features.Reaction);
const reactionMessage: SDK.ReactionMessage = {
       reactionType: 'like'
};
await reaction.sendReaction(reactionMessage);

Sample showing how to receive a reaction in a meeting

JavaScript 
const reaction = call.feature(SDK.Features.Reaction);
reaction.on('reaction', event => {
    // user identifier
    console.log("User Mri - " + event.identifier);
    // received reaction
    console.log("User Mri - " + event.reactionMessage.reactionType);
    // reaction message
    console.log("reaction message - " + JSON.stringify(event.reactionMessage));
}

Key points when using reactions

  • Reactions are supported for Microsoft Teams interoperability scenarios. Support is based on Teams policy.
  • Reactions are supported in the Web Calling SDK.
  • Reactions aren't currently supported in the Native SDKs.

Next steps