Início Rápido: Adicionar efeitos de vídeo às suas chamadas de vídeo

Artigo
08/18/2023

Pode utilizar a funcionalidade Efeitos de vídeo para adicionar efeitos ao seu vídeo em chamadas de vídeo. Esta funcionalidade permite que os programadores criem efeitos visuais em segundo plano e substituição de vídeo em segundo plano na experiência de chamada. O desfocagem de fundo fornece aos utilizadores o mecanismo para remover distrações por trás de um participante para que os participantes possam comunicar sem atividade disruptiva ou informações confidenciais em segundo plano. Isto é especialmente útil no contexto da telesaúde, em que um fornecedor ou paciente pode querer ocultar o ambiente para proteger informações confidenciais ou informações pessoais identificáveis. O desfocagem de fundo pode ser aplicado em todos os cenários de compromissos virtuais, incluindo telebancamento e audições virtuais, para proteger a privacidade dos utilizadores. Além da confidencialidade melhorada, o desfocagem de fundo permite uma maior criatividade da expressão, permitindo que os utilizadores carreguem fundos personalizados para alojar uma experiência de chamada mais divertida e personalizada.

Nota

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

Utilizar efeitos de vídeo

Instalar o pacote

Utilize o npm install comando para instalar o SDK de Efeitos do Azure Communication Services para JavaScript.

Importante

Este início rápido utiliza a versão do SDK de Chamadas dos Serviços de Comunicação do 1.13.1 Azure (ou superior) e a versão do SDK de Efeitos de Chamada do Azure Communication Services superior ou equil a 1.0.1.

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

Veja aqui para obter mais detalhes sobre a página do pacote npm efeitos de commmunicação de chamadas.

Nota

Atualmente, o suporte do browser para criar efeitos de fundo de vídeo só é suportado no Chrome e no Browser de Ambiente de Trabalho do Edge (Windows e Mac) e no Mac Safari Desktop.

Nota

Atualmente, existem dois efeitos de vídeo disponíveis:

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

Para utilizar efeitos de vídeo com o SDK de Chamadas de Comunicação do Azure, depois de criar um LocalVideoStream, tem de obter a VideoEffects API de funcionalidades para LocalVideoStream iniciar/parar 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
});

Desfocagem de fundo

// 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 fundo por uma imagem

Tem de fornecer o URL da imagem que pretende como fundo para este efeito.

Importante

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

Nota

Os formatos de imagem suportados atuais são: png, jpg, jpeg, tiff, bmp.

A proporção suportada atual é 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); 
}

A alteração da imagem para este efeito pode ser feita ao transmiti-la através do método de configuração:

const newBackgroundImage = 'https://linkToNewImageFile'; 

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

A mudança de efeitos pode ser feita com o mesmo método na api de funcionalidade de efeitos de vídeo:

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

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

Em qualquer altura, se quiser verificar que efeitos estão ativos, pode utilizar a activeEffects propriedade . A activeEffects propriedade devolve uma matriz com os nomes dos efeitos ativos atuais e devolve uma matriz vazia se não existirem efeitos ativos.

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

Para parar efeitos:

await videoEffectsFeatureApi.stopEffects();

Nota

Para utilizar efeitos de vídeo no SDK de Chamadas para iOS, é transferido um modelo de machine learning para o dispositivo do cliente. Recomendamos que reveja as notas de privacidade na sua aplicação e as atualize em conformidade, se necessário.

Pode utilizar a funcionalidade Efeitos de Vídeo para adicionar efeitos ao seu vídeo em chamadas de vídeo. O desfocagem de fundo fornece aos utilizadores o mecanismo para remover distrações por trás de um participante para que os participantes possam comunicar sem atividade disruptiva ou informações confidenciais em segundo plano. Esta funcionalidade é especialmente útil no contexto da telesaúde, em que um fornecedor ou paciente pode querer ocultar o ambiente para proteger informações confidenciais ou dados pessoais. O desfocagem de fundo pode ser aplicado em todos os cenários de compromissos virtuais, incluindo telebancamento e audições virtuais, para proteger a privacidade dos utilizadores.

Utilizar efeitos de vídeo

Nota

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

Atualmente, existe um Efeito de Vídeo disponível: Desfocagem de Fundo.

O LocalVideoEffectsFeature objeto tem a seguinte estrutura de API:

enable: ativa um Efeito de Vídeo na LocalVideoStream instância.
disable: desativa um Efeito de Vídeo na LocalVideoStream instância.
isSupported: indica se é suportado um Efeito de Vídeo na LocalVideoStream instância.
onVideoEffectEnabled: evento que é acionado quando um Efeito de Vídeo foi ativado com êxito.
onVideoEffectDisabled: evento que é acionado quando um Efeito de Vídeo foi desativado com êxito.
onVideoEffectError: evento que é acionado quando uma operação efeito de vídeo falha.

Assim que tiver o LocalVideoEffectsFeature objeto, pode subscrever os eventos, os eventos têm os seguintes delegados: didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

Para utilizar efeitos de vídeo com o SDK de Chamadas de Comunicação do Azure, depois de criar um LocalVideoStream, tem de obter a VideoEffects API de funcionalidade do LocalVideoStream para ativar/desativar 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 utilizar as APIs para ativar e desativar efeitos de vídeo:

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

Desfocagem de fundo

O Desfocagem de Fundo é um Efeito de Vídeo que permite desfocar o fundo de uma pessoa. Para utilizar o Efeito de Vídeo em Segundo Plano, tem de obter uma LocalVideoEffectsFeature funcionalidade a partir de um LocalVideoStream.

Crie um novo objeto Efeito de Vídeo de Desfocagem de Fundo:

@State var backgroundBlurVideoEffect: BackgroundBlurEffect?

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

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

Para desativar o Efeito de Vídeo de Desfocagem de Fundo:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Nota

Para utilizar efeitos de vídeo no SDK de Chamadas para Android, é transferido um modelo de machine learning para o dispositivo do cliente. Recomendamos que reveja as notas de privacidade na sua aplicação e as atualize em conformidade, se necessário.

Este início rápido baseia-se no Início Rápido: Adicionar chamadas de vídeo 1:1 à sua aplicação para Android.

Utilizar efeitos de vídeo

Nota

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

Atualmente, existe um Efeito de Vídeo disponível: Desfocagem de Fundo.

O VideoEffectsLocalVideoStreamFeature objeto tem a seguinte estrutura de API:

enableEffect: ativa um Efeito de Vídeo na LocalVideoStream instância.
disableEffect: desativa um Efeito de Vídeo na LocalVideoStream instância.
OnVideoEffectEnabledListener: evento que é acionado quando um Efeito de Vídeo foi ativado com êxito.
OnVideoEffectDisabledListener: evento que é acionado quando um Efeito de Vídeo foi desativado com êxito.
OnVideoEffectErrorListener: evento que é acionado quando uma operação efeito de vídeo falha.

Os VideoEffectEnabledEventobjetos e VideoEffectDisabledEventVideoEffectErrorEvent têm a seguinte estrutura de API:

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

Assim que tiver o VideoEffectsLocalVideoStreamFeature objeto, pode subscrever os 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 utilizar as APIs para ativar e desativar efeitos de vídeo:

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

Desfocagem de fundo

O Desfocagem de Fundo é um Efeito de Vídeo que permite desfocar o fundo de uma pessoa. Para utilizar o Efeito de Vídeo em Segundo Plano, tem de obter uma VideoEffectsLocalVideoStreamFeature funcionalidade a partir de um LocalVideoStream.

Para ativar o Efeito de Vídeo de Desfocagem de Fundo:

Crie um método que obtenha a VideoEFfects Funcionalidade subscreve os 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 Desfocagem de Fundo:

BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();

Chamar EnableEffect no videoEffectsFeature objeto:

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

Para desativar o Efeito de Vídeo de Desfocagem de Fundo:

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

Nota

Para utilizar efeitos de vídeo no SDK de Chamadas do Windows, é transferido um modelo de machine learning para o dispositivo do cliente. Recomendamos que reveja as notas de privacidade na sua aplicação e as atualize em conformidade, se necessário.

Este início rápido baseia-se no Início Rápido: Adicionar chamadas de vídeo 1:1 à sua aplicação para Windows.

Utilizar efeitos de vídeo

Atualmente, existe um Efeito de Vídeo disponível: Desfocagem de Fundo.

O VideoEffectsLocalVideoStreamFeature objeto tem a seguinte estrutura de API:

EnableEffect: ativa um Efeito de Vídeo na LocalVideoStream instância.
DisableEffect: desativa um Efeito de Vídeo na LocalVideoStream instância.
VideoEffectEnabled: evento que é acionado quando um Efeito de Vídeo foi ativado com êxito.
VideoEffectDisabledListener: evento que é acionado quando um Efeito de Vídeo foi desativado com êxito.
VideoEffectErrorListener: evento que é acionado quando uma operação efeito de vídeo falha.

Os VideoEffectEnabledEventobjetos e VideoEffectDisabledEventVideoEffectErrorEvent têm a seguinte estrutura de API:

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

Assim que tiver o VideoEffectsLocalVideoStreamFeature objeto, pode subscrever os eventos:

Para utilizar Efeitos de Vídeo com o SDK de Chamadas de Comunicação do Azure, adicione as variáveis ao MainPage.

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

Depois de criar um LocalVideoStream, tem de obter a VideoEffects API de funcionalidade 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 utilizar as APIs para ativar e desativar efeitos de vídeo:

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

Desfocagem de fundo

Para ativar o Efeito de Vídeo de Desfocagem de Fundo:

Adicione a BackgroundBlurEffect instância à Página Principal.

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

Crie um método que obtenha a VideoEFfects Funcionalidade subscreve os 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);
}

Ative e desative o efeito Desfocagem de Fundo:

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óximos passos

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

Veja o nosso exemplo de hero de chamadas
Introdução à Biblioteca de IU
Saiba mais sobre as capacidades do SDK de Chamadas
Saiba mais sobre como funciona a chamada

Início Rápido: Adicionar efeitos de vídeo às suas chamadas de vídeo

Utilizar efeitos de vídeo

Instalar o pacote

Desfocagem de fundo

Substituição de fundo por uma imagem

Utilizar efeitos de vídeo

Desfocagem de fundo

Utilizar efeitos de vídeo

Desfocagem de fundo

Utilizar efeitos de vídeo

Desfocagem de fundo

Próximos passos

Recursos adicionais