Partager via

Ajout d’effets visuels à un appel vidéo

  • Article

Important

Les fonctionnalités décrites dans cet article sont actuellement en préversion publique. 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 être limitées ou non prises en charge. 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 préversion publique 1.10.0-beta.1 du SDK d’appel. Veillez à utiliser ce SDK ou un SDK plus récent lors de l’utilisation d’effets vidéo.

Notes

Cette API est fournie en tant que préversion (« bêta ») aux développeurs et peut changer en fonction des commentaires que nous recevons.

Remarque

Cette bibliothèque ne peut pas être utilisée autonome et ne peut fonctionner qu’avec la bibliothèque cliente Azure Communication Calling pour WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Remarque

Actuellement, la prise en charge du navigateur pour la création d’effets d’arrière-plan vidéo est uniquement prise en charge sur les navigateurs de bureau Chrome et Edge (Windows et Mac) et la version de bureau de Safari sur Mac.

Le Kit de développement logiciel (SDK) Azure Communication Calling vous permet de créer des effets vidéo que d’autres utilisateurs sur un appel peuvent voir. Par exemple, pour un utilisateur qui appelle Azure Communication Services à l’aide du Kit de développement logiciel (SDK) WebJS, vous pouvez désormais activer l’activation du flou d’arrière-plan. Lorsque le flou d'arrière-plan est activé, l'utilisateur peut se sentir plus à l'aise lors d'un appel vidéo, car la vidéo de sortie ne montre que l'utilisateur et tout le reste du contenu est flou.

Prérequis

Installer le Kit de développement logiciel (SDK) d’appel Azure Communication Services

Exemple utilisant Azure CLI pour

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

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

Installer le Kit de développement logiciel (SDK) Effets d’appel

Utilisez « la commande npm install » 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 appelants, consultez la page package npm.

Effets vidéo pris en charge :

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

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

Modèle de classe :

Nom Description
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 de client Azure Communication Calling, une fois que vous avez créé un LocalVideoStream, vous devez obtenir l’API de fonctionnalité VideoEffects à partir de 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();