Démarrage rapide - Ajouter des effets vidéo à vos appels vidéo - An Azure Communication Services quickstart

Vous pouvez utiliser la fonctionnalité Effets vidéo pour ajouter des effets à votre vidéo dans les appels vidéo. Cette fonctionnalité permet aux développeurs de créer des effets visuels d’arrière-plan et de remplacer la vidéo d’arrière-plan dans l’expérience d’appel. Le flou en arrière-plan fournit aux utilisateurs le mécanisme permettant d’éliminer les distractions derrière un participant afin que les participants puissent communiquer sans activité perturbatrice ou informations confidentielles en arrière-plan. Cela est particulièrement utile dans le contexte de la télémédecine, où un fournisseur ou un patient peut vouloir masquer son environnement pour protéger des informations sensibles ou des informations d’identification personnelle. Le flou d’arrière-plan peut être appliqué dans tous les scénarios de rendez-vous virtuels, y compris la banque en ligne et les audiences virtuelles, pour protéger la confidentialité des utilisateurs. En plus d’améliorer la confidentialité, le flou d’arrière-plan permet une plus grande créativité d’expression, ce qui permet aux utilisateurs de charger des arrière-plans personnalisés pour héberger une expérience d’appel plus amusante et personnalisée.

Notes

La bibliothèque d’effets d’appel ne peut pas être utilisée de manière autonome et ne peut fonctionner qu’avec la bibliothèque de client Azure Communication Calling pour WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Utilisation des effets vidéo

Installer le package

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

Important

Ce guide de démarrage rapide utilise une version 1.13.1 (ou supérieure) du kit de développement logiciel (SDK) de l’appel Azure Communication Services et une version supérieure ou égale à 1.0.1 du kit de développement logiciel (SDK) l’appel d’effets Azure Communication Services.

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

Consultez ceci pour plus d’informations sur la page du package npm des effets de communication d’appel.

Notes

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.

Notes

Actuellement, deux effets vidéo sont disponibles :

Flou d’arrière-plan
Remplacement de l’arrière-plan par une image (les proportions doivent être de 16:9 pour être compatibles)

Pour utiliser des effets vidéo avec le SDK Azure Communication Calling, une fois que vous avez créé un LocalVideoStream, vous devez obtenir l’API de fonctionnalité VideoEffects du LocalVideoStream pour démarrer/arrêter les effets vidéo :

import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 

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

// Get the video effects feature api on the LocalVideoStream 
// (here, localVideoStream is the LocalVideoStream object you created while setting up video calling)
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
});

Flou d’arrière-plan

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

// Recommended: Check support by using the isSupported method on the feature API
const backgroundBlurSupported = await videoEffectsFeatureApi.isSupported(backgroundBlurEffect);

if (backgroundBlurSupported) { 
    // Use the video effects feature api we created to start effects
    await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
}

Remplacement de l’arrière-plan par une image

Vous devez fournir l’URL de l’image souhaitée comme arrière-plan pour cet effet.

Important

La méthode startEffects échoue si l’URL n’est pas d’une image ou est inaccessible/illisible.

Notes

Les formats d’image actuellement pris en charge sont : png, jpg, jpeg, tiff, bmp.

Les proportions prises en charge actuelles sont de 16:9.

const backgroundImage = 'https://linkToImageFile'; 

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

// Recommended: Check support by using the isSupported method on the feature API
const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);

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

Vous pouvez modifier l’image pour cet effet en la transmettant via la méthode configure :

const newBackgroundImage = 'https://linkToNewImageFile'; 

await backgroundReplacementEffect.configure({ 
    backgroundImageUrl: newBackgroundImage
});

La commutation des effets peut être effectuée à l’aide de la même méthode sur l’API de fonctionnalité d’effets vidéo :

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

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

À tout moment, si vous souhaitez vérifier quels effets sont actifs, vous pouvez utiliser la propriété activeEffects. La propriété activeEffects retourne un tableau avec les noms des effets actifs actuels et un tableau vide s’il n’y a aucun effet actif.

// Using the video effects feature api
const currentActiveEffects = videoEffectsFeatureApi.activeEffects;

Pour arrêter les effets :

await videoEffectsFeatureApi.stopEffects();

Notes

Pour utiliser des effets vidéo sur le SDK Appel, un modèle Machine Learning est téléchargé sur l’appareil du client. Nous vous encourageons à consulter les notes de confidentialité dans votre application et à les mettre à jour en conséquence, si nécessaire.

Vous pouvez utiliser la fonctionnalité Effets vidéo pour ajouter des effets à votre vidéo dans les appels vidéo. Le flou en arrière-plan fournit aux utilisateurs le mécanisme permettant d’éliminer les distractions derrière un participant afin que les participants puissent communiquer sans activité perturbatrice ou informations confidentielles en arrière-plan. Cette fonctionnalité est particulièrement utile dans le contexte de la télémédecine, où un fournisseur ou un patient peut vouloir masquer son environnement pour protéger des informations sensibles ou des données personnelles. Le flou d’arrière-plan peut être appliqué dans tous les scénarios de rendez-vous virtuels, y compris la banque en ligne et les audiences virtuelles, pour protéger la confidentialité des utilisateurs.

Utilisation des effets vidéo

Notes

La prise en charge des effets vidéo sur iOS est limitée aux deux versions majeures les plus récentes d’iOS. Par exemple, lorsqu’une nouvelle version majeure d’iOS est publiée, l’exigence iOS est la nouvelle version et les versions les plus récentes qui l’ont précédée.

Il existe actuellement un effet vidéo disponible : Flou d’arrière-plan.

L’objet LocalVideoEffectsFeature a la structure d’API suivante :

enable : active un effet vidéo sur l’instance LocalVideoStream.
disable : désactive un effet vidéo sur l’instance LocalVideoStream.
isSupported : indique si un effet vidéo est pris en charge sur l’instance LocalVideoStream.
onVideoEffectEnabled : événement déclenché lorsqu’un effet vidéo a été activé avec succès.
onVideoEffectDisabled : événement déclenché lorsqu’un effet vidéo a été désactivé avec succès.
onVideoEffectError : événement déclenché lorsqu’une opération d’effet vidéo échoue.

Une fois que vous avez l’objet LocalVideoEffectsFeature, vous pouvez vous abonner aux événements. Les événements ont les délégués suivants : didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

Pour utiliser des effets vidéo avec le SDK Azure Communication Calling, une fois que vous avez créé un LocalVideoStream, vous devez obtenir l’API de fonctionnalité VideoEffects du LocalVideoStream pour activer/désactiver les effets vidéo :

// Obtain the Video Effects feature from the LocalVideoStream object that is sending the video.
@State var localVideoEffectsFeature: LocalVideoEffectsFeature?
localVideoEffectsFeature = self.localVideoStreams.first.feature(Features.localVideoEffects)

// Subscribe to the events
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didEnableVideoEffect args: VideoEffectEnabledEventArgs) {
        os_log("Video Effect Enabled, VideoEffectName: %s", log:log, args.videoEffectName)
    }
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didDisableVideoEffect args: VideoEffectDisabledEventArgs) {
    os_log("Video Effect Disabled, VideoEffectName: %s", log:log, args.videoEffectName)
}
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didReceiveVideoEffectError args: VideoEffectErrorEventArgs) {
    os_log("Video Effect Error, VideoEffectName: %s, Code: %s, Message: %s", log:log, args.videoEffectName, args.code, args.message)
}

et commencez à utiliser les API pour activer et désactiver les effets vidéo :

localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Flou d’arrière-plan

Le flou d’arrière-plan est un effet vidéo qui permet de flouter l’arrière-plan d’une personne. Pour utiliser l’effet vidéo d’arrière-plan, vous devez obtenir une LocalVideoEffectsFeature fonctionnalité à partir d’un valide LocalVideoStream.

Créez un objet Effet vidéo de flou d’arrière-plan :

@State var backgroundBlurVideoEffect: BackgroundBlurEffect?

Vérifiez si BackgroundBlurEffect est pris en charge et appelez Enable pour l’objet videoEffectsFeature :

if((localVideoEffectsFeature.isSupported(effect: backgroundBlurVideoEffect)) != nil)
{
    localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
}

Pour désactiver l’effet vidéo de flou d’arrière-plan :

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Notes

Pour utiliser des effets vidéo sur le SDK Android Calling, un modèle Machine Learning est téléchargé sur l’appareil du client. Nous vous encourageons à consulter les notes de confidentialité dans votre application et à les mettre à jour en conséquence, si nécessaire.

Vous pouvez utiliser la fonctionnalité Effets vidéo pour ajouter des effets à votre vidéo dans les appels vidéo. Le flou en arrière-plan fournit aux utilisateurs le mécanisme permettant d’éliminer les distractions derrière un participant afin que les participants puissent communiquer sans activité perturbatrice ou informations confidentielles en arrière-plan. Cette fonctionnalité est particulièrement utile dans le contexte de la télémédecine, où un fournisseur ou un patient peut vouloir masquer son environnement pour protéger des informations sensibles ou des données personnelles. Le flou d’arrière-plan peut être appliqué dans tous les scénarios de rendez-vous virtuels, y compris la banque en ligne et les audiences virtuelles, pour protéger la confidentialité des utilisateurs.

Ce démarrage rapide s’appuie sur le guide Démarrage rapide : Ajouter l’appel vidéo 1 à 1 à votre application pour Android.

Utilisation des effets vidéo

Notes

La prise en charge des effets vidéo sur Android est limitée aux quatre dernières versions majeures d’Android. Par exemple, lorsqu’une nouvelle version majeure d’Android est publiée, l’exigence Android est la nouvelle version et les trois versions les plus récentes qui la précèdent.

Il existe actuellement un effet vidéo disponible : Flou d’arrière-plan.

L’objet VideoEffectsLocalVideoStreamFeature a la structure d’API suivante :

enableEffect : active un effet vidéo sur l’instance LocalVideoStream.
disableEffect : désactive un effet vidéo sur l’instance LocalVideoStream.
OnVideoEffectEnabledListener : événement déclenché lorsqu’un effet vidéo a été activé avec succès.
OnVideoEffectDisabledListener : événement déclenché lorsqu’un effet vidéo a été désactivé avec succès.
OnVideoEffectErrorListener : événement déclenché lorsqu’une opération d’effet vidéo échoue.

Les objets VideoEffectEnabledEvent, VideoEffectDisabledEvent et VideoEffectErrorEvent ont la structure d’API suivante :

getVideoEffectName : obtient le nom de l’effet vidéo qui a déclenché l’événement.

Une fois que vous disposez de l’objet VideoEffectsLocalVideoStreamFeature, vous pouvez vous abonner aux événements :

Pour utiliser des effets vidéo avec le SDK Azure Communication Calling, une fois que vous avez créé un LocalVideoStream, vous devez obtenir l’API de fonctionnalité VideoEffects du LocalVideoStream pour activer/désactiver les effets vidéo :

// Obtain the Video Effects feature from the LocalVideoStream object that is sending the video.
VideoEffectsLocalVideoStreamFeature videoEffectsFeature = currentVideoStream.feature(Features.LOCAL_VIDEO_EFFECTS);

// Create event handlers for the events
private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
}
 
// Subscribe to the events
videoEffectsFeature.addOnVideoEffectEnabledListener(this::handleOnVideoEffectEnabled);
videoEffectsFeature.addOnVideoEffectDisabledListener(this::handleOnVideoEffectDisabled);
videoEffectsFeature.addOnVideoEffectErrorListener(this::handleOnVideoEffectError);

et commencez à utiliser les API pour activer et désactiver les effets vidéo :

videoEffectsFeature.enableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );
videoEffectsFeature.disableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );

Flou d’arrière-plan

Le flou d’arrière-plan est un effet vidéo qui permet de flouter l’arrière-plan d’une personne. Pour utiliser l’effet vidéo d’arrière-plan, vous devez obtenir une VideoEffectsLocalVideoStreamFeature fonctionnalité à partir d’un valide LocalVideoStream.

Pour activer l’effet vidéo de flou d’arrière-plan :

Créez une méthode qui obtient la fonctionnalité VideoEFfects s’abonne aux événements :

private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
   Log.i("VideoEfects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEfects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEfects", "Error " + args.getCode() + ":" + args.getMessage()
           + " for effect " + args.getVideoEffectName());
}

VideoEffectsLocalVideoStreamFeature videoEffectsFeature;
public void createVideoEffectsFeature() {
    videoEffectsFeature = currentVideoStream.feature(Features.LOCAL_VIDEO_EFFECTS);
    videoEffectsFeature.addOnVideoEffectEnabledListener(this::handleOnVideoEffectEnabled);
    videoEffectsFeature.addOnVideoEffectDisabledListener(this::handleOnVideoEffectDisabled);
    videoEffectsFeature.addOnVideoEffectErrorListener(this::handleOnVideoEffectError);
}

Créez un objet Effet vidéo de flou d’arrière-plan :

BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();

Appelez EnableEffect sur l’objet videoEffectsFeature :

public void enableBackgroundBlur() {
    videoEffectsFeature.enableEffect(backgroundBlurEffect);
}

Pour désactiver l’effet vidéo de flou d’arrière-plan :

public void disableBackgroundBlur() {
    videoEffectsFeature.disableEffect(backgroundBlurEffect);
}

Notes

Pour utiliser des effets vidéo sur le kit de développement logiciel (SDK) Appel Windows, un modèle Machine Learning est téléchargé sur l’appareil du client. Nous vous encourageons à consulter les notes de confidentialité dans votre application et à les mettre à jour en conséquence, si nécessaire.

Vous pouvez utiliser la fonctionnalité Effets vidéo pour ajouter des effets à votre vidéo dans les appels vidéo. Le flou en arrière-plan fournit aux utilisateurs le mécanisme permettant d’éliminer les distractions derrière un participant afin que les participants puissent communiquer sans activité perturbatrice ou informations confidentielles en arrière-plan. Cette fonctionnalité est particulièrement utile dans le contexte de la télémédecine, où un fournisseur ou un patient peut vouloir masquer son environnement pour protéger des informations sensibles ou des données personnelles. Le flou d’arrière-plan peut être appliqué dans tous les scénarios de rendez-vous virtuels, y compris la banque en ligne et les audiences virtuelles, pour protéger la confidentialité des utilisateurs.

Ce démarrage rapide s’appuie sur le guide Démarrage rapide : Ajouter l’appel vidéo 1 à 1 à votre application pour Windows.

Utilisation des effets vidéo

Il existe actuellement un effet vidéo disponible : Flou d’arrière-plan.

L’objet VideoEffectsLocalVideoStreamFeature a la structure d’API suivante :

EnableEffect : active un effet vidéo sur l’instance LocalVideoStream.
DisableEffect : désactive un effet vidéo sur l’instance LocalVideoStream.
VideoEffectEnabled : événement déclenché lorsqu’un effet vidéo a été activé avec succès.
VideoEffectDisabledListener : événement déclenché lorsqu’un effet vidéo a été désactivé avec succès.
VideoEffectErrorListener : événement déclenché lorsqu’une opération d’effet vidéo échoue.

Les objets VideoEffectEnabledEvent, VideoEffectDisabledEvent et VideoEffectErrorEvent ont la structure d’API suivante :

VideoEffectName : obtient le nom de l’effet vidéo qui a déclenché l’événement.

Une fois que vous disposez de l’objet VideoEffectsLocalVideoStreamFeature, vous pouvez vous abonner aux événements :

Pour utiliser des effets vidéo avec le kit de développement logiciel (SDK) Azure Communication Calling, ajoutez les variables à MainPage.

public sealed partial class MainPage : Page
{
    private LocalVideoEffectsFeature localVideoEffectsFeature;
}

Une fois un LocalVideoStream créé, vous devez obtenir l’API de fonctionnalité VideoEffects de LocalVideoStream afin d’activer/désactiver les Effets vidéo.

private async void CameraList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedCamerea = CameraList.SelectedItem as VideoDeviceDetails;
    cameraStream = new LocalOutgoingVideoStream(selectedCamerea);
    InitVideoEffectsFeature(cameraStream);
    
    var localUri = await cameraStream.StartPreviewAsync();
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        LocalVideo.Source = MediaSource.CreateFromUri(localUri);
    });
}

public void InitVideoEffectsFeature(LocalOutgoingVideoStream videoStream){
    localVideoEffectsFeature = videoStream.Features.VideoEffects;
    localVideoEffectsFeature.VideoEffectEnabled += LocalVideoEffectsFeature_VideoEffectEnabled;
    localVideoEffectsFeature.VideoEffectDisabled += LocalVideoEffectsFeature_VideoEffectDisabled;
    localVideoEffectsFeature.VideoEffectError += LocalVideoEffectsFeature_VideoEffectError;
}

// Create event handlers for the events
private void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs args)
{
}

private void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs args)
{
}

private void LocalVideoEffectsFeature_VideoEffectError(object sender, VideoEffectErrorEventArgs args)
{
}
 
// Subscribe to the events
videoEffectsFeature.VideoEffectEnabled += VideoEffectsFeature_OnVideoEffectEnabled;
videoEffectsFeature.VideoEffectDisabled += VideoEffectsFeature_OnVideoEffectDisabled;
videoEffectsFeature.VideoEffectError += VideoEffectsFeature_OnVideoEffectError;

et commencez à utiliser les API pour activer et désactiver les effets vidéo :

videoEffectsLocalVideoStreamFeature.EnableEffect( {{VIDEO_EFFECT_TO_ENABLE}} );
videoEffectsLocalVideoStreamFeature.DisableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );

Flou d’arrière-plan

Le flou d’arrière-plan est un effet vidéo qui permet de flouter l’arrière-plan d’une personne. Pour utiliser l’effet vidéo d’arrière-plan, vous devez obtenir une VideoEffectsLocalVideoStreamFeature fonctionnalité à partir d’un valide LocalVideoStream.

Pour activer l’effet vidéo de flou d’arrière-plan :

Ajoutez l’instance BackgroundBlurEffect à MainPage.

public sealed partial class MainPage : Page
{
    private BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
}

Créez une méthode qui obtient la fonctionnalité VideoEFfects s’abonne aux événements :

private async void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundBlur.IsChecked = true;
    });
}

private async void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundBlur.IsChecked = false;
    });
}

private void LocalVideoEffectsFeature_VideoEffectError(object sender, VideoEffectErrorEventArgs e)
{
    String effectName = args.VideoEffectName;
    String errorCode = args.Code;
    String errorMessage = args.Message;

    Trace.WriteLine("VideoEffects VideoEffectError on effect " + effectName + "with code "
        + errorCode + "and error message " + errorMessage);
}

Activer et désactiver l’effet de flou de l’arrière-plan :

private async void BackgroundBlur_Click(object sender, RoutedEventArgs e)
{
    if (localVideoEffectsFeature.IsEffectSupported(backgroundBlurVideoEffect))
    {
        var backgroundBlurCheckbox = sender as CheckBox;
        if (backgroundBlurCheckbox.IsChecked.Value)
        {
            localVideoEffectsFeature.EnableEffect(backgroundBlurVideoEffect);
        }
        else
        {
            localVideoEffectsFeature.DisableEffect(backgroundBlurVideoEffect);
        }
    }
}

Démarrage rapide : Ajouter des effets vidéo à vos appels vidéo

Utilisation des effets vidéo

Installer le package

Flou d’arrière-plan

Remplacement de l’arrière-plan par une image

Utilisation des effets vidéo

Flou d’arrière-plan

Utilisation des effets vidéo

Flou d’arrière-plan

Utilisation des effets vidéo

Flou d’arrière-plan

Étapes suivantes

Ressources supplémentaires