Schnellstart: Hinzufügen von Videoeffekten zu Videoanrufen

2025-03-03

Mit dem Feature „Videoeffekte“ können Benutzende visuelle Effekte in ihre Videoanrufe integrieren. So haben Entwickelnde die Möglichkeit, visuelle Hintergrundeffekte und Hintergrundvideoersatz in ihre Anruferfahrung zu integrieren. Die Hintergrundunschärfe bietet Benutzenden eine Möglichkeit, Ablenkungen hinter sich zu verstecken und so die Kommunikation zu erleichtern, ohne dass störende Aktivitäten oder vertrauliche Informationen im Hintergrund zu sehen sind. Dies ist besonders im Bereich der Telemedizin hilfreich, wo Anbieter oder Patienten ihre Umgebung verschleiern möchten, um vertrauliche oder personenbezogene Daten zu schützen. Hintergrundunschärfe kann in verschiedenen virtuellen Terminszenarien wie Telebanking und virtuellen Anhörungen angewendet werden, um die Privatsphäre der Benutzenden zu verbessern oder ein unordentliches Büro zu verbergen. Neben der Verbesserung der Vertraulichkeit ermöglicht die Hintergrundunschärfe mehr kreative Ausdrucksmöglichkeiten, da die Benutzende benutzerdefinierte Hintergründe hochladen können, um das Anruferlebnis noch ansprechender und persönlicher zu gestalten. Dies ermöglicht mehr kreative Ausdrucksmöglichkeiten, da die Benutzenden benutzerdefinierte Hintergründe hochladen können, um ein unterhaltsameres und individuelleres Anruferlebnis zu ermöglichen.

Hinweis

Die Effektbibliothek 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.

Verwenden von Videoeffekten

Installieren des Pakets

Wichtig

Hintergrundunschärfe und Hintergrundersatz für Webdesktopbrowser sind allgemein verfügbar. In diesem Schnellstart wird die Calling-SDK-Version 1.13.1 (oder höher) von Azure Communication Services und die Calling Effects-SDK-Version größer oder gleich 1.0.1 von Azure Communication Services verwendet. Die Desktopbrowserunterstü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.

Hinweis

Hintergrundunschärfe und -ersatz für die mobilen Android Chrome- und Android Edge-Browser sind ab Build 1.29.1 und neueren Beta-WebJS SDK-Versionen in der öffentlichen Vorschau verfügbar.

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

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

Hinweis

Derzeit stehen zwei Videoeffekte zur Verfügung:

Verschwommener Hintergrund
Ersetzen des Hintergrunds durch ein Bild (das Seitenverhältnis sollte 16:9 betragen, um kompatibel zu sein)

Um Videoeffekte mit dem Azure Communication Calling SDK verwenden zu können, müssen Sie nach dem Erstellen eines lokalen Videostreams (LocalVideoStream) die VideoEffects-Feature-API des lokalen Videostreams (LocalVideoStream) abrufen, um Videoeffekte zu starten oder zu beenden:

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

Verschwommener Hintergrund

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

Ersetzen des Hintergrunds durch ein Bild

Für diesen Effekt muss die URL des Bilds angegeben werden, das als Hintergrund verwendet werden soll.

Wichtig

Die Methode startEffects ist nicht erfolgreich, wenn die URL kein Bild ist oder nicht erreichbar oder nicht lesbar ist.

Hinweis

Aktuell werden folgende Bildformate unterstützt: PNG, JPG, JPEG, TIFF und BMP.

Das aktuelle unterstützte Seitenverhältnis ist 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); 
}

Wenn Sie das Bild für diesen Effekt ändern möchten, können Sie das gewünschte Bild über die Methode „configure“ übergeben:

const newBackgroundImage = 'https://linkToNewImageFile'; 

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

Zum Wechseln zwischen Effekten kann die gleiche Methode für die API des Features „Videoeffekte“ verwendet werden:

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

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

Wenn Sie jederzeit überprüfen möchten, welche Effekte aktiv sind, können Sie die Eigenschaft activeEffects verwenden. Die Eigenschaft activeEffects gibt ein Array mit den Namen der aktuellen aktiven Effekte und ein leeres Array zurück, wenn keine Effekte aktiv sind.

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

Effekte können wie folgt beendet werden:

await videoEffectsFeatureApi.stopEffects();

Hinzufügen eines Milchglashintergrundeffekts

Milchglashintergründe kombinieren die Privatsphäre eines unscharfen Hintergrunds mit der individuellen Anpassung Ihres ausgewählten Bildes, um einen raffinierten Effekt zu erzeugen, der an Milchglasfenster erinnert. Um diesen Effekt zu erzielen, laden Sie ein transparentes PNG-Bild als benutzerdefinierten Hintergrund hoch. Dieses Bild kann Ihr Firmenlogo oder ein einzigartiges Design sein. Der Milchglaseffekt lässt die transparenten Bereiche Ihres Bildes verschwimmen, während die Grafik als Teil des Hintergrunds erhalten bleibt. Um den Milchglaseffekt zu verwenden, müssen Sie die Version 1.1.3 oder höher des Pakets der Bibliothek mit Anrufeffekten von Azure Communication für JavaScript verwenden.

Um optimale Ergebnisse beim Vorbereiten des PNG-Bilds mit Milchglaseffekt zu erzielen, beachten Sie Folgendes:

Auflösung: Verwenden Sie 1920 x 1080 Pixel für einen qualitativ hochwertigen Hintergrund.
Vermeiden Sie volle Deckkraft: Farbige Inhalte wie Logos sehen mit wenig Transparenz am besten aus. Wir empfehlen eine Deckkraft von 75 %
Entfokussierung des Bilds: Ein gaußscher Weichzeichner mit Radius 2 eignet sich gut, um ein wenig Tiefenschärfe in der Szene zu simulieren.
Schablone mittelgrauer Vordergrund: Für Graustufen-PNGs mit Transparenz empfehlen wir, das gesamte Bild in mittelgrau (Wert 128) zu halten, damit das Transparenzmuster sowohl auf hellen als auch auf dunklen Hintergründen sichtbar ist.

Hinweis

Um Videoeffekte für das iOS Calling SDK zu verwenden, wird ein Machine Learning-Modell auf das Gerät des Kunden oder der Kundin heruntergeladen. Wir empfehlen Ihnen, die Datenschutzhinweise in Ihrer Anwendung zu lesen und sie bei Bedarf entsprechend zu aktualisieren.

Sie können das Feature „Videoeffekte“ verwenden, um Ihr Video in Videoanrufen mit Effekten zu versehen. Durch Hintergrundunschärfe können Benutzer Ablenkungen hinter einem Teilnehmer entfernen. Dadurch können Teilnehmer kommunizieren, ohne dass im Hintergrund störende Aktivitäten oder vertrauliche Informationen zu sehen sind. Dieses Feature ist besonders im Kontext von Tele-Medizin nützlich, wenn ein Anbieter oder Patient seine Umgebung verschleiern möchte, um vertrauliche oder personenbezogene Daten zu schützen. Hintergrundunschärfe kann bei allen Arten von virtuellen Terminen angewendet werden, um die Privatsphäre der Benutzer zu schützen. Beispiele wären etwa Telebanking und virtuelle Anhörungen.

Verwenden von Videoeffekten

Hinweis

Die Unterstützung von Videoeffekten unter iOS ist auf die beiden letzten Hauptversionen von iOS beschränkt. Wenn z. B. eine neue Hauptversion von iOS veröffentlicht wird, entspricht die iOS-Anforderung der neuen Version und den letzten Versionen davor.

Derzeit ist ein Videoeffekt verfügbar: Weichzeichner für Hintergrund.

Das Objekt LocalVideoEffectsFeature weist die folgende API-Struktur auf:

enable: Aktiviert einen Videoeffekt für die Instanz LocalVideoStream.
disable: Deaktiviert einen Videoeffekt für die Instanz LocalVideoStream.
isSupported: Gibt an, ob ein Videoeffekt für die LocalVideoStream-Instanz unterstützt wird.
onVideoEffectEnabled: Ereignis, das ausgelöst wird, wenn ein Videoeffekt erfolgreich aktiviert wurde.
onVideoEffectDisabled: Ereignis, das ausgelöst wird, wenn ein Videoeffekt erfolgreich deaktiviert wurde.
onVideoEffectError: Ereignis, das ausgelöst wird, wenn ein Videoeffektvorgang fehlschlägt.

Sobald Sie über das LocalVideoEffectsFeature-Objekt verfügen, können Sie die Ereignisse abonnieren. Ereignisse verfügen über die folgenden Delegaten: didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

Um Videoeffekte mit dem Azure Communication Calling SDK verwenden zu können, müssen Sie nach dem Erstellen von LocalVideoStream die VideoEffects-Feature-API von LocalVideoStream abrufen, um Videoeffekte zu aktivieren/deaktivieren:

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

und beginnen Sie mit der Verwendung der APIs zum Aktivieren und Deaktivieren von Videoeffekten:

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

Verschwommener Hintergrund

Der Weichzeichner für den Hintergrund ist ein Videoeffekt, mit dem der Hintergrund einer Person weichgezeichnet wird. Um den Hintergrundvideoeffekt verwenden zu können, müssen Sie ein LocalVideoEffectsFeature-Feature aus einem gültigen LocalVideoStream abrufen.

Erstellen Sie ein neues Objekt für den Videoeffekt „Weichzeichner für Hintergrund“:

@State var backgroundBlurVideoEffect: BackgroundBlurEffect?

Überprüfen Sie, ob BackgroundBlurEffect unterstützt wird, und rufen Sie Enable für das videoEffectsFeature-Objekt auf:

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

So deaktivieren Sie den Videoeffekt „Weichzeichner für Hintergrund“:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Ersetzen des Hintergrunds

Das Ersetzen des Hintergrunds ist ein Videoeffekt, mit dem eine Person ihren eigenen benutzerdefinierten Hintergrund festlegen kann. Um diesen Effekt verwenden zu können, müssen Sie ein LocalVideoEffectsFeature-Feature aus einem gültigen LocalVideoStream abrufen.

Erstellen Sie ein neues Objekt für den Videoeffekt „Ersetzen des Hintergrunds“:

@State var backgroundReplacementVideoEffect: BackgroundReplacementEffect?

Legen Sie einen benutzerdefinierten Hintergrund fest, indem Sie das Bild durch einen Puffer übergeben.

let image = UIImage(named:"image.png")
guard let imageData = image?.jpegData(compressionQuality: 1.0) else {
return
}
backgroundReplacementVideoEffect.buffer = imageData

Überprüfen Sie, ob BackgroundReplacementEffect unterstützt wird, und rufen Sie Enable für das videoEffectsFeature-Objekt auf:

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

So deaktivieren Sie den Videoeffekt „Ersetzen des Hintergrunds“:

localVideoEffectsFeature.disable(effect: backgroundReplacementVideoEffect)

Hinweis

Um Videoeffekte für das Android Calling SDK zu verwenden, wird ein Machine Learning-Modell auf das Gerät des Kunden heruntergeladen. Wir empfehlen Ihnen, die Datenschutzhinweise in Ihrer Anwendung zu lesen und sie bei Bedarf entsprechend zu aktualisieren.

Diese Schnellstartanleitung baut auf Schnellstart: Hinzufügen von 1:1-Videoanrufen zu Ihrer App für Android auf.

Verwenden von Videoeffekten

Hinweis

Die Unterstützung von Videoeffekten unter Android ist auf die letzten vier Hauptversionen von Android beschränkt. Wenn z. B. eine neue Hauptversion von Android veröffentlicht wird, entspricht die Android-Anforderung der neuen Version und den drei letzten Versionen davor.

Derzeit ist ein Videoeffekt verfügbar: Weichzeichner für Hintergrund.

Das Objekt VideoEffectsLocalVideoStreamFeature weist die folgende API-Struktur auf:

enableEffect: Aktiviert einen Videoeffekt für die Instanz LocalVideoStream.
disableEffect: Deaktiviert einen Videoeffekt für die Instanz LocalVideoStream.
OnVideoEffectEnabledListener: Ereignis, das ausgelöst wird, wenn ein Videoeffekt erfolgreich aktiviert wurde.
OnVideoEffectDisabledListener: Ereignis, das ausgelöst wird, wenn ein Videoeffekt erfolgreich deaktiviert wurde.
OnVideoEffectErrorListener: Ereignis, das ausgelöst wird, wenn ein Videoeffektvorgang fehlschlägt.

Die Objekte VideoEffectEnabledEvent, VideoEffectDisabledEvent und VideoEffectErrorEvent verfügen über die folgende API-Struktur:

getVideoEffectName: Ruft den Namen des Videoeffekts ab, der das Ereignis ausgelöst hat.

Sobald Sie über das Objekt VideoEffectsLocalVideoStreamFeature verfügen, können Sie die Ereignisse abonnieren:

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

und beginnen Sie mit der Verwendung der APIs zum Aktivieren und Deaktivieren von Videoeffekten:

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

Verschwommener Hintergrund

Der Weichzeichner für den Hintergrund ist ein Videoeffekt, mit dem der Hintergrund einer Person weichgezeichnet wird. Um den Hintergrundvideoeffekt verwenden zu können, müssen Sie ein VideoEffectsLocalVideoStreamFeature-Feature aus einem gültigen LocalVideoStream abrufen.

So aktivieren Sie den Videoeffekt „Weichzeichner für Hintergrund“:

Erstellen Sie eine Methode, die das Feature VideoEFfects für die Ereignisse abruft:

private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
   Log.i("VideoEffects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEffects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEffects", "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);
}

Erstellen Sie ein neues Objekt für den Videoeffekt „Weichzeichner für Hintergrund“:

BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();

Rufen Sie EnableEffect für das Objekt videoEffectsFeature auf:

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

So deaktivieren Sie den Videoeffekt „Weichzeichner für Hintergrund“:

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

Ersetzen des Hintergrunds

Das Ersetzen des Hintergrunds ist ein Videoeffekt, mit dem der Hintergrund einer Person ersetzt wird. Um den Hintergrundvideoeffekt verwenden zu können, müssen Sie ein VideoEffectsLocalVideoStreamFeature-Feature aus einem gültigen LocalVideoStream abrufen.

So aktivieren Sie den Videoeffekt „Ersetzen des Hintergrunds“:

Erstellen Sie eine Methode, die das Feature VideoEFfects für die Ereignisse abruft:

private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
   Log.i("VideoEffects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEffects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEffects", "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);
}

Erstellen Sie ein neues Objekt für den Videoeffekt „Ersetzen des Hintergrunds“:

BackgroundReplacementEffect backgroundReplacementVideoEffect = new BackgroundReplacementEffect();

Legen Sie einen benutzerdefinierten Hintergrund fest, indem Sie das Bild durch einen Puffer übergeben.

//example of where we can get an image from, in this case, this is from assets in Android folder
InputStream inputStream = getAssets().open("image.jpg");
Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
byte[] data = stream.toByteArray();
ByteBuffer dataBuffer = ByteBuffer.allocateDirect(data.length);
dataBuffer.put(data);
dataBuffer.rewind();
backgroundReplacementVideoEffect.setBuffer(dataBuffer);

Rufen Sie EnableEffect für das Objekt videoEffectsFeature auf:

public void enableBackgroundReplacement() {
    videoEffectsFeature.enableEffect(backgroundReplacementVideoEffect);
}

So deaktivieren Sie den Videoeffekt „Ersetzen des Hintergrunds“:

public void disableBackgroundReplacement() {
    videoEffectsFeature.disableEffect(backgroundReplacementVideoEffect);
}

Hinweis

Um Videoeffekte für das Windows Calling SDK zu verwenden, wird ein Machine Learning-Modell auf das Gerät des Kunden heruntergeladen. Wir empfehlen Ihnen, die Datenschutzhinweise in Ihrer Anwendung zu lesen und sie bei Bedarf entsprechend zu aktualisieren.

Diese Schnellstartanleitung baut auf Schnellstart: Hinzufügen von 1:1-Videoanrufen zu Ihrer App für Windows auf.

Verwenden von Videoeffekten

Derzeit ist ein Videoeffekt verfügbar: Weichzeichner für Hintergrund.

Das Objekt VideoEffectsLocalVideoStreamFeature weist die folgende API-Struktur auf:

EnableEffect: Aktiviert einen Videoeffekt für die Instanz LocalVideoStream.
DisableEffect: Deaktiviert einen Videoeffekt für die Instanz LocalVideoStream.
VideoEffectEnabled: Ereignis, das ausgelöst wird, wenn ein Videoeffekt erfolgreich aktiviert wurde.
VideoEffectDisabledListener: Ereignis, das ausgelöst wird, wenn ein Videoeffekt erfolgreich deaktiviert wurde.
VideoEffectErrorListener: Ereignis, das ausgelöst wird, wenn ein Videoeffektvorgang fehlschlägt.

Die Objekte VideoEffectEnabledEvent, VideoEffectDisabledEvent und VideoEffectErrorEvent verfügen über die folgende API-Struktur:

VideoEffectName: Ruft den Namen des Videoeffekts ab, der das Ereignis ausgelöst hat.

Sobald Sie über das Objekt VideoEffectsLocalVideoStreamFeature verfügen, können Sie die Ereignisse abonnieren:

Um Videoeffekte mit dem Azure Communication Calling SDK zu verwenden, fügen Sie die Variablen zu MainPage hinzu.

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

Nach dem Erstellen von LocalVideoStream müssen Sie die VideoEffects-Funktions-API von LocalVideoStream abrufen, um Videoeffekte zu aktivieren/zu deaktivieren.

private async void CameraList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedCamera = CameraList.SelectedItem as VideoDeviceDetails;
    cameraStream = new LocalOutgoingVideoStream(selectedCamera);
    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;

und beginnen Sie mit der Verwendung der APIs zum Aktivieren und Deaktivieren von Videoeffekten:

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

Verschwommener Hintergrund

Der Weichzeichner für den Hintergrund ist ein Videoeffekt, mit dem der Hintergrund einer Person weichgezeichnet wird. Um den Hintergrundvideoeffekt verwenden zu können, müssen Sie ein VideoEffectsLocalVideoStreamFeature-Feature aus einem gültigen LocalVideoStream abrufen.

So aktivieren Sie den Videoeffekt „Weichzeichner für Hintergrund“:

Fügen Sie der MainPage die BackgroundBlurEffect-Instanz hinzu.

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

Erstellen Sie eine Methode, die das Feature VideoEFfects für die Ereignisse abruft:

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

Aktivieren und deaktivieren Sie den Effekt Hintergrundunschärfe:

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

Ersetzen des Hintergrunds

So aktivieren Sie den Videoeffekt „Ersetzen des Hintergrunds“:

Fügen Sie der MainPage die BackgroundReplacementEffect-Instanz hinzu.

public sealed partial class MainPage : Page
{
    private BackgroundReplacementEffect backgroundReplacementVideoEffect = new BackgroundReplacementEffect();
}

Erstellen Sie eine Methode, die das Feature VideoEFfects für die Ereignisse abruft:

private async void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundReplacement.IsChecked = true;
    });
}

private async void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundReplacement.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);
}

Legen Sie einen benutzerdefinierten Hintergrund fest, indem Sie das Bild durch einen Puffer übergeben.

//example of getting the image from storage folder
MemoryBuffer memoryBuffer = new MemoryBuffer(0);
StorageFolder InstallationFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
StorageFile file = InstallationFolder.GetFileAsync("image.jpg").GetAwaiter().GetResult();
if (File.Exists(file.Path))
{
    byte[] imageBytes = File.ReadAllBytes(file.Path);
    memoryBuffer = new MemoryBuffer((uint)imageBytes.Length);
    using (IMemoryBufferReference reference = memoryBuffer.CreateReference())
    {
        byte* dataInBytes;
        uint capacityInBytes;

        (reference.As<IMemoryBufferByteAccess>()).GetBuffer(out dataInBytes, out capacityInBytes);
        for (int i = 0; i < imageBytes.Length; i++)
        {
            dataInBytes[i] = imageBytes[i];
        }
    }
    return memoryBuffer;
}
backgroundReplacementVideoEffect.Buffer = memoryBuffer;

Aktivieren und deaktivieren Sie den Effekt „Ersetzen des Hintergrunds“:

private async void BackgroundReplacement_Click(object sender, RoutedEventArgs e)
{
    if (localVideoEffectsFeature.IsEffectSupported(backgroundReplacementVideoEffect))
    {
        var backgroundReplacementCheckbox = sender as CheckBox;
        if (backgroundReplacementCheckbox.IsChecked.Value)
        {
            localVideoEffectsFeature.EnableEffect(backgroundReplacementVideoEffect);
        }
        else
        {
            localVideoEffectsFeature.DisableEffect(backgroundReplacementVideoEffect);
        }
    }
}

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln:

Sehen Sie sich unser Hero-Beispiel für Anrufe an.
Erste Schritte mit der UI-Bibliothek
Informieren Sie sich über die Funktionen des Calling SDK.
Informieren Sie sich über die Funktionsweise von Anrufen.

Freigeben über

Schnellstart: Hinzufügen von Videoeffekten zu Videoanrufen

Verwenden von Videoeffekten

Installieren des Pakets

Verschwommener Hintergrund

Ersetzen des Hintergrunds durch ein Bild

Hinzufügen eines Milchglashintergrundeffekts

Verwenden von Videoeffekten

Verschwommener Hintergrund

Ersetzen des Hintergrunds

Verwenden von Videoeffekten

Verschwommener Hintergrund

Ersetzen des Hintergrunds

Verwenden von Videoeffekten

Verschwommener Hintergrund

Ersetzen des Hintergrunds

Nächste Schritte

Feedback

Zusätzliche Ressourcen