Como adicionar efeitos visuais a uma chamada de vídeo

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

• É necessária uma conta do Azure com uma assinatura ativa. Consulte Criar uma conta gratuitamente sobre como criar uma conta do Azure.
• Node.js versões de LTS (Suporte a Longo Prazo) ativas são recomendadas.
• Um recurso ativo dos Serviços de Comunicação. Crie um recurso dos Serviços de Comunicação.
• Um Token de Acesso do Usuário para criar uma instância de um cliente de chamada. Saiba como criar e gerenciar os tokens de acesso do usuário. Você também pode usar a CLI do Azure e executar o comando com sua cadeia de conexão para criar um usuário e um token de acesso. (É necessário capturar a cadeia de conexão do recurso por meio do portal do Azure.)
• A biblioteca de clientes de Chamada de Comunicação do Azure está configurada e configurada corretamente (https://www.npmjs.com/package/@azure/communication-calling).

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:

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