Share via

Guida introduttiva: Aggiungere effetti video alle videochiamate

  • Articolo

È possibile usare la funzionalità Effetti video per aggiungere effetti al video nelle videochiamate. Questa funzionalità consente agli sviluppatori di creare effetti visivi di sfondo e sostituzione video in background nell'esperienza di chiamata. La sfocatura dello sfondo fornisce agli utenti il meccanismo per rimuovere le distrazioni dietro un partecipante in modo che i partecipanti possano comunicare senza attività di disturbo o informazioni riservate in background. Questo è particolarmente utile il contesto della telehealth, in cui un provider o un paziente potrebbe voler nascondere l'ambiente circostante per proteggere le informazioni sensibili o le informazioni personali. La sfocatura dello sfondo può essere applicata in tutti gli scenari di appuntamenti virtuali, tra cui telebanking e audizioni virtuali, per proteggere la privacy degli utenti. Oltre a una maggiore riservatezza, la sfocatura dello sfondo consente una maggiore creatività dell'espressione, consentendo agli utenti di caricare sfondi personalizzati per ospitare un'esperienza di chiamata più divertente e personalizzata.

Nota

La libreria degli effetti chiamanti non può essere usata in modalità autonoma e può funzionare solo se usata con la libreria client di chiamata di comunicazione di Azure per WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Uso degli effetti video

Installare il pacchetto

Usare il npm install comando per installare Servizi di comunicazione di Azure Effects SDK per JavaScript.

Importante

Questa guida introduttiva usa la versione Servizi di comunicazione di Azure Calling SDK di 1.13.1 (o versione successiva) e la versione Servizi di comunicazione di Azure Calling Effects SDK maggiore o equil a 1.0.1.

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

Vedere qui per altri dettagli sulla pagina del pacchetto npm degli effetti di comunicazione chiamante.

Nota

Attualmente il supporto del browser per la creazione di effetti di sfondo video è supportato solo in Chrome e Edge Desktop Browser (Windows e Mac) e Mac Safari Desktop.

Nota

Attualmente sono disponibili due effetti video:

  • Sfocatura dello sfondo
  • Sostituzione dello sfondo con un'immagine (le proporzioni devono essere compatibili con 16:9)

Per usare gli effetti video con Azure Communication Calling SDK, dopo aver creato un LocalVideoStream, è necessario ottenere l'API VideoEffects della funzionalità di LocalVideoStream per avviare/arrestare gli effetti video:

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

Sfocatura dello sfondo

// 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); 
}

Sostituzione dello sfondo con un'immagine

È necessario specificare l'URL dell'immagine desiderata come sfondo a questo effetto.

Importante

Il startEffects metodo avrà esito negativo se l'URL non è di un'immagine o non è raggiungibile o illeggibile.

Nota

I formati di immagine supportati correnti sono: png, jpg, jpeg, tiff, bmp.

Le proporzioni supportate correnti sono 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); 
}

La modifica dell'immagine per questo effetto può essere eseguita passandola tramite il metodo configure:

const newBackgroundImage = 'https://linkToNewImageFile'; 

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

Gli effetti di commutazione possono essere eseguiti usando lo stesso metodo nell'API delle funzionalità effetti video:

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

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

In qualsiasi momento se si desidera controllare quali effetti sono attivi, è possibile utilizzare la activeEffects proprietà . La activeEffects proprietà restituisce una matrice con i nomi degli effetti attivi correnti e restituisce una matrice vuota se non sono attivi effetti.

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

Per interrompere gli effetti:

await videoEffectsFeatureApi.stopEffects();

Nota

Per usare Video Effects in iOS Calling SDK, viene scaricato un modello di Machine Learning nel dispositivo del cliente. È consigliabile esaminare le note sulla privacy nell'applicazione e aggiornarle di conseguenza, se necessario.

È possibile usare la funzionalità Effetti video per aggiungere effetti al video nelle videochiamate. La sfocatura dello sfondo fornisce agli utenti il meccanismo per rimuovere le distrazioni dietro un partecipante in modo che i partecipanti possano comunicare senza attività di disturbo o informazioni riservate in background. Questa funzionalità è particolarmente utile per il contesto della telehealth, in cui un provider o un paziente potrebbe voler nascondere l'ambiente circostante per proteggere le informazioni riservate o i dati personali. La sfocatura dello sfondo può essere applicata in tutti gli scenari di appuntamenti virtuali, tra cui telebanking e audizioni virtuali, per proteggere la privacy degli utenti.

Uso degli effetti video

Nota

Il supporto degli effetti video su iOS è limitato alle due versioni principali più recenti di iOS. Ad esempio, quando viene rilasciata una nuova versione principale di iOS, il requisito di iOS è la nuova versione e le versioni più recenti che l'hanno preceduta.

Attualmente è disponibile un effetto video: sfocatura dello sfondo.

L'oggetto LocalVideoEffectsFeature ha la struttura API seguente:

  • enable: abilita un effetto video sull'istanza LocalVideoStream di .
  • disable: disabilita un effetto video sull'istanza LocalVideoStream di .
  • isSupported: indica se un effetto video è supportato nell'istanza LocalVideoStream di .
  • onVideoEffectEnabled: evento attivato quando un effetto video è stato abilitato correttamente.
  • onVideoEffectDisabled: evento attivato quando un effetto video è stato disabilitato correttamente.
  • onVideoEffectError: evento attivato quando un'operazione effetto video ha esito negativo.

Dopo aver ottenuto l'oggetto LocalVideoEffectsFeature , è possibile sottoscrivere gli eventi, gli eventi hanno i delegati seguenti: didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

Per usare Gli effetti video con Azure Communication Calling SDK, dopo aver creato un LocalVideoStream, è necessario ottenere l'API VideoEffects di funzionalità di LocalVideoStream per abilitare/disabilitare Gli effetti video:

// 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 iniziare a usare le API per abilitare e disabilitare Gli effetti video:

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

Sfocatura dello sfondo

Sfocatura sfondo è un effetto video che consente di sfocatura dello sfondo di una persona. Per usare l'effetto video in background, è necessario ottenere una LocalVideoEffectsFeature funzionalità da un oggetto valido LocalVideoStream.

  • Creare un nuovo oggetto Effetto video sfocatura sfondo:
@State var backgroundBlurVideoEffect: BackgroundBlurEffect?
  • Controllare se BackgroundBlurEffect è supportato e chiamare Enable l'oggetto videoEffectsFeature :
if((localVideoEffectsFeature.isSupported(effect: backgroundBlurVideoEffect)) != nil)
{
    localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
}

Per disabilitare l'effetto blur video di sfondo:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Nota

Per usare Gli effetti video in Android Calling SDK, viene scaricato un modello di Machine Learning nel dispositivo del cliente. È consigliabile esaminare le note sulla privacy nell'applicazione e aggiornarle di conseguenza, se necessario.

È possibile usare la funzionalità Effetti video per aggiungere effetti al video nelle videochiamate. La sfocatura dello sfondo fornisce agli utenti il meccanismo per rimuovere le distrazioni dietro un partecipante in modo che i partecipanti possano comunicare senza attività di disturbo o informazioni riservate in background. Questa funzionalità è particolarmente utile per il contesto della telehealth, in cui un provider o un paziente potrebbe voler nascondere l'ambiente circostante per proteggere le informazioni riservate o i dati personali. La sfocatura dello sfondo può essere applicata in tutti gli scenari di appuntamenti virtuali, tra cui telebanking e audizioni virtuali, per proteggere la privacy degli utenti.

Questa guida introduttiva si basa su Avvio rapido: Aggiungere videochiamate 1:1 all'app per Android.

Uso degli effetti video

Nota

Il supporto degli effetti video in Android è limitato alle ultime quattro versioni principali di Android. Ad esempio, quando viene rilasciata una nuova versione principale di Android, il requisito android è la nuova versione e le tre versioni più recenti che la precedono.

Attualmente è disponibile un effetto video: sfocatura dello sfondo.

L'oggetto VideoEffectsLocalVideoStreamFeature ha la struttura API seguente:

  • enableEffect: abilita un effetto video sull'istanza LocalVideoStream di .
  • disableEffect: disabilita un effetto video sull'istanza LocalVideoStream di .
  • OnVideoEffectEnabledListener: evento attivato quando un effetto video è stato abilitato correttamente.
  • OnVideoEffectDisabledListener: evento attivato quando un effetto video è stato disabilitato correttamente.
  • OnVideoEffectErrorListener: evento attivato quando un'operazione effetto video ha esito negativo.

Gli VideoEffectEnabledEventoggetti , VideoEffectDisabledEvent e VideoEffectErrorEvent hanno la struttura API seguente:

  • getVideoEffectName: ottiene il nome dell'effetto video che ha attivato l'evento.

Dopo aver ottenuto l'oggetto VideoEffectsLocalVideoStreamFeature , è possibile sottoscrivere gli eventi:

Per usare Gli effetti video con Azure Communication Calling SDK, dopo aver creato un LocalVideoStream, è necessario ottenere l'API VideoEffects di funzionalità di LocalVideoStream per abilitare/disabilitare Gli effetti video:

// 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 iniziare a usare le API per abilitare e disabilitare Gli effetti video:

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

Sfocatura dello sfondo

Sfocatura sfondo è un effetto video che consente di sfocatura dello sfondo di una persona. Per usare l'effetto video in background, è necessario ottenere una VideoEffectsLocalVideoStreamFeature funzionalità da un oggetto valido LocalVideoStream.

Per abilitare effetto blur video di sfondo:

  • Creare un metodo che ottiene la VideoEFfects funzionalità sottoscrive gli eventi:
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);
}
  • Creare un nuovo oggetto Effetto video sfocatura sfondo:
BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
  • Chiamare EnableEffect sull'oggetto videoEffectsFeature :
public void enableBackgroundBlur() {
    videoEffectsFeature.enableEffect(backgroundBlurEffect);
}

Per disabilitare l'effetto blur video di sfondo:

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

Nota

Per usare Gli effetti video in Windows Calling SDK, viene scaricato un modello di Machine Learning nel dispositivo del cliente. È consigliabile esaminare le note sulla privacy nell'applicazione e aggiornarle di conseguenza, se necessario.

È possibile usare la funzionalità Effetti video per aggiungere effetti al video nelle videochiamate. Il blur in background fornisce agli utenti il meccanismo per rimuovere le distrazioni dietro un partecipante in modo che i partecipanti possano comunicare senza attività di disturbo o informazioni riservate in background. Questa funzionalità è particolarmente utile il contesto della telehealth, in cui un provider o un paziente potrebbe voler nascondere l'ambiente circostante per proteggere le informazioni sensibili o i dati personali. Il blur in background può essere applicato in tutti gli scenari di appuntamenti virtuali, tra cui telebanking e ascolti virtuali, per proteggere la privacy degli utenti.

Questa guida introduttiva si basa sulla guida introduttiva: Aggiungere 1:1 video chiamante all'app per Windows.

Uso di effetti video

Attualmente è disponibile un effetto video: blur di sfondo.

L'oggetto VideoEffectsLocalVideoStreamFeature ha la struttura API seguente:

  • EnableEffect: abilita un effetto video nell'istanza LocalVideoStream .
  • DisableEffect: disabilita un effetto video nell'istanza LocalVideoStream .
  • VideoEffectEnabled: evento attivato quando è stato abilitato correttamente un effetto video.
  • VideoEffectDisabledListener: evento attivato quando un effetto video è stato disabilitato correttamente.
  • VideoEffectErrorListener: evento attivato quando un'operazione di effetto video ha esito negativo.

Gli VideoEffectEnabledEventoggetti e VideoEffectErrorEventVideoEffectDisabledEvent hanno la struttura API seguente:

  • VideoEffectName: ottiene il nome dell'effetto video che ha attivato l'evento.

Dopo aver ottenuto l'oggetto VideoEffectsLocalVideoStreamFeature , è possibile sottoscrivere gli eventi:

Per usare Video Effects con Azure Communication Calling SDK, aggiungere le variabili a MainPage.

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

Dopo aver creato un LocalVideoStreamoggetto , è necessario ottenere l'API VideoEffects di funzionalità dell'oggetto LocalVideoStream per abilitare/disabilitare Gli effetti video.

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 iniziare a usare le API per abilitare e disabilitare Gli effetti video:

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

Sfocatura dello sfondo

Blur di sfondo è un effetto video che consente la sfocatura dello sfondo di una persona. Per usare Effetto video in background, è necessario ottenere una VideoEffectsLocalVideoStreamFeature funzionalità da un oggetto valido LocalVideoStream.

Per abilitare l'effetto video blur in background:

  • Aggiungere l'istanza BackgroundBlurEffect a MainPage.
public sealed partial class MainPage : Page
{
    private BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
}
  • Creare un metodo che ottiene la sottoscrizione di VideoEFfects Feature agli eventi:
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);
}
  • Abilitare e disabilitare l'effetto Blur in background:
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);
        }
    }
}

Passaggi successivi

Per altre informazioni, vedere gli articoli seguenti: