Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
# Incorporación de filtros de fondo a la aplicación para Amazon Chime SDK
El proceso de añadir filtros de fondo sigue estos pasos generales:
+ Compruebe si hay navegadores compatibles.
+ Cree un objeto de `VideoFxConfig` con la configuración que desee usar.
+ Utilice el objeto de configuración para crear un objeto de `VideoFxProcessor`.
+ Incluya el objeto de `VideoFxProcessor` en un `VideoTransformDevice`.
+ Utilice `VideoTransformDevice` para iniciar la entrada de video.
**nota**
Para completar estos pasos, primero debe:
Creación de una `Logger`.
Elegir un dispositivo de video de la clase `MediaDeviceInfo`.
Unirse a `MeetingSession`.
Los pasos de las siguientes secciones explican cómo completar el proceso.
**Topics**
+ [Comprobación de soporte antes de ofrecer un filtro para Amazon Chime SDK](support-check.md)
+ [Creación de un objeto VideoFxConfig para Amazon Chime SDK](create-videofxconfig.md)
+ [Creación de un objeto VideoFxProcessor para Amazon Chime SDK](create-videofxprocessor.md)
+ [Configuración del objeto VideoFxProcessor para Amazon Chime SDK](configure-videofxprocessor.md)
+ [Creación del objeto VideoTransformDevice para Amazon Chime SDK](create-video-transform.md)
+ [Inicio de la entrada de video para Amazon Chime SDK](start-video-input.md)
+ [Ajuste de la utilización de recursos de Amazon Chime SDK](tuning.md)
# Comprobación de soporte antes de ofrecer un filtro para Amazon Chime SDK
Amazon Chime SDK proporciona un método estático asíncrono que comprueba los navegadores compatibles e intenta descargar los activos necesarios. Sin embargo, no comprueba el rendimiento del dispositivo. Como práctica recomendada, asegúrate siempre de que los navegadores y dispositivos de los usuarios sean compatibles con los filtros antes de ofrecerlos.
```
import {
VideoFxProcessor
} from 'amazon-chime-sdk-js';
if (!await VideoFxProcessor.isSupported(logger)) {
// logger is optional for isSupported
}
```
# Creación de un objeto VideoFxConfig para Amazon Chime SDK
Puede definir configuraciones para `backgroundBlur` y `backgroundReplacement` en el mismo objeto. Sin embargo, no puede configurar `isEnabled` como `true` para ambos filtros al mismo tiempo. Esa configuración no es válida.
La clase `VideoFxConfig` no realiza ninguna validación propia. La validación se produce en el paso siguiente.
En el siguiente ejemplo se muestra un registro de `VideoFxConfig`.
```
const videoFxConfig: VideoFxConfig = {
backgroundBlur: {
isEnabled: false,
strength: 'medium'
},
backgroundReplacement: {
isEnabled: false,
backgroundImageURL: 'space.jpg',
defaultColor: undefined,
}
}
```
En las siguientes tablas, se enumeran las propiedades de la `VideoFxProcessor` que puede especificar en el objeto `VideoFxConfig`.
**Propiedades del filtro de desenfoque de fondo**
| Propiedad | Tipo | Description (Descripción) |
| --- | --- | --- |
| `isEnabled` | `boolean` | Cuando `true`, el filtro difumina el fondo. |
| `strength` | `string` | Determina el grado de desenfoque. Valores válidos: `low` \$1 `medium` \$1 `high`. |
**Propiedades del filtro de reemplazo de fondo**
| Propiedad | Tipo | Description (Descripción) |
| --- | --- | --- |
| `isEnabled` | `boolean` | Cuando `true`, el filtro sustituye el fondo. |
| `backgroundImageURL` | `string` | La URL de la imagen de fondo. El filtro cambia el tamaño de la imagen de forma dinámica a las dimensiones de la pantalla actual. Puede utilizar una cadena, por ejemplo, `https://...` o una URL de datos, por ejemplo `data:image/jpeg;base64`. |
| `defaultColor` | `string` | Una cadena de colores hexadecimales como `000000` o `FFFFFF`, o una cadena como `black` o `white`. Si no especifica la URL de una imagen, el procesador utilizará la `defaultColor` como fondo. Si no especifica una `defaultColor`, el procesador usa por defecto el color negro. |
# Creación de un objeto VideoFxProcessor para Amazon Chime SDK
Al crear el `VideoFxProcessor` objeto, AWS los servidores descargan los activos en tiempo de ejecución o los carga la memoria caché del navegador. Si las configuraciones de red o de CSP impiden el acceso a los activos, la operación de `VideoFx.create` genera una excepción. El resultado VideoFxProcessor se configura como un procesador no operativo, lo que no afectará a la transmisión de vídeo.
```
let videoFxProcessor: VideoFxProcessor | undefined = undefined;
try {
videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig);
} catch (error) {
logger.warn(error.toString());
}
```
`VideoFxProcessor.create` también intenta cargar la imagen desde `backgroundReplacement.backgroundImageURL`. Si la imagen no se carga, el procesador lanza una excepción. El procesador también ofrece excepciones por otros motivos, como configuraciones no válidas, navegadores no compatibles o hardware con poca potencia.
# Configuración del objeto VideoFxProcessor para Amazon Chime SDK
En la siguiente lista se describen las propiedades de `VideoFxProcessor` que puede configurar. El ejemplo que aparece debajo de las tablas muestra una configuración de tiempo de ejecución típica.
**Desenfoque de fondo**
El desenfoque del fondo toma las siguientes propiedades:
| Propiedad | Tipo | Description (Descripción) |
| --- | --- | --- |
| `isEnabled` | `boolean` | Cuando `true`, el filtro difumina el fondo. |
| `strength` | `string` | Determina el grado de desenfoque. Valores válidos: `low` \$1 `medium` \$1 `high`. |
**Reemplazo de fondo**
El reemplazo del fondo toma los siguientes parámetros:
| Propiedad | Tipo | Description (Descripción) |
| --- | --- | --- |
| `isEnabled` | `boolean` | Cuando `true`, el filtro sustituye el fondo. |
| `backgroundImageURL` | `string` | La URL de la imagen de fondo. El filtro cambia el tamaño de la imagen de forma dinámica a las dimensiones de la pantalla actual. Puede utilizar una cadena, por ejemplo, `https://...` o una URL de datos, por ejemplo `data:image/jpeg;base64`. |
| `defaultColor` | `string` | Una cadena de colores hexadecimales como `000000` o `FFFFFF`, o una cadena como `black` o `white`. Si no especifica la URL de una imagen, el procesador utilizará la `defaultColor` como fondo. Si no especifica una `defaultColor`, el procesador usa por defecto el color negro. |
**Cambiar una configuración en tiempo de ejecución**
Puede cambiar una configuración de `VideoFxProcessor` en tiempo de ejecución mediante el parámetro `videoFxProcessor.setEffectConfig`. En el siguiente ejemplo se muestra cómo activar la sustitución del fondo y desactivar el desenfoque del fondo.
**nota**
Solo puede especificar un tipo de reemplazo de fondo a la vez. Debe especificar un valor para `backgroundImageURL` o `defaultColor`, pero no ambos.
```
videoFxConfig.backgroundBlur.isEnabled = false;
videoFxConfig.backgroundReplacement.isEnabled = true;
try {
await videoFxProcessor.setEffectConfig(videoFxConfig);
} catch(error) {
logger.error(error.toString())
}
```
Si `setEffectConfig` produce una excepción, la configuración anterior permanece en vigor. `setEffectConfig` lanza excepciones en condiciones similares a las que provoca que `VideoFxProcessor.create` genere excepciones.
En el siguiente ejemplo se muestra cómo cambiar una imagen de fondo mientras se reproduce el video.
```
videoFxConfig.backgroundReplacement.backgroundImageURL = "https://my-domain.com/my-other-image.jpg";
try {
await videoFxProcessor.setEffectConfig(videoFxConfig);
} catch(error) {
logger.error(error.toString())
}
```
# Creación del objeto VideoTransformDevice para Amazon Chime SDK
En el ejemplo siguiente se muestra cómo crear un objeto `VideoTransformDevice` y un objeto `VideoFxProcessor`.
```
// assuming that logger and videoInputDevice have already been set
const videoTransformDevice = new DefaultVideoTransformDevice(
logger,
videoInputDevice,
[videoFxProcessor]
);
```
# Inicio de la entrada de video para Amazon Chime SDK
En el siguiente ejemplo se muestra cómo usar el objeto `VideoTransformDevice` para iniciar la entrada de video.
```
// assuming that meetingSession has already been created
await meetingSession.audioVideo.startVideoInput(videoTransformDevice);
meetingSession.audioVideo.start();
meetingSession.audioVideo.startLocalVideoTile();
```
# Ajuste de la utilización de recursos de Amazon Chime SDK
Al crear el `VideoFxProcessor`, puede proporcionar el parámetro opcional `processingBudgetPerFrame` y controlar la cantidad de CPU y GPU que utilizan los filtros.
```
let videoFxProcessor: VideoFxProcessor | undefined = undefined;
const processingBudgetPerFrame = 50;
try {
videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig, processingBudgetPerFrame);
} catch (error) {
logger.warn(error.toString());
}
```
`VideoFxProcessor` requiere tiempo para procesar un fotograma. La cantidad de tiempo depende del dispositivo, del navegador y de cualquier otra cosa que se esté ejecutando en el navegador o en el dispositivo. El procesador utiliza el concepto de *presupuesto* para determinar la cantidad de tiempo que se utiliza para procesar y renderizar cada fotograma.
El tiempo de procesamiento se expresa en milisegundos. Como ejemplo de cómo usar un presupuesto, 1 segundo tiene 1000 ms. Con una captura de video de 15 fotogramas por segundo, el presupuesto total es de 1000 ms/15 fps = 66 ms. Puede establecer un presupuesto del 50 %, o 33 ms, proporcionando el valor `50` del parámetro `processingBudgetPerFrame`, como se muestra en el ejemplo anterior.
A continuación, `VideoFxProcessor` intenta procesar los fotogramas dentro del presupuesto especificado. Si el procesamiento supera el presupuesto, el procesador reduce la calidad visual para mantenerse dentro del presupuesto. El procesador sigue reduciendo la calidad visual al mínimo, momento en el que deja de reducirse. Esta duración del procesamiento se mide continuamente, por lo que si hay más recursos disponibles (por ejemplo, si se cierra otra aplicación y se libera la CPU), el procesador vuelve a aumentar la calidad visual hasta que se ajuste al presupuesto o se alcance la máxima calidad visual.
Si no especifica un valor para `processingBudgetPerFrame`, el valor `VideoFxProcessor` predeterminado es `50`.