Compartir a través de

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

  • Artículo

La característica Efectos de vídeo permite a los usuarios incorporar efectos visuales en sus videollamadas, lo que proporciona a los desarrolladores la capacidad de integrar efectos visuales de fondo y reemplazo de vídeo de fondo en su experiencia de llamada. El desenfoque de fondo ofrece a los usuarios una manera de eliminar las distracciones detrás de ellos, lo que facilita la comunicación sin actividades perjudiciales o información confidencial que aparece en segundo plano. Esto es útil en contextos de teleasistencia sanitaria (telehealth), donde los proveedores o pacientes pueden querer ocultar sus alrededores para proteger la información confidencial o de identificación personal. El desenfoque en segundo plano se puede aplicar en varios escenarios de citas virtuales, como telebancos y audiencias virtuales, para mejorar la privacidad del usuario o ocultar una oficina desordenada. Además de mejorar la confidencialidad, el desenfoque en segundo plano permite una mayor expresión creativa al permitir a los usuarios cargar fondos personalizados para una experiencia de llamada más atractiva y personalizada.lows para mayor creatividad de expresión, lo que permite a los usuarios cargar fondos personalizados para hospedar una experiencia de llamada más divertida y personalizada.

Nota:

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

Uso de efectos de vídeo

Instalar el paquete

Importante

El desenfoque en segundo plano y el reemplazo de fondo para exploradores de escritorio web está en disponibilidad general. En este inicio rápido se usa la versión del SDK de llamadas de Azure Communication Services de 1.13.1 (o superior) y la versión del SDK de efectos de llamada de Azure Communication Services mayor o igual que 1.0.1. 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:

El desenfoque de fondo y el reemplazo de fondo para Android Chrome y Android Edge mobile browser está disponible en versión preliminar pública a partir de la compilación 1.29.1 y versiones posteriores del SDK de WebJS beta.

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

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

Para obtener más información, consulte aquí para obtener más información sobre la página de efectos de comunicación de llamada al paquete npm.

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 comunicación de Azure, una vez creado un LocalVideoStream, debe obtener la API de características VideoEffects de la LocalVideoStream para iniciar o detener 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 produce un error si la dirección URL no es de una imagen o no es accesible o no legible.

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

Los efectos de conmutación se pueden realizar mediante el mismo método en la API de características de 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();

Agregar un efecto de fondo de vidrio escarchado

Los fondos de vidrio escarchado combinan la privacidad de un fondo borroso con la personalización de la imagen seleccionada para producir un efecto sofisticado similar a las ventanas de vidrio escarchado. Para lograr este efecto, cargue una imagen PNG transparente como fondo personalizado. Esta imagen podría ser el logotipo de su empresa o un diseño único. El efecto de cristal escarcha desenfoque las áreas transparentes de la imagen, al tiempo que conserva el gráfico como parte del fondo. Para usar un aspecto de vidrio escarchado, debe usar la versión 1.1.3 o superior del paquete Biblioteca de efectos de llamada de comunicación Azure para JavaScript.

Para obtener los mejores resultados al preparar la imagen PNG escarchada, tenga en cuenta lo siguiente:

  • Resolución: Usar 1920x1080 píxeles para un fondo de alta calidad
  • Evitar la opacidad completa: el contenido en color, como los logotipos, se ve mejor con una pequeña transparencia. Se recomienda una opacidad del 75 %
  • Desenfoque la imagen: un desenfoque gaussiano de radio 2 funciona bien para simular un poco de profundidad de campo en la escena.
  • Galería de símbolos en primer plano de gris medio: para PNG de escala de grises con transparencia, se recomienda tener la imagen completa en gris medio (valor 128) para que el patrón de transparencia sea visible en fondos claros y oscuros.

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.

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 habilitar/deshabilitar los efectos de vídeo:

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

Reemplazo de fondo

El reemplazo de fondo es un efecto de vídeo que permite a una persona establecer su propio fondo personalizado. Para usar efectos de reemplazo de fondo, debe obtener una característica LocalVideoEffectsFeature de un LocalVideoStream válido.

  • Cree un nuevo objeto Efecto de vídeo de reemplazo de fondo:
@State var backgroundReplacementVideoEffect: BackgroundReplacementEffect?
  • Establezca un fondo personalizado pasando la imagen a través de un búfer.
let image = UIImage(named:"image.png")
guard let imageData = image?.jpegData(compressionQuality: 1.0) else {
return
}
backgroundReplacementVideoEffect.buffer = imageData
  • Compruebe si BackgroundReplacementEffect se admite y llame a Enable en el objeto videoEffectsFeature:
if((localVideoEffectsFeature.isSupported(effect: backgroundReplacementVideoEffect)) != nil)
{
    localVideoEffectsFeature.enable(effect: backgroundReplacementVideoEffect)
}

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

localVideoEffectsFeature.disable(effect: backgroundReplacementVideoEffect)

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.

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.

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:

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 habilitar/deshabilitar los efectos de vídeo:

// 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("VideoEffects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEffects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEffects", "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);
}

Reemplazo de fondo

El reemplazo de fondo es un efecto de vídeo que permite reemplazar 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 reemplazo de fondo:

  • Cree un método que obtenga la característica VideoEFfects se suscribe a los eventos:
private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
   Log.i("VideoEffects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEffects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEffects", "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 reemplazo de fondo:
BackgroundReplacementEffect backgroundReplacementVideoEffect = new BackgroundReplacementEffect();
  • Establezca un fondo personalizado pasando la imagen a través de un búfer.
//example of where we can get an image from, in this case, this is from assets in Android folder
InputStream inputStream = getAssets().open("image.jpg");
Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
byte[] data = stream.toByteArray();
ByteBuffer dataBuffer = ByteBuffer.allocateDirect(data.length);
dataBuffer.put(data);
dataBuffer.rewind();
backgroundReplacementVideoEffect.setBuffer(dataBuffer);
  • Llame a EnableEffect en el objeto videoEffectsFeature:
public void enableBackgroundReplacement() {
    videoEffectsFeature.enableEffect(backgroundReplacementVideoEffect);
}

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

public void disableBackgroundReplacement() {
    videoEffectsFeature.disableEffect(backgroundReplacementVideoEffect);
}

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.

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.

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 selectedCamera = CameraList.SelectedItem as VideoDeviceDetails;
    cameraStream = new LocalOutgoingVideoStream(selectedCamera);
    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

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:

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

Reemplazo de fondo

El reemplazo de fondo es un efecto de vídeo que permite reemplazar 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 reemplazo de fondo:

  • Agregue la instancia de BackgroundReplacementEffect a MainPage.
public sealed partial class MainPage : Page
{
    private BackgroundReplacementEffect backgroundReplacementVideoEffect = new BackgroundReplacementEffect();
}
  • 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 () =>
    {
        BackgroundReplacement.IsChecked = true;
    });
}

private async void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundReplacement.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);
}
  • Establezca un fondo personalizado pasando la imagen a través de un búfer.
//example of getting the image from storage folder
MemoryBuffer memoryBuffer = new MemoryBuffer(0);
StorageFolder InstallationFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
StorageFile file = InstallationFolder.GetFileAsync("image.jpg").GetAwaiter().GetResult();
if (File.Exists(file.Path))
{
    byte[] imageBytes = File.ReadAllBytes(file.Path);
    memoryBuffer = new MemoryBuffer((uint)imageBytes.Length);
    using (IMemoryBufferReference reference = memoryBuffer.CreateReference())
    {
        byte* dataInBytes;
        uint capacityInBytes;

        (reference.As<IMemoryBufferByteAccess>()).GetBuffer(out dataInBytes, out capacityInBytes);
        for (int i = 0; i < imageBytes.Length; i++)
        {
            dataInBytes[i] = imageBytes[i];
        }
    }
    return memoryBuffer;
}
backgroundReplacementVideoEffect.Buffer = memoryBuffer;
  • Habilite y deshabilite el efecto Reemplazo de fondo:
private async void BackgroundReplacement_Click(object sender, RoutedEventArgs e)
{
    if (localVideoEffectsFeature.IsEffectSupported(backgroundReplacementVideoEffect))
    {
        var backgroundReplacementCheckbox = sender as CheckBox;
        if (backgroundReplacementCheckbox.IsChecked.Value)
        {
            localVideoEffectsFeature.EnableEffect(backgroundReplacementVideoEffect);
        }
        else
        {
            localVideoEffectsFeature.DisableEffect(backgroundReplacementVideoEffect);
        }
    }
}

Pasos siguientes

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