Compartilhar via

Como adicionar efeitos visuais a uma chamada de vídeo

  • Artigo

Importante

A funcionalidade descrita neste artigo está atualmente em versão prévia pública. Essa versão prévia é fornecida sem um contrato de nível de serviço e não é recomendada para cargas de trabalho de produção. Alguns recursos podem não ter suporte ou podem ter restrição de recursos. Para obter mais informações, consulte Termos de Uso Complementares de Versões Prévias do Microsoft Azure.

Importante

Os efeitos de Chamada de Vídeo estão disponíveis na versão de visualização pública 1.10.0-beta.1 do SDK de Chamada. Use este ou um SDK mais recente ao utilizar efeitos de vídeo.

Observação

Essa API é fornecida como uma versão prévia ("beta") para desenvolvedores e pode mudar com base nos comentários recebidos.

Observação

Essa biblioteca não pode ser usada autônoma e só pode funcionar quando usada com a biblioteca de clientes de Chamada de Comunicação do Azure para WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Observação

Atualmente, o suporte a navegador para criar efeitos de tela de fundo de vídeo tem suporte apenas no navegador de Desktop do Chrome e do Edge (Windows e Mac) e Desktop do Mac Safari.

O SDK de Chamada de Comunicação do Azure permite que você crie efeitos de vídeo que outros usuários em uma chamada podem ver. Por exemplo, para um usuário que está fazendo chamadas dos Serviços de Comunicação do Azure usando o SDK do WebJS, agora você pode habilitar que o usuário possa ativar o desfoque em segundo plano. Quando o desfoque em segundo plano está habilitado, um usuário pode se sentir mais confortável em fazer uma chamada de vídeo que o vídeo de saída mostra apenas um usuário e todo o outro conteúdo fica desfocado.

Pré-requisitos

Instalar o SDK de Chamada dos Serviços de Comunicação do Azure

Um exemplo usando a CLI do Azure para

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

Para obter detalhes sobre como usar a CLI, consulte Usar a CLI do Azure para criar e gerenciar tokens de acesso.

Instalar o SDK de efeitos de chamada

Use o comando 'npm install' para instalar o SDK de Efeitos de Chamada de Comunicação do Azure para JavaScript.

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

Para obter mais detalhes sobre os efeitos de comunicação de chamada, visite a página do pacote npm.

Efeitos de vídeo com suporte:

Atualmente, os efeitos de vídeo dão suporte à seguinte capacidade:

  • Desfoque em segundo plano
  • Substituir a tela de fundo por uma imagem personalizada

Modelo de classe:

Nome Descrição
BackgroundBlurEffect A classe de efeito de desfoque de plano de fundo.
BackgroundReplacementEffect A substituição de plano de fundo com a classe de efeito de imagem.

Para usar efeitos de vídeo com a biblioteca de clientes de Chamada de Comunicação do Azure, depois de criar um LocalVideoStream, você precisa obter a API de recurso VideoEffects do LocalVideoStream.

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