Share via

Adicionar efeitos visuais a uma videochamada

  • Artigo

Importante

A funcionalidade descrita neste artigo está atualmente em visualização pública. Esta versão de pré-visualização é fornecida sem um contrato de nível de serviço e não a recomendamos para cargas de trabalho de produção. Algumas funcionalidades poderão não ser suportadas ou poderão ter capacidades limitadas. Para obter mais informações, veja Termos Suplementares de Utilização para Pré-visualizações do Microsoft Azure.

Importante

Os efeitos de Vídeo de Chamada estão disponíveis a partir da versão de visualização pública 1.10.0-beta.1 do SDK de Chamada. Certifique-se de usar este ou um SDK mais recente ao usar efeitos de vídeo.

Nota

Esta API é fornecida como uma pré-visualização ('beta') para programadores e pode mudar com base nos comentários que recebemos.

Nota

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

Nota

Atualmente, o suporte do navegador para a criação de efeitos de fundo de vídeo só é suportado no Chrome e Edge Desktop Browser (Windows e Mac) e Mac Safari Desktop.

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 faz chamadas dos Serviços de Comunicação do Azure usando o SDK WebJS, agora você pode habilitar que o usuário possa ativar o desfoque em segundo plano. Quando o desfoque de fundo está ativado, um usuário pode se sentir mais confortável em fazer uma chamada de vídeo que o vídeo de saída apenas mostra um usuário e todo o outro conteúdo é desfocado.

Pré-requisitos

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

  • É necessária uma conta do Azure com uma subscrição ativa. Consulte Criar uma conta gratuitamente sobre como criar uma conta do Azure.
  • Node.js versões ativas de Suporte de Longo Prazo (LTS) são recomendadas.
  • Um recurso ativo dos Serviços de Comunicação. Crie um recurso de Serviços de Comunicação.
  • Um token de acesso de usuário para instanciar um cliente de chamada. Saiba como criar e gerenciar tokens de acesso de 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. (Precisa pegar a cadeia de conexão do recurso por meio do portal do Azure.)
  • A biblioteca de cliente do Azure Communication Calling está corretamente configurada e configurada (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 do Azure Communication Calling Effects 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 suportados:

Atualmente, os efeitos de vídeo suportam a seguinte capacidade:

  • Desfoque de fundo
  • Substitua o plano 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 do plano de fundo pela classe de efeito de imagem.

Para usar efeitos de vídeo com a biblioteca de cliente do Azure Communication Calling, depois de criar um LocalVideoStream, você precisa obter a API do 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();