Snabbstart: Lägga till videoeffekter i dina videosamtal

  • Artikel

Du kan använda funktionen Videoeffekter för att lägga till effekter i videon i videosamtal. Med den här funktionen kan utvecklare skapa visuella bakgrundseffekter och ersätta bakgrundsvideor i samtalsupplevelsen. Bakgrundsoskärpa ger användarna mekanismen för att ta bort distraktioner bakom en deltagare så att deltagarna kan kommunicera utan störande aktivitet eller konfidentiell information i bakgrunden. Detta är särskilt användbart när det gäller telehälsa, där en leverantör eller patient kanske vill dölja sin omgivning för att skydda känslig information eller personligt identifierbar information. Bakgrundsoskärpa kan användas i alla scenarier för virtuella avtalade tider, inklusive telebanks- och virtuella utfrågningar, för att skydda användarnas integritet. Förutom förbättrad konfidentialitet ger bakgrundsoskärpa mer kreativitet i uttryck, vilket gör det möjligt för användare att ladda upp anpassade bakgrunder för att vara värd för en roligare, personlig samtalsupplevelse.

Anteckning

Biblioteket för anropseffekt kan inte användas fristående och kan bara fungera när det används med Azure Communication Calling-klientbiblioteket för WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Använda videoeffekter

Installera paketet

npm install Använd kommandot för att installera Azure Communication Services Effects SDK för JavaScript.

Viktigt

Den här snabbstarten använder Azure Communication Services Calling SDK-versionen av 1.13.1 (eller senare) och Azure Communication Services Calling Effects SDK-versionen som är större än eller motsvarar 1.0.1.

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

Se här för mer information om anropet commmunication effekter npm paketsida.

Anteckning

För närvarande stöds webbläsarstöd för att skapa videobakgrundseffekter endast i Chrome och Edge Desktop Browser (Windows och Mac) och Mac Safari Desktop.

Anteckning

För närvarande finns det två tillgängliga videoeffekter:

  • Bakgrundsoskärpa
  • Bakgrundsersättning med en bild (breddförhållandet bör vara 16:9 för att vara kompatibelt)

Om du vill använda videoeffekter med Azure Communication Calling SDK när du har skapat en LocalVideoStreammåste du hämta funktions-API:et VideoEffectsLocalVideoStream för att starta/stoppa videoeffekterna:

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

Bakgrundsoskärpa

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

Bakgrundsbyte med en bild

Du måste ange URL:en för den bild som du vill använda som bakgrund för den här effekten.

Viktigt

Metoden startEffects misslyckas om URL:en inte är av en bild eller om den inte kan nås/inte kan läsas.

Anteckning

Aktuella bildformat som stöds är: png, jpg, jpeg, tiff, bmp.

Aktuellt höjdförhållande som stöds är 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); 
}

Du kan ändra avbildningen för den här effekten genom att skicka den via konfigurationsmetoden:

const newBackgroundImage = 'https://linkToNewImageFile'; 

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

Växlingseffekter kan göras med samma metod på api:et för videoeffekter:

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

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

När som helst om du vill kontrollera vilka effekter som är aktiva kan du använda egenskapen activeEffects . Egenskapen activeEffects returnerar en matris med namnen på de aktuella aktiva effekterna och returnerar en tom matris om det inte finns några aktiva effekter.

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

Så här stoppar du effekter:

await videoEffectsFeatureApi.stopEffects();

Anteckning

För att kunna använda videoeffekter på iOS Calling SDK laddas en maskininlärningsmodell ned till kundens enhet. Vi rekommenderar att du granskar sekretessanteckningarna i ditt program och uppdaterar dem i enlighet med detta, om det behövs.

Du kan använda funktionen Videoeffekter för att lägga till effekter i videon i videosamtal. Bakgrundsoskärpa ger användarna mekanismen för att ta bort distraktioner bakom en deltagare så att deltagarna kan kommunicera utan störande aktivitet eller konfidentiell information i bakgrunden. Den här funktionen är särskilt användbar i samband med telehälsa, där en leverantör eller patient kanske vill dölja sin omgivning för att skydda känslig information eller personuppgifter. Bakgrundsoskärpa kan användas i alla scenarier för virtuella avtalade tider, inklusive telebanks- och virtuella utfrågningar, för att skydda användarnas integritet.

Använda videoeffekter

Anteckning

Stöd för videoeffekter på iOS är begränsat till de två senaste huvudversionerna av iOS. När till exempel en ny huvudversion av iOS släpps är iOS-kravet den nya versionen och de senaste versionerna som föregick den.

För närvarande finns det en tillgänglig videoeffekt: Bakgrundsoskärpa.

Objektet LocalVideoEffectsFeature har följande API-struktur:

  • enable: Aktiverar en videoeffekt på instansen LocalVideoStream .
  • disable: Inaktiverar en videoeffekt på instansen LocalVideoStream .
  • isSupported: Anger om en videoeffekt stöds på instansen LocalVideoStream .
  • onVideoEffectEnabled: Händelse som utlöses när en videoeffekt har aktiverats.
  • onVideoEffectDisabled: Händelse som utlöses när en videoeffekt har inaktiverats.
  • onVideoEffectError: Händelse som utlöses när en videoeffektåtgärd misslyckas.

När du har LocalVideoEffectsFeature objektet kan du prenumerera på händelserna, händelser har följande ombud: didEnableVideoEffect, didDisableVideoEffect, didReceiveVideoEffectError.

Om du vill använda videoeffekter med Azure Communication Calling SDK när du har skapat en LocalVideoStreammåste du hämta funktions-API:et VideoEffectsLocalVideoStream för för att aktivera/inaktivera videoeffekter:

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

och börja använda API:erna för att aktivera och inaktivera videoeffekter:

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

Bakgrundsoskärpa

Bakgrundsoskärpa är en videoeffekt som gör att en persons bakgrund kan suddas ut. För att kunna använda Background Video Effect måste du hämta en LocalVideoEffectsFeature funktion från en giltig LocalVideoStream.

  • Skapa ett nytt videoeffektobjekt för bakgrundsoskärpa:
@State var backgroundBlurVideoEffect: BackgroundBlurEffect?
  • Kontrollera om BackgroundBlurEffect stöds och anropa Enable objektet videoEffectsFeature :
if((localVideoEffectsFeature.isSupported(effect: backgroundBlurVideoEffect)) != nil)
{
    localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
}

Så här inaktiverar du videoeffekt för bakgrundsoskärpa:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Anteckning

För att kunna använda videoeffekter på Android Calling SDK laddas en maskininlärningsmodell ned till kundens enhet. Vi rekommenderar att du granskar sekretessanteckningarna i ditt program och uppdaterar dem i enlighet med detta, om det behövs.

Du kan använda funktionen Videoeffekter för att lägga till effekter i videon i videosamtal. Bakgrundsoskärpa ger användarna mekanismen för att ta bort distraktioner bakom en deltagare så att deltagarna kan kommunicera utan störande aktivitet eller konfidentiell information i bakgrunden. Den här funktionen är särskilt användbar i samband med telehälsa, där en leverantör eller patient kanske vill dölja sin omgivning för att skydda känslig information eller personuppgifter. Bakgrundsoskärpa kan användas i alla scenarier för virtuella avtalade tider, inklusive telebanks- och virtuella utfrågningar, för att skydda användarnas integritet.

Den här snabbstarten bygger på snabbstart: Lägg till 1:1-videosamtal i din app för Android.

Använda videoeffekter

Anteckning

Stöd för videoeffekter på Android är begränsat till de senaste fyra huvudversionerna av Android. När till exempel en ny huvudversion av Android släpps är Android-kravet den nya versionen och de tre senaste versionerna som föregår den.

För närvarande finns det en tillgänglig videoeffekt: Bakgrundsoskärpa.

Objektet VideoEffectsLocalVideoStreamFeature har följande API-struktur:

  • enableEffect: Aktiverar en videoeffekt på instansen LocalVideoStream .
  • disableEffect: Inaktiverar en videoeffekt på instansen LocalVideoStream .
  • OnVideoEffectEnabledListener: Händelse som utlöses när en videoeffekt har aktiverats.
  • OnVideoEffectDisabledListener: Händelse som utlöses när en videoeffekt har inaktiverats.
  • OnVideoEffectErrorListener: Händelse som utlöses när en videoeffektåtgärd misslyckas.

VideoEffectDisabledEvent- VideoEffectEnabledEventoch-objekten VideoEffectErrorEvent har följande API-struktur:

  • getVideoEffectName: Hämtar namnet på videoeffekten som utlöste händelsen.

När du har VideoEffectsLocalVideoStreamFeature objektet kan du prenumerera på händelserna:

Om du vill använda videoeffekter med Azure Communication Calling SDK när du har skapat en LocalVideoStreammåste du hämta funktions-API:et VideoEffectsLocalVideoStream för för att aktivera/inaktivera videoeffekter:

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

och börja använda API:erna för att aktivera och inaktivera videoeffekter:

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

Bakgrundsoskärpa

Bakgrundsoskärpa är en videoeffekt som gör att en persons bakgrund kan suddas ut. För att kunna använda Background Video Effect måste du hämta en VideoEffectsLocalVideoStreamFeature funktion från en giltig LocalVideoStream.

Så här aktiverar du videoeffekt för bakgrundsoskärpa:

  • Skapa en metod som hämtar funktionen VideoEFfects prenumererar på händelserna:
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);
}
  • Skapa ett nytt videoeffektobjekt för bakgrundsoskärpa:
BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
  • Anropa EnableEffect objektet videoEffectsFeature :
public void enableBackgroundBlur() {
    videoEffectsFeature.enableEffect(backgroundBlurEffect);
}

Så här inaktiverar du videoeffekt för bakgrundsoskärpa:

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

Anteckning

För att kunna använda videoeffekter på Windows Calling SDK laddas en maskininlärningsmodell ned till kundens enhet. Vi rekommenderar att du granskar sekretessanteckningarna i ditt program och uppdaterar dem i enlighet med detta, om det behövs.

Du kan använda funktionen Videoeffekter för att lägga till effekter i videon i videosamtal. Bakgrundsoskärpa ger användarna mekanismen för att ta bort distraktioner bakom en deltagare så att deltagarna kan kommunicera utan störande aktivitet eller konfidentiell information i bakgrunden. Den här funktionen är särskilt användbar i samband med telehälsa, där en leverantör eller patient kanske vill dölja sin omgivning för att skydda känslig information eller personuppgifter. Bakgrundsoskärpa kan användas i alla scenarier för virtuella avtalade tider, inklusive telebankning och virtuella utfrågningar, för att skydda användarnas integritet.

Den här snabbstarten bygger på Snabbstart: Lägg till 1:1-videosamtal i din app för Windows.

Använda videoeffekter

Det finns för närvarande en tillgänglig videoeffekt: Bakgrundsoskärpa.

Objektet VideoEffectsLocalVideoStreamFeature har följande API-struktur:

  • EnableEffect: Aktiverar en videoeffekt på instansen LocalVideoStream .
  • DisableEffect: Inaktiverar en videoeffekt på instansen LocalVideoStream .
  • VideoEffectEnabled: Händelse som utlöses när en videoeffekt har aktiverats.
  • VideoEffectDisabledListener: Händelse som utlöses när en videoeffekt har inaktiverats.
  • VideoEffectErrorListener: Händelse som utlöses när en videoeffektåtgärd misslyckas.

Objekten VideoEffectEnabledEvent, VideoEffectDisabledEvent och VideoEffectErrorEvent har följande API-struktur:

  • VideoEffectName: Hämtar namnet på videoeffekten som utlöste händelsen.

När du har VideoEffectsLocalVideoStreamFeature objektet kan du prenumerera på händelserna:

Om du vill använda videoeffekter med Azure Communication Calling SDK lägger du till variablerna i MainPage.

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

När du har skapat en LocalVideoStreammåste du hämta funktions-API:et VideoEffectsLocalVideoStream för för att aktivera/inaktivera videoeffekter.

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;

och börja använda API:erna för att aktivera och inaktivera videoeffekter:

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

Bakgrundsoskärpa

Bakgrundsoskärpa är en videoeffekt som gör att en persons bakgrund kan vara suddig. För att kunna använda Background Video Effect måste du hämta en VideoEffectsLocalVideoStreamFeature funktion från en giltig LocalVideoStream.

Så här aktiverar du Videoeffekt för bakgrundsoskärpa:

  • Lägg till instansen BackgroundBlurEffect i MainPage.
public sealed partial class MainPage : Page
{
    private BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
}
  • Skapa en metod som hämtar VideoEFfects funktionen prenumererar på händelserna:
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);
}
  • Aktivera och inaktivera background blur-effekten:
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);
        }
    }
}

Nästa steg

Mer information finns i följande artiklar: