Compartir a través de

Adición de efectos visuales a una videollamada

Importante

Esta característica de Azure Communication Services se encuentra actualmente en versión preliminar. Las características de la versión preliminar están disponibles públicamente y se pueden usar en todos los clientes nuevos y existentes de Microsoft.

Esta versión preliminar se ofrece sin un Acuerdo de Nivel de Servicio y no se recomienda para cargas de trabajo de producción. Es posible que algunas características no sean compatibles o que las funcionalidades estén restringidas.

Para más información, consulte Términos de uso complementarios de las Versiones Preliminares de Microsoft Azure.

Importante

Los efectos de vídeo de llamada están disponibles a partir de la versión preliminar pública 1.10.0-beta.1 del SDK de llamadas. Asegúrese de usar este o un SDK más reciente al usar efectos de vídeo.

Nota:

Esta API se proporciona como versión preliminar ("beta") para los desarrolladores y puede cambiar en función de los comentarios que recibamos.

Nota:

Esta biblioteca 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).

Nota:

Actualmente, la compatibilidad con el explorador para crear efectos de fondo de vídeo solo se admite en Chrome y Edge Desktop Browser (Windows y Mac) y Mac Safari Desktop.

El SDK de llamadas de comunicación de Azure permite crear efectos de vídeo que otros usuarios en una llamada pueden ver. Por ejemplo, para un usuario que realiza llamadas a Azure Communication Services mediante el SDK de WebJS, ahora puede habilitar que el usuario pueda activar el desenfoque en segundo plano. Cuando el desenfoque de fondo está habilitado, un usuario puede sentirse más cómodo al realizar una llamada de vídeo que el vídeo de salida solo muestra a un usuario y el resto del contenido se difumina.

Prerrequisitos

Instalar el SDK de llamadas de Azure Communication Services

Ejemplo de uso de la CLI de Azure para

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

Para más información sobre el uso de la CLI, consulte Uso de la CLI de Azure para crear y administrar tokens de acceso.

Instalación del SDK de efectos de llamada

Use el comando "npm install" para instalar el SDK de efectos de llamada de Comunicación de Azure para JavaScript.

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

Para obtener más información sobre los efectos de comunicación de llamada, visite la página del paquete de npm.

Efectos de vídeo admitidos:

Actualmente, los efectos de vídeo admiten la siguiente capacidad:

  • Desenfoque de fondo
  • Reemplazar el fondo por una imagen personalizada

Modelo de clase:

Nombre Descripción
BackgroundBlurEffect Clase de efecto de desenfoque del fondo.
BackgroundReplacementEffect Reemplazo del fondo por una clase de efecto de imagen.

Para usar efectos de vídeo con la biblioteca cliente de llamada de Azure Communication Services, una vez que ha creado un elemento LocalVideoStream, es necesario obtener de él la API de la característica VideoEffects.

Ejemplos de código

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