Partager via

Ajout d’effets visuels à un appel vidéo

Important

Cette fonctionnalité d’Azure Communication Services est actuellement en préversion. Les fonctionnalités en préversion sont disponibles publiquement et peuvent être utilisées par tous les clients Microsoft nouveaux et existants.

Cette préversion est fournie sans contrat de niveau de service et n’est pas recommandée pour les charges de travail de production. Certaines fonctionnalités peuvent ne pas être prises en charge ou les fonctionnalités peuvent être limitées.

Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Important

Les effets vidéo d'appel sont disponibles à partir de la version bêta publique 1.10.0-beta.1 du Kit de développement logiciel (SDK) d'appel. Assurez-vous d’utiliser la version 1.10.0-beta.1 ou un sdk plus récent pour les effets vidéo.

Remarque

  • Cette API est fournie en tant que préversion pour les développeurs et peut être modifiée en fonction des commentaires que nous recevons.
  • Cette bibliothèque ne peut pas être utilisée autonome. Il fonctionne uniquement lorsqu’il est utilisé avec la bibliothèque cliente Azure Communication Calling pour WebJS (https://www.npmjs.com/package/@azure/communication-calling).
  • Actuellement, la création d’effets d’arrière-plan vidéo est uniquement prise en charge sur Chrome et le Navigateur Microsoft Edge Desktop (Windows et Mac) et Mac Safari Desktop.

Le Kit de développement logiciel (SDK) Azure Communication Calling vous permet de créer des effets vidéo visibles par d’autres utilisateurs lors d’un appel. Par exemple, pour un participant utilisant le SDK WebJS pour les appels d’Azure Communication Services, vous pouvez permettre à l'utilisateur d'activer le flou d’arrière-plan. Avec le flou d’arrière-plan activé, un utilisateur peut se sentir plus à l’aise sur un appel vidéo sachant que l’arrière-plan est flou.

Conditions préalables

Installer le kit SDK d’appel Azure Communication Services

Exemple utilisant Azure CLI pour créer et gérer des jetons d’accès :

az communication identity token issue --scope voip --connection-string "yourConnectionString"

Pour plus d’informations, consultez Utiliser Azure CLI pour créer et gérer des jetons d’accès.

Installer le SDK pour les effets d’appel

Utilisez la npm install commande pour installer le Kit de développement logiciel (SDK) Azure Communication Calling Effects pour JavaScript.

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

Pour plus d’informations sur les effets de communication liés aux appels, consultez la page du package npm.

Effets vidéo pris en charge

Actuellement, les effets vidéo prennent en charge la capacité suivante :

  • Flou d’arrière-plan.
  • Remplacez l’arrière-plan par une image personnalisée.

Modèle de classe

Nom Descriptif
BackgroundBlurEffect Classe d’effet flou d’arrière-plan.
BackgroundReplacementEffect Remplacement d’arrière-plan par la classe d’effet d’image.

Pour utiliser des effets vidéo avec la bibliothèque cliente Azure Communication Calling, créez un LocalVideoStream, puis obtenez la VideoEffects fonctionnalité à partir de l’instance LocalVideoStream.

Exemples de code

import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 
import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects'; 

// Ensure you have initialized the Azure Communication Calling client library and have created a LocalVideoStream 

// Get the video effects feature api on the LocalVideoStream 
const videoEffectsFeatureApi = localVideoStream.feature(AzureCommunicationCallingSDK.Features.VideoEffects); 

// Subscribe to useful events 
videoEffectsFeatureApi.on(‘effectsStarted’, () => { 
    // Effects started 
});
 
videoEffectsFeatureApi.on(‘effectsStopped’, () => { 
    // Effects stopped
});

videoEffectsFeatureApi.on(‘effectsError’, (error) => { 
    // Effects error 
}); 

// Create the effect instance 
const backgroundBlurEffect = new BackgroundBlurEffect(); 

// Recommended: Check if backgroundBlur is supported
const backgroundBlurSupported = await backgroundBlurEffect.isSupported(); 

if (backgroundBlurSupported) { 
    // Use the video effects feature api we created to start/stop effects 
    await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
} 
 
/** 
To create a background replacement with a custom image you need to provide the URL of the image you want as the background to this effect. The 'startEffects' method will fail if the URL is not of an image or is unreachable/unreadable. 

Supported image formats are – png, jpg, jpeg, tiff, bmp. 
*/ 

const backgroundImage = 'https://linkToImageFile'; 

// Create the effect instance 
const backgroundReplacementEffect = new BackgroundReplacementEffect({ 
    backgroundImageUrl: backgroundImage 
}); 

// Recommended: Check if background replacement is supported:
const backgroundReplacementSupported = await backgroundReplacementEffect.isSupported(); 

if (backgroundReplacementSupported) { 
    // Use the video effects feature api as before to start/stop effects 
    await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 
} 

//You can change the image used for this effect by passing it in the a new configure method: 
const newBackgroundImage = 'https://linkToNewImageFile';
await backgroundReplacementEffect.configure({ 
    backgroundImageUrl: newBackgroundImage 
}); 

//You can switch the effects using the same method on the video effects feature api: 

// Switch to background blur 
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 

// Switch to background replacement 
await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 

//To stop effects: 
await videoEffectsFeatureApi.stopEffects();