Compartir a través de

Incorporación de efectos visuales a una videollamada

  • Artículo

Importante

La funcionalidad descrita en este artículo se encuentra actualmente en versión preliminar pública. 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 tengan sus funcionalidades limitadas. Para más información, consulte Términos de uso complementarios de las Versiones Preliminares de Microsoft Azure.

Importante

Los efectos de vídeo en las llamadas están disponibles a partir de la versión preliminar pública 1.10.0-beta.1 del SDK de llamadas. Cuando use efectos de vídeo asegúrese de usar este SDK, u otro más reciente.

Nota

Esta API se proporciona como versión preliminar ("beta") para 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 Azure Communication Services para WebJS (https://www.npmjs.com/package/@azure/communication-calling).

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.

El SDK de llamada de Azure Communication Service permite crear efectos de vídeo que otros usuarios de una llamada pueden ver. Por ejemplo, los usuarios que realizan llamadas a Azure Communication Services mediante el SDK de WebJS ahora pueden activar el desenfoque del fondo. Cuando el desenfoque del fondo está habilitado, los usuarios pueden sentirse más cómodos al realizar una llamada de vídeo, ya que el vídeo de salida solo muestra al usuario y el resto del contenido se ve difuminado.

Requisitos previos

Instalación del SDK de llamada de Azure Communication Services

Ejemplo de uso de la CLI de Azure

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 Azure Communication Services para JavaScript.

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

Para más información sobre los efectos de comunicación en las llamadas, consulte la página del paquete 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();