Início rápido: adicionar efeitos de vídeo às chamadas de vídeo

Artigo
07/20/2023

Você pode usar o recurso Efeitos de vídeo para adicionar efeitos ao vídeo nas chamadas de vídeo. Esse recurso permite que os desenvolvedores compilem efeitos visuais de tela de fundo e substituam o vídeo de tela de fundo para a experiência de chamada. O desfoque da tela de fundo fornece aos usuários o mecanismo para remover as distrações atrás de um participante, de modo que os participantes poderão se comunicar sem a presença de atividades disruptivas ou de informações confidenciais na tela de fundo. Isso é especialmente útil no contexto da telessaúde, em que um provedor de serviços ou paciente pode querer encobrir o ambiente ao redor para proteger as informações confidenciais ou as informações de identificação pessoal. O desfoque da tela de fundo pode ser aplicado em todos os cenários de compromissos virtuais, incluindo telebancos e audiências virtuais, para proteger a privacidade do usuário. Além da confidencialidade aprimorada, o desfoque da tela de fundo permite mais criatividade de expressão, permitindo que os usuários carreguem telas de fundo personalizadas para hospedar uma experiência de chamada mais divertida e personalizada.

Observação

Não é possível usar a biblioteca de efeitos de chamada de maneira autônoma e poderá funcionar apenas quando utilizada com a biblioteca de clientes de Chamada de Comunicação do Azure para WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Usar efeitos de vídeo

Instalar o pacote

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

Importante

Este início rápido usa a versão do SDK de Chamada dos Serviços de Comunicação do Azure 1.13.1 (ou posterior) e a versão do SDK de Efeitos de Chamada dos Serviços de Comunicação do Azure 1.0.1 ou posterior.

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

Consulte aqui para obter mais detalhes sobre a página do pacote npm de efeitos de comunicação de chamada.

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.

Observação

Atualmente, há dois efeitos de vídeo disponíveis:

Desfoque em segundo plano
Substituição de plano de fundo com uma imagem (a taxa de proporção deve ser 16:9 para ser compatível)

Para usar os efeitos de vídeo com o SDK de Chamada de Comunicação do Azure, após criar um LocalVideoStream, você precisará obter a API do recurso VideoEffects do LocalVideoStream para iniciar/parar os efeitos de vídeo:

import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 

import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects'; 

// Get the video effects feature api on the LocalVideoStream 
// (here, localVideoStream is the LocalVideoStream object you created while setting up video calling)
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
});

Desfoque em segundo plano

// Create the effect instance 
const backgroundBlurEffect = new BackgroundBlurEffect(); 

// Recommended: Check support by using the isSupported method on the feature API
const backgroundBlurSupported = await videoEffectsFeatureApi.isSupported(backgroundBlurEffect);

if (backgroundBlurSupported) { 
    // Use the video effects feature api we created to start effects
    await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
}

Substituição de tela de fundo por uma imagem

Para esse efeito, é necessário fornecer a URL da imagem que você quer como tela de fundo.

Importante

O método startEffects falhará se a URL não for de uma imagem ou se estiver inacessível/ilegível.

Observação

Os formatos de imagem com suporte atual são: png, jpg, jpeg, tiff, bmp.

A taxa de proporção atual com suporte é de 16:9.

const backgroundImage = 'https://linkToImageFile'; 

// Create the effect instance 
const backgroundReplacementEffect = new BackgroundReplacementEffect({ 
    backgroundImageUrl: backgroundImage
}); 

// Recommended: Check support by using the isSupported method on the feature API
const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);

if (backgroundReplacementSupported) { 
    // Use the video effects feature api as before to start/stop effects 
    await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 
}

Alterar a imagem para esse efeito poderá ser feita passando-a por meio do método configure:

const newBackgroundImage = 'https://linkToNewImageFile'; 

await backgroundReplacementEffect.configure({ 
    backgroundImageUrl: newBackgroundImage
});

A mudança de efeitos pode ser feita usando o mesmo método na API do recurso de efeitos de vídeo:

// Switch to background blur 
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 

// Switch to background replacement 
await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);

A qualquer momento, se quiser verificar quais efeitos estão ativos, use a propriedade activeEffects. A propriedade activeEffects retorna uma matriz com os nomes dos efeitos ativos atuais e retorna uma matriz vazia se não houver efeitos ativos.

// Using the video effects feature api
const currentActiveEffects = videoEffectsFeatureApi.activeEffects;

Para parar os efeitos:

await videoEffectsFeatureApi.stopEffects();

Observação

Para usar os Efeitos de Vídeo no SDK de Chamadas do iOS, um modelo de machine learning é baixado para o dispositivo do cliente. Recomendamos que você revise as notas de privacidade em seu aplicativo e as atualize adequadamente, se necessário.

Você pode usar o recurso Efeitos de Vídeo para adicionar efeitos ao vídeo nas chamadas de vídeo. O desfoque da tela de fundo fornece aos usuários o mecanismo para remover as distrações atrás de um participante, de modo que os participantes poderão se comunicar sem a presença de atividades disruptivas ou de informações confidenciais na tela de fundo. Esse recurso é bastante útil no contexto da telessaúde, em que um provedor de serviços ou paciente pode querer encobrir o ambiente ao redor para proteger as informações confidenciais ou dados pessoais. O desfoque da tela de fundo pode ser aplicado em todos os cenários de compromissos virtuais, incluindo telebancos e audiências virtuais, para proteger a privacidade do usuário.

Usar efeitos de vídeo

Observação

O suporte a efeitos de vídeo no iOS é limitado às duas versões principais mais recentes do iOS. Por exemplo, quando uma nova versão principal do iOS é lançada, o requisito do iOS é a nova versão e as versões mais recentes que a precederam.

Atualmente, há um Efeito de Vídeo disponível: Desfoque da Tela de Fundo.

O objeto LocalVideoEffectsFeature tem a seguinte estrutura de API:

enable: habilita um Efeito de Vídeo na instância LocalVideoStream.
disable: desabilita um Efeito de Vídeo na instância LocalVideoStream.
isSupported: Indica se um Efeito de Vídeo é suportado na instância LocalVideoStream.
onVideoEffectEnabled: evento que é disparado quando um Efeito de Vídeo foi habilitado com sucesso.
onVideoEffectDisabled: evento que é disparado quando um Efeito de Vídeo foi desabilitado com sucesso.
onVideoEffectError: evento que é disparado quando uma operação de Efeito de Vídeo falha.

Quando você tiver o objeto LocalVideoEffectsFeature, poderá assinar os eventos, que têm os seguintes representantes: didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

Para usar os Efeitos de Vídeo com o SDK de Chamada de Comunicação do Azure, após criar um LocalVideoStream, você precisará obter a API do recurso VideoEffects do LocalVideoStream para habilitar/desabilitar os Efeitos de Vídeo:

// Obtain the Video Effects feature from the LocalVideoStream object that is sending the video.
@State var localVideoEffectsFeature: LocalVideoEffectsFeature?
localVideoEffectsFeature = self.localVideoStreams.first.feature(Features.localVideoEffects)

// Subscribe to the events
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didEnableVideoEffect args: VideoEffectEnabledEventArgs) {
        os_log("Video Effect Enabled, VideoEffectName: %s", log:log, args.videoEffectName)
    }
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didDisableVideoEffect args: VideoEffectDisabledEventArgs) {
    os_log("Video Effect Disabled, VideoEffectName: %s", log:log, args.videoEffectName)
}
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didReceiveVideoEffectError args: VideoEffectErrorEventArgs) {
    os_log("Video Effect Error, VideoEffectName: %s, Code: %s, Message: %s", log:log, args.videoEffectName, args.code, args.message)
}

e comece a usar as APIs para habilitar e desabilitar os Efeitos de Vídeo:

localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Desfoque em segundo plano

O Desfoque da Tela de Fundo é um Efeito de Vídeo que permite que o plano de fundo de uma pessoa seja desfocado. Para usar o Efeito de Vídeo na Tela de Fundo, você precisa obter um recurso LocalVideoEffectsFeature de um LocalVideoStream válido.

Crie um novo objeto Efeito de Vídeo de Desfoque da Tela de Fundo:

@State var backgroundBlurVideoEffect: BackgroundBlurEffect?

Verifique se BackgroundBlurEffect é suportado e chame Enable no objeto videoEffectsFeature:

if((localVideoEffectsFeature.isSupported(effect: backgroundBlurVideoEffect)) != nil)
{
    localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
}

Para desabilitar o Efeito de Vídeo de Desfoque da Tela de Fundo:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Observação

Um modelo de machine learning será baixado no dispositivo do cliente para que seja possível usar os Efeitos de Vídeo no SDK de Chamada do Android. Recomendamos que você revise as notas de privacidade em seu aplicativo e as atualize adequadamente, se necessário.

Este guia de início rápido se baseia no guia Início Rápido: adicione chamadas de vídeo individuais ao seu aplicativo para Android.

Usar efeitos de vídeo

Observação

O suporte a efeitos de vídeo no Android está limitado às últimas quatro versões principais do Android. Por exemplo, quando uma nova versão principal do Android é lançada, o requisito do Android é a nova versão e as três versões mais recentes que a precedem.

Atualmente, há um Efeito de Vídeo disponível: Desfoque da Tela de Fundo.

O objeto VideoEffectsLocalVideoStreamFeature tem a seguinte estrutura de API:

enableEffect: habilita um Efeito de Vídeo na instância LocalVideoStream.
disableEffect: desabilita um Efeito de Vídeo na instância LocalVideoStream.
OnVideoEffectEnabledListener: evento que é disparado quando um Efeito de Vídeo foi habilitado com sucesso.
OnVideoEffectDisabledListener: evento que é disparado quando um Efeito de Vídeo foi desabilitado com sucesso.
OnVideoEffectErrorListener: evento que é disparado quando uma operação de Efeito de Vídeo falha.

Os objetos VideoEffectEnabledEvent, VideoEffectDisabledEvent e VideoEffectErrorEvent têm a seguinte estrutura de API:

getVideoEffectName: obtém o nome do Efeito de Vídeo que disparou o evento.

Depois de ter o objeto VideoEffectsLocalVideoStreamFeature, você pode se inscrever nos eventos:

// Obtain the Video Effects feature from the LocalVideoStream object that is sending the video.
VideoEffectsLocalVideoStreamFeature videoEffectsFeature = currentVideoStream.feature(Features.LOCAL_VIDEO_EFFECTS);

// Create event handlers for the events
private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
}
 
// Subscribe to the events
videoEffectsFeature.addOnVideoEffectEnabledListener(this::handleOnVideoEffectEnabled);
videoEffectsFeature.addOnVideoEffectDisabledListener(this::handleOnVideoEffectDisabled);
videoEffectsFeature.addOnVideoEffectErrorListener(this::handleOnVideoEffectError);

e comece a usar as APIs para habilitar e desabilitar os Efeitos de Vídeo:

videoEffectsFeature.enableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );
videoEffectsFeature.disableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );

Desfoque em segundo plano

O Desfoque da Tela de Fundo é um Efeito de Vídeo que permite que o plano de fundo de uma pessoa seja desfocado. Para usar o Efeito de Vídeo na Tela de Fundo, você precisa obter um recurso VideoEffectsLocalVideoStreamFeature de um LocalVideoStream válido.

Para habilitar o Efeito de Vídeo de Desfoque da Tela de Fundo:

Crie um método que obtém o Recurso VideoEFfects que se inscreve nos eventos:

private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
   Log.i("VideoEfects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEfects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEfects", "Error " + args.getCode() + ":" + args.getMessage()
           + " for effect " + args.getVideoEffectName());
}

VideoEffectsLocalVideoStreamFeature videoEffectsFeature;
public void createVideoEffectsFeature() {
    videoEffectsFeature = currentVideoStream.feature(Features.LOCAL_VIDEO_EFFECTS);
    videoEffectsFeature.addOnVideoEffectEnabledListener(this::handleOnVideoEffectEnabled);
    videoEffectsFeature.addOnVideoEffectDisabledListener(this::handleOnVideoEffectDisabled);
    videoEffectsFeature.addOnVideoEffectErrorListener(this::handleOnVideoEffectError);
}

Crie um novo objeto Efeito de Vídeo de Desfoque da Tela de Fundo:

BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();

Chame EnableEffect no objeto videoEffectsFeature:

public void enableBackgroundBlur() {
    videoEffectsFeature.enableEffect(backgroundBlurEffect);
}

Para desabilitar o Efeito de Vídeo de Desfoque da Tela de Fundo:

public void disableBackgroundBlur() {
    videoEffectsFeature.disableEffect(backgroundBlurEffect);
}

Observação

Um modelo de machine learning será baixado no dispositivo do cliente para que seja possível usar os Efeitos de Vídeo no SDK de Chamada do Windows. Recomendamos que você revise as notas de privacidade em seu aplicativo e as atualize adequadamente, se necessário.

Este guia de início rápido se baseia no guia Início Rápido: adicione chamadas de vídeo individuais ao seu aplicativo para Windows.

Usar efeitos de vídeo

Atualmente, há um Efeito de Vídeo disponível: Desfoque da Tela de Fundo.

O objeto VideoEffectsLocalVideoStreamFeature tem a seguinte estrutura de API:

EnableEffect: habilita um Efeito de Vídeo na instância LocalVideoStream.
DisableEffect: desabilita um Efeito de Vídeo na instância LocalVideoStream.
VideoEffectEnabled: evento que é disparado quando um Efeito de Vídeo foi habilitado com sucesso.
VideoEffectDisabledListener: evento que é disparado quando um Efeito de Vídeo foi desabilitado com sucesso.
VideoEffectErrorListener: evento que é disparado quando uma operação de Efeito de Vídeo falha.

Os objetos VideoEffectEnabledEvent, VideoEffectDisabledEvent e VideoEffectErrorEvent têm a seguinte estrutura de API:

VideoEffectName: obtém o nome do Efeito de Vídeo que disparou o evento.

Depois de ter o objeto VideoEffectsLocalVideoStreamFeature, você pode se inscrever nos eventos:

Para usar Efeitos de Vídeo com o SDK de Chamada de Comunicação do Azure, adicione as variáveis a MainPage.

public sealed partial class MainPage : Page
{
    private LocalVideoEffectsFeature localVideoEffectsFeature;
}

Depois de criar um LocalVideoStream, você precisará obter a API do recurso VideoEffects do LocalVideoStream para ativar/desativar os Efeitos de Vídeo.

private async void CameraList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedCamerea = CameraList.SelectedItem as VideoDeviceDetails;
    cameraStream = new LocalOutgoingVideoStream(selectedCamerea);
    InitVideoEffectsFeature(cameraStream);
    
    var localUri = await cameraStream.StartPreviewAsync();
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        LocalVideo.Source = MediaSource.CreateFromUri(localUri);
    });
}

public void InitVideoEffectsFeature(LocalOutgoingVideoStream videoStream){
    localVideoEffectsFeature = videoStream.Features.VideoEffects;
    localVideoEffectsFeature.VideoEffectEnabled += LocalVideoEffectsFeature_VideoEffectEnabled;
    localVideoEffectsFeature.VideoEffectDisabled += LocalVideoEffectsFeature_VideoEffectDisabled;
    localVideoEffectsFeature.VideoEffectError += LocalVideoEffectsFeature_VideoEffectError;
}

// Create event handlers for the events
private void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs args)
{
}

private void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs args)
{
}

private void LocalVideoEffectsFeature_VideoEffectError(object sender, VideoEffectErrorEventArgs args)
{
}
 
// Subscribe to the events
videoEffectsFeature.VideoEffectEnabled += VideoEffectsFeature_OnVideoEffectEnabled;
videoEffectsFeature.VideoEffectDisabled += VideoEffectsFeature_OnVideoEffectDisabled;
videoEffectsFeature.VideoEffectError += VideoEffectsFeature_OnVideoEffectError;

e comece a usar as APIs para habilitar e desabilitar os Efeitos de Vídeo:

videoEffectsLocalVideoStreamFeature.EnableEffect( {{VIDEO_EFFECT_TO_ENABLE}} );
videoEffectsLocalVideoStreamFeature.DisableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );

Desfoque em segundo plano

O Desfoque da Tela de Fundo é um Efeito de Vídeo que permite que o plano de fundo de uma pessoa seja desfocado. Para usar o Efeito de Vídeo na Tela de Fundo, você precisa obter um recurso VideoEffectsLocalVideoStreamFeature de um LocalVideoStream válido.

Para habilitar o Efeito de Vídeo de Desfoque da Tela de Fundo:

Adicione a instância BackgroundBlurEffect a MainPage.

public sealed partial class MainPage : Page
{
    private BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
}

Crie um método que obtém o Recurso VideoEFfects que se inscreve nos eventos:

private async void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundBlur.IsChecked = true;
    });
}

private async void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundBlur.IsChecked = false;
    });
}

private void LocalVideoEffectsFeature_VideoEffectError(object sender, VideoEffectErrorEventArgs e)
{
    String effectName = args.VideoEffectName;
    String errorCode = args.Code;
    String errorMessage = args.Message;

    Trace.WriteLine("VideoEffects VideoEffectError on effect " + effectName + "with code "
        + errorCode + "and error message " + errorMessage);
}

Habilite e desabilite o efeito Desfoque em Segundo Plano:

private async void BackgroundBlur_Click(object sender, RoutedEventArgs e)
{
    if (localVideoEffectsFeature.IsEffectSupported(backgroundBlurVideoEffect))
    {
        var backgroundBlurCheckbox = sender as CheckBox;
        if (backgroundBlurCheckbox.IsChecked.Value)
        {
            localVideoEffectsFeature.EnableEffect(backgroundBlurVideoEffect);
        }
        else
        {
            localVideoEffectsFeature.DisableEffect(backgroundBlurVideoEffect);
        }
    }
}

Próximas etapas

Para obter mais informações, consulte os seguintes artigos:

Confira nosso exemplo de destaque da chamada
Introdução à Biblioteca de interface do usuário
Conheça os recursos do SDK de Chamada
Saiba mais sobre como a chamada funciona

Início rápido: adicionar efeitos de vídeo às chamadas de vídeo

Usar efeitos de vídeo

Instalar o pacote

Desfoque em segundo plano

Substituição de tela de fundo por uma imagem

Usar efeitos de vídeo

Desfoque em segundo plano

Usar efeitos de vídeo

Desfoque em segundo plano

Usar efeitos de vídeo

Desfoque em segundo plano

Próximas etapas

Recursos adicionais