As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Adicionar filtros de plano de fundo à sua aplicação do SDK do Amazon Chime O processo de adição de filtros de plano de fundo segue estas etapas gerais: + Verifique se há navegadores compatíveis. + Crie um objeto `VideoFxConfig` com a configuração que você deseja usar. + Use o objeto de configuração para criar um objeto `VideoFxProcessor`. + Inclua o objeto `VideoFxProcessor` em um `VideoTransformDevice`. + Use o `VideoTransformDevice` para iniciar a entrada de vídeo. **nota** Para concluir essas etapas, você deve primeiro: Crie um `Logger`. Escolher um dispositivo de vídeo da classe `MediaDeviceInfo`. Participar com sucesso em uma `MeetingSession`. As etapas nas seções a seguir explicam como concluir o processo. **Topics** + [Conferir o suporte antes de oferecer um filtro para o SDK do Amazon Chime](support-check.md) + [Criar um objeto VideoFxConfig do SDK do Amazon Chime](create-videofxconfig.md) + [Criar um objeto VideoFxProcessor do SDK do Amazon Chime](create-videofxprocessor.md) + [Configurar o objeto VideoFxProcessor do SDK do Amazon Chime](configure-videofxprocessor.md) + [Criar o objeto VideoTransformDevice do SDK do Amazon Chime](create-video-transform.md) + [Iniciar a entrada de vídeo do SDK do Amazon Chime](start-video-input.md) + [Ajustar a utilização de recursos do SDK do Amazon Chime](tuning.md) # Conferir o suporte antes de oferecer um filtro para o SDK do Amazon Chime O SDK do Amazon Chime fornece um método estático assíncrono que verifica os navegadores compatíveis e tenta baixar os ativos necessários. No entanto, ele não verifica o desempenho do dispositivo. Como prática recomendada, sempre garanta que os navegadores e dispositivos dos usuários sejam compatíveis com os filtros antes de oferecer os filtros. ``` import { VideoFxProcessor } from 'amazon-chime-sdk-js'; if (!await VideoFxProcessor.isSupported(logger)) { // logger is optional for isSupported } ``` # Criar um objeto VideoFxConfig do SDK do Amazon Chime Você pode definir configurações para `backgroundBlur` e `backgroundReplacement` no mesmo objeto. No entanto, você não pode configurar `isEnabled` como `true` para os dois filtros ao mesmo tempo. Essa é uma configuração inválida. A classe `VideoFxConfig` não faz validação própria. A validação ocorre na próxima etapa. O exemplo a seguir mostra uma `VideoFxConfig` válida. ``` const videoFxConfig: VideoFxConfig = { backgroundBlur: { isEnabled: false, strength: 'medium' }, backgroundReplacement: { isEnabled: false, backgroundImageURL: 'space.jpg', defaultColor: undefined, } } ``` As tabelas a seguir listam as propriedades do `VideoFxProcessor` que você pode especificar no objeto `VideoFxConfig`. **Propriedades do filtro de desfoque de plano de fundo** | Propriedade | Tipo | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Quando `true`, o filtro desfoca o plano de fundo. | | `strength` | `string` | Determina a extensão do desfoque. Valores válidos: `low` \$1 `medium` \$1 `high`. | **Propriedades do filtro de substituição de plano de fundo** | Propriedade | Tipo | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Quando `true`, o filtro substitui o plano de fundo\$1. | | `backgroundImageURL` | `string` | A URL da imagem do plano de fundo. O filtro redimensiona a imagem dinamicamente para as dimensões da tela atual. Você pode usar uma string, como `https://...` ou uma URL de dados, como `data:image/jpeg;base64`. | | `defaultColor` | `string` | Uma string de cor hexadecimal, como `000000` ou `FFFFFF`, ou uma string como `black` ou `white`. Se você não especificar uma URL da imagem, o processador usará a `defaultColor` como plano de fundo. Se você não especificar uma `defaultColor`, o processador usará o padrão preto. | # Criar um objeto VideoFxProcessor do SDK do Amazon Chime Ao criar o `VideoFxProcessor` objeto, os AWS servidores baixam os ativos de tempo de execução ou o cache do navegador carrega os ativos. Se as configurações de rede ou CSP impedirem o acesso aos ativos, a operação `VideoFx.create` gerará uma exceção. O resultado VideoFxProcessor é configurado como um processador autônomo, o que não afetará a transmissão de vídeo. ``` let videoFxProcessor: VideoFxProcessor | undefined = undefined; try { videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig); } catch (error) { logger.warn(error.toString()); } ``` `VideoFxProcessor.create` também tenta carregar a imagem do `backgroundReplacement.backgroundImageURL`. Se a imagem não for carregada, o processador lançará uma exceção. O processador também gera exceções por outros motivos, como configurações inválidas, navegadores sem suporte ou hardware de baixa potência. # Configurar o objeto VideoFxProcessor do SDK do Amazon Chime A tabela a seguir lista as propriedades do `VideoFxProcessor` que você pode configurar. O exemplo abaixo das tabelas mostra uma configuração típica de runtime. **Desfoque de plano de fundo** O desfoque de plano de fundo assume as seguintes propriedades: | Propriedade | Tipo | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Quando `true`, o filtro desfoca o plano de fundo. | | `strength` | `string` | Determina a extensão do desfoque. Valores válidos: `low` \$1 `medium` \$1 `high`. | **Substituição de plano de fundo** A substituição de plano de fundo considera os seguintes parâmetros: | Propriedade | Tipo | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Quando `true`, o filtro substitui o plano de fundo. | | `backgroundImageURL` | `string` | A URL da imagem do plano de fundo. O filtro redimensiona a imagem dinamicamente para as dimensões da tela atual. Você pode usar uma string, como `https://...` ou uma URL de dados, como `data:image/jpeg;base64`. | | `defaultColor` | `string` | Uma string de cor hexadecimal, como `000000` ou `FFFFFF`, ou uma string como `black` ou `white`. Se você não especificar uma URL da imagem, o processador usará a `defaultColor` como plano de fundo. Se você não especificar uma `defaultColor`, o processador usará o padrão preto. | **Como alterar uma configuração em runtime** Você pode alterar uma configuração do `VideoFxProcessor` em runtime usando o parâmetro `videoFxProcessor.setEffectConfig`. O exemplo a seguir mostra como habilitar a substituição de plano de fundo e desabilitar o desfoque de plano de fundo. **nota** Você só pode especificar um tipo de substituição de plano de fundo por vez. Especifique um valor para `backgroundImageURL` ou `defaultColor`, mas não para os dois. ``` videoFxConfig.backgroundBlur.isEnabled = false; videoFxConfig.backgroundReplacement.isEnabled = true; try { await videoFxProcessor.setEffectConfig(videoFxConfig); } catch(error) { logger.error(error.toString()) } ``` Se a `setEffectConfig` gerar uma exceção, a configuração anterior permanecerá em vigor. A `setEffectConfig` lança exceções em condições semelhantes às que fazem o `VideoFxProcessor.create` lançar exceções. O exemplo a seguir mostra como alterar uma imagem de plano de fundo enquanto o vídeo é executado. ``` videoFxConfig.backgroundReplacement.backgroundImageURL = "https://my-domain.com/my-other-image.jpg"; try { await videoFxProcessor.setEffectConfig(videoFxConfig); } catch(error) { logger.error(error.toString()) } ``` # Criar o objeto VideoTransformDevice do SDK do Amazon Chime O exemplo a seguir mostra como criar um objeto `VideoTransformDevice` que contém o `VideoFxProcessor`. ``` // assuming that logger and videoInputDevice have already been set const videoTransformDevice = new DefaultVideoTransformDevice( logger, videoInputDevice, [videoFxProcessor] ); ``` # Iniciar a entrada de vídeo do SDK do Amazon Chime O exemplo a seguir mostra como usar o objeto `VideoTransformDevice` para iniciar a entrada de vídeo. ``` // assuming that meetingSession has already been created await meetingSession.audioVideo.startVideoInput(videoTransformDevice); meetingSession.audioVideo.start(); meetingSession.audioVideo.startLocalVideoTile(); ``` # Ajustar a utilização de recursos do SDK do Amazon Chime Ao criar o `VideoFxProcessor`, você pode fornecer o parâmetro `processingBudgetPerFrame` opcional e controlar a quantidade de CPU e GPU que os filtros usam. ``` let videoFxProcessor: VideoFxProcessor | undefined = undefined; const processingBudgetPerFrame = 50; try { videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig, processingBudgetPerFrame); } catch (error) { logger.warn(error.toString()); } ``` O `VideoFxProcessor` requer tempo para processar um quadro. A quantidade de tempo depende do dispositivo, do navegador e do que mais está sendo executado no navegador ou no dispositivo. O processador usa o conceito de um *orçamento* para definir a quantidade de tempo usada para processar e renderizar cada quadro. O tempo de processamento é em milissegundos. Como exemplo de como usar um orçamento, 1 segundo tem 1000 ms. A meta de 15 quadros por segundo de captura de vídeo resulta em um orçamento total de 1000 ms/15 fps = 66 ms. Você pode definir um orçamento de 50% disso, ou 33 ms, fornecendo o valor `50` no parâmetro `processingBudgetPerFrame`, conforme mostrado no exemplo acima. O `VideoFxProcessor` em seguida tenta processar os quadros dentro do orçamento especificado. Se o processamento ultrapassar o orçamento, o processador reduz a qualidade visual para ficar dentro do orçamento. O processador continua reduzindo a qualidade visual ao mínimo e, nesse momento, ele para de reduzir. Essa duração do processamento é medida continuamente, portanto, se mais recursos forem disponibilizados, como outro aplicativo fechando e liberando a CPU, o processador aumentará a qualidade visual novamente até atingir o orçamento ou atingir a qualidade visual máxima. Se você não fornecer um valor para `processingBudgetPerFrame`, o `VideoFxProcessor` padrão será `50`.