Inicio rápido: Adición de efectos de vídeo a videollamadas

Artículo
08/21/2023

La característica Efectos de vídeo se puede usar para agregar efectos al vídeo en videollamadas. Permite a los desarrolladores crear efectos visuales de fondo y sustituir el vídeo en segundo plano en las llamadas. El desenfoque del fondo proporciona a los usuarios un mecanismo para eliminar las distracciones que pueda haber detrás de un participante para que los participantes puedan comunicarse sin actividad molesta ni información confidencial en segundo plano. Esto es especialmente útil en el contexto de la telemedicina, donde un proveedor o un paciente podría querer ocultar su entorno para proteger información confidencial o información de identificación personal. El desenfoque del fondo se puede aplicar en todos los escenarios de citas virtuales, incluidas la banca telefónica y las audiencias virtuales, para proteger la privacidad del usuario. Además de aumentar la confidencialidad, el desenfoque del fondo mejora la creatividad de expresión, ya que permite a los usuarios cargar fondos personalizados para que las llamadas sean más divertidas y personalizadas.

Nota:

La biblioteca de efectos para llamadas no se puede usar de forma independiente y solo puede funcionar cuando se usa con la biblioteca cliente de llamadas de Azure Communication para WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Uso de efectos de vídeo

Instalar el paquete

Use el comando npm install para instalar el SDK de efectos de Azure Communication Services para JavaScript.

Importante

En este inicio rápido se usa la versión 1.13.1 (o superior) del SDK de llamada de Azure Communication Services y la versión del SDK de Efectos de llamada de Azure Communication Services mayor o igual que 1.0.1.

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

Para más información, consulte aquí sobre la página del paquete npm de efectos de comunicación en las llamadas.

Nota:

Actualmente, la compatibilidad del explorador para crear efectos de vídeo en segundo plano solo se admite en los exploradores de escritorio Chrome y Edge (Windows y Mac) y Mac Safari Desktop.

Nota:

Actualmente hay dos efectos de vídeo disponibles:

Desenfoque de fondo
Reemplazo de fondo con una imagen (la relación de aspecto debe ser 16:9 para ser compatible)

Para usar efectos de vídeo con el SDK de llamadas de Azure Communication, una vez creado un LocalVideoStream, debe obtener la API de la característica VideoEffects de LocalVideoStream para iniciar o detener los efectos de vídeo:

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
});

Desenfoque de fondo

// 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); 
}

Reemplazo de fondo con una imagen

Debe proporcionar la dirección URL de la imagen que desea como fondo para este efecto.

Importante

El método startEffects no funcionará si la dirección URL no es de una imagen o no se puede acceder a ella o leerla.

Nota:

Los formatos de imagen compatibles actualmente son: png, jpg, jpeg, tiff, bmp.

La relación de aspecto admitida actualmente es 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); 
}

Para cambiar la imagen de este efecto, es preciso usar el método configure:

const newBackgroundImage = 'https://linkToNewImageFile'; 

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

El cambio de efectos de conmutación se puede realizar mediante el mismo método en la API de características efectos de vídeo:

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

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

En cualquier momento si desea comprobar qué efectos están activos, puede usar la propiedad activeEffects. La propiedad activeEffects devuelve una matriz con los nombres de los efectos activos actuales y devuelve una matriz vacía si no hay ningún efecto activo.

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

Para detener los efectos:

await videoEffectsFeatureApi.stopEffects();

Nota:

Para usar efectos de vídeo en el SDK de llamadas de iOS, se descarga un modelo de aprendizaje automático en el dispositivo del cliente. Le recomendamos que revise las notas de privacidad de su aplicación y las actualice en consecuencia, si es necesario.

La característica Efectos de vídeo se puede usar para agregar efectos al vídeo en videollamadas. El desenfoque del fondo proporciona a los usuarios un mecanismo para eliminar las distracciones que pueda haber detrás de un participante para que los participantes puedan comunicarse sin actividad molesta ni información confidencial en segundo plano. Esta característica es especialmente útil en el contexto de la telemedicina, donde un proveedor o un paciente podría querer ocultar su entorno para proteger información confidencial o datos personales. El desenfoque del fondo se puede aplicar en todos los escenarios de citas virtuales, incluidas la banca telefónica y las audiencias virtuales, para proteger la privacidad del usuario.

Uso de efectos de vídeo

Nota

La compatibilidad con efectos de vídeo en iOS se limita a las dos versiones principales más recientes de iOS. Por ejemplo, cuando se publica una nueva versión principal de iOS, el requisito de iOS consiste en la nueva versión y las versiones más recientes que la preceden.

Actualmente hay un efecto de vídeo disponible: desenfoque de fondo.

El objeto LocalVideoEffectsFeature tiene la siguiente estructura de API:

enable: habilita un efecto de vídeo en la instancia de LocalVideoStream.
disable: deshabilita un efecto de vídeo en la instancia de LocalVideoStream.
isSupported: indica si se admite un efecto de vídeo en la instancia LocalVideoStream.
onVideoEffectEnabled: evento que se desencadena cuando un efecto de vídeo se ha habilitado correctamente.
onVideoEffectDisabled: evento que se desencadena cuando un efecto de vídeo se ha deshabilitado correctamente.
onVideoEffectError: evento que se desencadena cuando se produce un error en una operación de efecto de vídeo.

Una vez que tenga el objeto LocalVideoEffectsFeature, puede suscribirse a los eventos. Estos tienen los siguientes delegados: didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

// 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)
}

y empezar a usar las API para habilitar y deshabilitar los efectos de vídeo:

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

Desenfoque de fondo

El desenfoque de fondo es un efecto de vídeo que permite desenfocar el fondo de una persona. Para usar efectos de vídeo en segundo plano, debe obtener una característica LocalVideoEffectsFeature de un LocalVideoStream válido.

Cree un nuevo objeto efecto de vídeo de desenfoque de fondo:

@State var backgroundBlurVideoEffect: BackgroundBlurEffect?

Compruebe si BackgroundBlurEffect se admite y llame a Enable en el objeto videoEffectsFeature:

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

Para deshabilitar el efecto de vídeo de desenfoque de fondo:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Nota:

Para usar efectos de vídeo en el SDK de llamadas de Android, se descarga un modelo de aprendizaje automático en el dispositivo del cliente. Le recomendamos que revise las notas de privacidad de su aplicación y las actualice en consecuencia, si es necesario.

Este inicio rápido se basa en Inicio rápido: Adición de llamadas de vídeo 1:1 a la aplicación para Android.

Uso de efectos de vídeo

Nota

La compatibilidad con efectos de vídeo en Android se limita a las cuatro últimas versiones principales de Android. Por ejemplo, cuando se publica una nueva versión principal de Android, el requisito de Android consiste en la nueva versión y las tres versiones más recientes que la preceden.

Actualmente hay un efecto de vídeo disponible: desenfoque de fondo.

El objeto VideoEffectsLocalVideoStreamFeature tiene la siguiente estructura de API:

enableEffect: habilita un efecto de vídeo en la instancia de LocalVideoStream.
disableEffect: deshabilita un efecto de vídeo en la instancia de LocalVideoStream.
OnVideoEffectEnabledListener: evento que se desencadena cuando un efecto de vídeo se ha habilitado correctamente.
OnVideoEffectDisabledListener: evento que se desencadena cuando un efecto de vídeo se ha deshabilitado correctamente.
OnVideoEffectErrorListener: evento que se desencadena cuando se produce un error en una operación de efecto de vídeo.

Los objetos VideoEffectEnabledEvent, VideoEffectDisabledEvent y VideoEffectErrorEvent tienen la siguiente estructura de API:

getVideoEffectName: obtiene el nombre del efecto de vídeo que desencadenó el evento.

Una vez que tenga el objeto VideoEffectsLocalVideoStreamFeature, puede suscribirse a los eventos:

// 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);

y empezar a usar las API para habilitar y deshabilitar los efectos de vídeo:

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

Desenfoque de fondo

El desenfoque de fondo es un efecto de vídeo que permite desenfocar el fondo de una persona. Para usar efectos de vídeo en segundo plano, debe obtener una característica VideoEffectsLocalVideoStreamFeature de un LocalVideoStream válido.

Para habilitar el efecto de vídeo de desenfoque de fondo:

Cree un método que obtenga la característica VideoEFfects se suscribe a los eventos:

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);
}

Cree un nuevo objeto efecto de vídeo de desenfoque de fondo:

BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();

Llame a EnableEffect en el objeto videoEffectsFeature:

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

Para deshabilitar el efecto de vídeo de desenfoque de fondo:

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

Nota

Para usar efectos de vídeo en el SDK de llamadas de Windows, se descarga un modelo de aprendizaje automático en el dispositivo del cliente. Le recomendamos que revise las notas de privacidad de su aplicación y las actualice en consecuencia, si es necesario.

Este inicio rápido se basa en el Inicio rápido: Adición de llamadas de vídeo 1:1 a la aplicación para Windows.

Uso de efectos de vídeo

Actualmente hay un efecto de vídeo disponible: desenfoque de fondo.

El objeto VideoEffectsLocalVideoStreamFeature tiene la siguiente estructura de API:

EnableEffect: habilita un efecto de vídeo en la instancia de LocalVideoStream.
DisableEffect: deshabilita un efecto de vídeo en la instancia de LocalVideoStream.
VideoEffectEnabled: evento que se desencadena cuando un efecto de vídeo se ha habilitado correctamente.
VideoEffectDisabledListener: evento que se desencadena cuando un efecto de vídeo se ha deshabilitado correctamente.
VideoEffectErrorListener: evento que se desencadena cuando se produce un error en una operación de efecto de vídeo.

Los objetos VideoEffectEnabledEvent, VideoEffectDisabledEvent y VideoEffectErrorEvent tienen la siguiente estructura de API:

VideoEffectName: obtiene el nombre del efecto de vídeo que desencadenó el evento.

Una vez que tenga el objeto VideoEffectsLocalVideoStreamFeature, puede suscribirse a los eventos:

Para usar efectos de vídeo con el SDK de llamadas de comunicación de Azure, agregue las variables a MainPage.

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

Una vez haya creado un LocalVideoStream, necesita obtener la API de la característica de VideoEffects del LocalVideoStream para activar/desactivar los efectos de vídeo.

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;

y empezar a usar las API para habilitar y deshabilitar los efectos de vídeo:

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

Desenfoque de fondo

Para habilitar el efecto de vídeo de desenfoque de fondo:

Agregue la instancia de BackgroundBlurEffect a MainPage.

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

Cree un método que obtenga la característica VideoEFfects se suscribe a los eventos:

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);
}

Habilite y deshabilite el efecto de desenfoque de fondo:

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);
        }
    }
}

Pasos siguientes

Para más información, consulte los siguientes artículos.

Consulte nuestro ejemplo de elementos principales de una llamada.
Introducción a la biblioteca de la interfaz de usuario
Más información sobre las Funcionalidades del SDK de llamadas
Más información sobre cómo funciona la llamada

Share via

Inicio rápido: Adición de efectos de vídeo a videollamadas

Uso de efectos de vídeo

Instalar el paquete

Desenfoque de fondo

Reemplazo de fondo con una imagen

Uso de efectos de vídeo

Desenfoque de fondo

Uso de efectos de vídeo

Desenfoque de fondo

Uso de efectos de vídeo

Desenfoque de fondo

Pasos siguientes

Recursos adicionales