Share via

Hinzufügen visueller Effekte zu einem Videoanruf

  • Artikel

Wichtig

Die in diesem Artikel beschriebenen Funktionen befinden sich derzeit in der öffentlichen Vorschau. Diese Vorschauversion wird ohne Vereinbarung zum Servicelevel bereitgestellt und ist nicht für Produktionsworkloads vorgesehen. Manche Features werden möglicherweise nicht unterstützt oder sind nur eingeschränkt verwendbar. Weitere Informationen finden Sie unter Zusätzliche Nutzungsbestimmungen für Microsoft Azure-Vorschauen.

Wichtig

Die Videoeffekte für Anrufe sind ab der Public Preview-Version 1.10.0-beta.1 des Calling SDK verfügbar. Stellen Sie sicher, dass Sie dieses oder ein neueres SDK nutzen, wenn Sie Videoeffekte verwenden.

Hinweis

Diese API wird als Vorschauversion (Betaversion) für Entwickler bereitgestellt und kann sich je nach dem erhaltenen Feedback ändern.

Hinweis

Diese Bibliothek für Anrufe kann nicht eigenständig verwendet werden und funktioniert nur, wenn sie mit der Telefonie-Clientbibliothek für WebJS von Azure Communication Services (https://www.npmjs.com/package/@azure/communication-calling) verwendet wird.

Hinweis

Die Browserunterstützung für das Erstellen von Videohintergrundeffekten ist derzeit auf Chrome und den Edge-Desktopbrowser (Windows und Mac) sowie auf Mac Safari Desktop beschränkt.

Mit dem Azure Communication Calling SDK können Sie Videoeffekte erstellen, die andere Benutzer in einem Anruf sehen können. Beispielsweise können Sie für einen Benutzer, der Azure Communication Services-Aufrufe mit dem WebJS SDK ausführt, jetzt aktivieren, dass der Benutzer den Weichzeichner im Hintergrund aktivieren kann. Wenn der Weichzeichner des Hintergrunds aktiviert ist, kann sich ein Benutzer beim Ausführen eines Videoanrufs wohler fühlen, da das Ausgabevideo nur den Benutzer anzeigt und alle anderen Inhalte im Hintergrund verschwommen sind.

Voraussetzungen

Installieren Sie das Azure Communication Services Calling SDK

Beispiel für die Verwendung der Azure CLI zum

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

Ausführliche Informationen zur Verwendung der CLI finden Sie unter Verwenden der Azure CLI zum Erstellen und Verwalten von Zugriffstoken.

Installieren des SDK für Calling-Effekte

Verwenden Sie den Befehl „npm install“, um das Azure Communication Services Effects SDK für JavaScript zu installieren.

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

Ausführlichere Informationen finden Sie auf der npm-Paketseite für Anrufkommunikationseffekte.

Unterstützte Videoeffekte:

Derzeit unterstützen die Videoeffekte die folgende Möglichkeit:

  • Verschwommener Hintergrund
  • Ersetzen des Hintergrunds durch ein benutzerdefiniertes Bild

Klassenmodell:

Name Beschreibung
BackgroundBlurEffect Die Effektklasse der Hintergrund-Weichzeichner.
BackgroundReplacementEffect Das Ersetzen des Hintergrunds mit der Bildeffektklasse.

Um Videoeffekte mit der Azure Communication Calling-Clientbibliothek zu verwenden, müssen Sie, nachdem Sie einen LocalVideoStream erstellt haben, die VideoEffects-Feature-API aus dem LocalVideoStream abrufen.

Codebeispiele

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