Hinzufügen visueller Effekte zu einem Videoanruf
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
- Ein Azure-Konto mit einem aktiven Abonnement ist erforderlich. Informationen zum Erstellen eines Azure-Kontos finden Sie kostenlos unter Erstellen eines Azure-Kontos.
- Für Node.js werden aktive LTS-Versionen (Long Term Support) empfohlen.
- Eine aktive Communication Services-Ressource. Erstellen Sie eine Communication Services-Ressource.
- Ein Benutzerzugriffstoken zum Instanziieren eines Anrufclients. Erfahren Sie mehr über das Erstellen und Verwalten von Benutzerzugriffstoken. Sie können auch die Azure CLI verwenden und den Befehl mit Ihrer Verbindungszeichenfolge ausführen, um einen Benutzer und ein Zugriffs-Token zu erstellen. (Die Verbindungszeichenfolge muss von der Ressource über das Azure-Portal abgerufen werden.)
- Die Clientbibliothek für Azure Communication Calling ist ordnungsgemäß eingerichtet und konfiguriert (https://www.npmjs.com/package/@azure/communication-calling).
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();