Share via

Aggiunta di effetti visivi a una videochiamata

  • Articolo

Importante

La funzionalità descritta in questo articolo è attualmente disponibile in anteprima pubblica. Questa versione di anteprima viene fornita senza un contratto di servizio e non è consigliabile per i carichi di lavoro di produzione. Alcune funzionalità potrebbero non essere supportate o potrebbero presentare funzionalità limitate. Per altre informazioni, vedere le Condizioni supplementari per l'uso delle anteprime di Microsoft Azure.

Importante

Gli effetti video per chiamate sono disponibili a partire dalla versione di anteprima pubblica 1.10.0-beta.1 di Calling SDK. Assicurarsi di usare questo o un SDK più recente quando si usano gli effetti video.

Nota

Questa API viene fornita come anteprima ('beta') per gli sviluppatori e può cambiare in base al feedback ricevuto.

Nota

Questa libreria 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).

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.

Azure Communication Calling SDK consente di creare effetti video che altri utenti su una chiamata possono visualizzare. Ad esempio, per un utente che esegue Servizi di comunicazione di Azure chiamata tramite WebJS SDK è ora possibile abilitare che l'utente possa attivare la sfocatura dello sfondo. Quando la sfocatura dello sfondo è abilitata, un utente può sentirsi più a proprio agio nell'eseguire una videochiamata che il video di output mostra solo un utente e tutti gli altri contenuti sono sfocati.

Prerequisiti

Installare Servizi di comunicazione di Azure Calling SDK

  • È necessario un account Azure con una sottoscrizione attiva. Per informazioni su come creare un account Azure, vedere Creare gratuitamente un account Azure.
  • Node.js sono consigliate le versioni LTS (Long Term Support) attive.
  • Una risorsa attiva di Servizi di comunicazione. Creare una risorsa di Servizi di comunicazione.
  • Token di accesso utente per creare un'istanza di un client di chiamata. Vedere come creare e gestire i token di accesso utente. È anche possibile usare l'interfaccia della riga di comando di Azure ed eseguire il comando con il stringa di connessione per creare un utente e un token di accesso. È necessario recuperare stringa di connessione dalla risorsa tramite portale di Azure.
  • La libreria client di Chiamata di comunicazione di Azure è configurata e configurata correttamente (https://www.npmjs.com/package/@azure/communication-calling).

Esempio di uso dell'interfaccia della riga di comando di Azure per

az communication identity token issue --scope voip --connection-string "yourConnectionString"

Per informazioni dettagliate sull'uso dell'interfaccia della riga di comando, vedere Usare l'interfaccia della riga di comando di Azure per creare e gestire i token di accesso.

Installare l'SDK per gli effetti chiamante

Usare il comando 'npm install' per installare Azure Communication Calling Effects SDK per JavaScript.

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

Per altri dettagli sugli effetti di comunicazione chiamante, visitare la pagina del pacchetto npm.

Effetti video supportati:

Attualmente gli effetti video supportano la seguente capacità:

  • Sfocatura dello sfondo
  • Sostituire lo sfondo con un'immagine personalizzata

Modello di classe:

Nome Descrizione
BackgroundBlurEffect Classe di effetto sfocatura dello sfondo.
BackgroundReplacementEffect Sostituzione dello sfondo con la classe dell'effetto immagine.

Per usare gli effetti video con la libreria client di Chiamate di comunicazione di Azure, dopo aver creato localmenteVideoStream, è necessario ottenere l'API della funzionalità VideoEffects di da LocalVideoStream.

Esempi di codice

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