Rychlý start: Přidání efektů videa do videohovorů

Článek
08/18/2023

Funkci Efekty videa můžete použít k přidání efektů do videa při videohovorech. Tato funkce umožňuje vývojářům začlenit vizuální efekty na pozadí a nahrazení videa na pozadí do prostředí pro volání. Rozostření pozadí poskytuje uživatelům mechanismus pro odstranění rušivých prvků za účastníkem, aby účastníci mohli komunikovat bez rušivých aktivit nebo důvěrných informací na pozadí. To je zvlášť užitečné v souvislosti s telehealth, kdy poskytovatel nebo pacient může chtít zakrýt své okolí, aby chránil citlivé informace nebo identifikovatelné osobní údaje. Rozostření pozadí se dá použít ve všech scénářích virtuálních událostí, včetně telebankingu a virtuálních slyšení, a chránit tak soukromí uživatelů. Kromě zvýšené důvěrnosti umožňuje rozostření pozadí větší kreativitu výrazu a umožňuje uživatelům nahrávat vlastní pozadí a hostovat zábavnější a přizpůsobené prostředí pro volání.

Poznámka

Knihovnu efektů volání nelze použít samostatně a může fungovat pouze v případě, že se použije s klientskou knihovnou volání Azure Communication pro WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Použití efektů videa

Instalace balíčku

Pomocí příkazu npm install nainstalujte sadu Azure Communication Services Effects SDK pro JavaScript.

Důležité

V tomto rychlém startu se používá verze 1.13.1 sady AZURE COMMUNICATION SERVICES Calling SDK (nebo vyšší) a verze sady SDK Azure Communication Services Calling Effects SDK vyšší než nebo vyšší1.0.1.

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

Další podrobnosti o stránce balíčku npm s efekty volání komunikace najdete tady .

Poznámka

V současné době je podpora prohlížeče pro vytváření efektů pozadí videa podporována pouze v prohlížečích Chrome a Edge Desktop (Windows a Mac) a Mac Safari Desktop.

Poznámka

V současné době jsou k dispozici dva efekty videa:

Rozostření pozadí
Nahrazení pozadí obrázkem (kvůli kompatibilitě by poměr stran měl být 16:9)

Pokud chcete používat efekty videa se sadou SDK pro volání azure communication, musíte po vytvoření LocalVideoStreamzískat VideoEffects rozhraní API LocalVideoStream funkce pro spuštění/zastavení efektů videa:

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

Rozostření pozadí

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

Nahrazení pozadí obrázkem

K tomuto výsledku musíte zadat adresu URL požadovaného obrázku jako pozadí.

Důležité

Metoda startEffects selže, pokud adresa URL není z obrázku nebo je nedostupná nebo nečitelná.

Poznámka

Aktuálně podporované formáty obrázků jsou: png, jpg, jpeg, tiff, bmp.

Aktuální podporovaný poměr stran je 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); 
}

Změnu image pro tento efekt můžete provést předáním pomocí metody configure:

const newBackgroundImage = 'https://linkToNewImageFile'; 

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

Přepínání efektů je možné provést stejnou metodou v rozhraní API funkcí video efektů:

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

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

Pokud chcete kdykoli zkontrolovat, jaké účinky jsou aktivní, můžete použít activeEffects vlastnost . Vlastnost activeEffects vrátí pole s názvy aktuálně aktivních efektů, a pokud nejsou aktivní žádné efekty, vrátí prázdnou matici.

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

Ukončení efektů:

await videoEffectsFeatureApi.stopEffects();

Poznámka

Aby bylo možné používat video efekty v sadě SDK pro volání iOS, stáhne se do zařízení zákazníka model strojového učení. Doporučujeme, abyste si poznámky k ochraně osobních údajů ve vaší aplikaci prostudovali a v případě potřeby je odpovídajícím způsobem aktualizovali.

Pomocí funkce Efekty videa můžete do videa přidávat efekty při videohovorech. Rozostření pozadí poskytuje uživatelům mechanismus pro odstranění rušivých prvků za účastníkem, aby účastníci mohli komunikovat bez rušivých aktivit nebo důvěrných informací na pozadí. Tato funkce je zvlášť užitečná v kontextu zdravotnictví na dálku, kdy poskytovatel nebo pacient může chtít zakrýt své okolí kvůli ochraně citlivých informací nebo osobních údajů. Rozostření pozadí se dá použít ve všech scénářích virtuálních událostí, včetně telebankingu a virtuálních slyšení, a chránit tak soukromí uživatelů.

Použití efektů videa

Poznámka

Podpora efektů videa v iOSu je omezená na dvě nejnovější hlavní verze iOSu. Když je například vydána nová hlavní verze iOSu, požadavek na iOS je nová verze a nejnovější verze, které jí předcházely.

Momentálně je k dispozici jeden efekt Videa: Rozostření pozadí.

Objekt LocalVideoEffectsFeature má následující strukturu rozhraní API:

enable: Povolí video efekt v LocalVideoStream instanci.
disable: Zakáže video efekt v LocalVideoStream instanci.
isSupported: Označuje, jestli je v instanci podporovaný LocalVideoStream efekt Videa.
onVideoEffectEnabled: Událost, která se aktivuje, když se efekt Videa úspěšně povolí.
onVideoEffectDisabled: Událost, která se aktivuje, když byl efekt Videa úspěšně zakázán.
onVideoEffectError: Událost, která se aktivuje, když selže operace efektu videa.

Jakmile objekt máteLocalVideoEffectsFeature, můžete se přihlásit k odběru událostí, události mají následující delegáty: didEnableVideoEffect, didDisableVideoEffect, . didReceiveVideoEffectError

Pokud chcete video efekty používat se sadou SDK pro volání azure communication, musíte po vytvoření LocalVideoStreamzískat VideoEffects rozhraní API LocalVideoStream funkce pro povolení nebo zakázání video efektů:

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

a začněte používat rozhraní API k povolení a zakázání video efektů:

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

Rozostření pozadí

Rozostření pozadí je efekt videa, který umožňuje rozostření pozadí osoby. Pokud chcete použít efekt videa na pozadí, musíte získat LocalVideoEffectsFeature funkci z platného LocalVideoStreamobjektu .

Vytvořte nový objekt efektu rozostření pozadí:

@State var backgroundBlurVideoEffect: BackgroundBlurEffect?

Zkontrolujte, jestli BackgroundBlurEffect se podporuje, a pro objekt zavolejte metodu EnablevideoEffectsFeature :

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

Zakázání efektu rozostření pozadí:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Poznámka

Aby bylo možné používat video efekty v sadě Android Calling SDK, stáhne se do zařízení zákazníka model strojového učení. Doporučujeme, abyste si poznámky k ochraně osobních údajů ve vaší aplikaci prostudovali a v případě potřeby je odpovídajícím způsobem aktualizovali.

Tento rychlý start vychází z rychlého startu: Přidání videohovorů 1:1 do aplikace pro Android.

Použití efektů videa

Poznámka

Podpora efektů videa na Androidu je omezená na poslední čtyři hlavní verze Androidu. Když je například vydána nová hlavní verze Androidu, požadavkem na Android je nová verze a tři nejnovější verze, které jí předcházejí.

Momentálně je k dispozici jeden efekt Videa: Rozostření pozadí.

Objekt VideoEffectsLocalVideoStreamFeature má následující strukturu rozhraní API:

enableEffect: Povolí video efekt v LocalVideoStream instanci.
disableEffect: Zakáže video efekt v LocalVideoStream instanci.
OnVideoEffectEnabledListener: Událost, která se aktivuje, když se efekt Videa úspěšně povolí.
OnVideoEffectDisabledListener: Událost, která se aktivuje, když byl efekt Videa úspěšně zakázán.
OnVideoEffectErrorListener: Událost, která se aktivuje, když selže operace efektu videa.

Objekty VideoEffectEnabledEvent, VideoEffectDisabledEvent a VideoEffectErrorEvent mají následující strukturu rozhraní API:

getVideoEffectName: Získá název efektu videa, který aktivoval událost.

Jakmile budete mít VideoEffectsLocalVideoStreamFeature objekt , můžete se přihlásit k odběru událostí:

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

a začněte používat rozhraní API k povolení a zakázání video efektů:

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

Rozostření pozadí

Rozostření pozadí je efekt videa, který umožňuje rozostření pozadí osoby. Pokud chcete použít efekt videa na pozadí, musíte získat VideoEffectsLocalVideoStreamFeature funkci z platného LocalVideoStreamobjektu .

Povolení efektu rozostření pozadí:

Vytvořte metodu VideoEFfects , která získá přihlášení funkce k odběru událostí:

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

Vytvořte nový objekt efektu rozostření pozadí:

BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();

Volání EnableEffect u objektu videoEffectsFeature :

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

Zakázání efektu rozostření pozadí:

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

Poznámka

Aby bylo možné používat video efekty v sadě Windows Calling SDK, stáhne se do zařízení zákazníka model strojového učení. Doporučujeme, abyste si poznámky k ochraně osobních údajů ve vaší aplikaci prostudovali a v případě potřeby je odpovídajícím způsobem aktualizovali.

Pomocí funkce Video Effects můžete do videa přidávat efekty při videohovorech. Rozostření pozadí poskytuje uživatelům mechanismus pro odstranění rušivých prvků za účastníkem, aby mohli účastníci komunikovat bez rušivé aktivity nebo důvěrných informací na pozadí. Tato funkce je zvlášť užitečná v kontextu telehealth, kdy poskytovatel nebo pacient může chtít zakrýt své okolí, aby chránil citlivé informace nebo osobní údaje. Rozostření pozadí je možné použít ve všech scénářích virtuálních událostí, včetně telebankingu a virtuálních slyšení, a chránit tak soukromí uživatelů.

Tento rychlý start vychází z rychlého startu: Přidání videohovorů 1:1 do aplikace pro Windows.

Použití video efektů

V současné době je k dispozici jeden video efekt: Rozostření pozadí.

Objekt VideoEffectsLocalVideoStreamFeature má následující strukturu rozhraní API:

EnableEffect: Povolí video efekt v LocalVideoStream instanci.
DisableEffect: Zakáže video efekt na LocalVideoStream instanci.
VideoEffectEnabled: Událost, která se aktivuje po úspěšném povolení efektu Video.
VideoEffectDisabledListener: Událost, která se aktivuje, když byl video efekt úspěšně zakázán.
VideoEffectErrorListener: Událost, která se aktivuje, když selže operace video efektu.

Objekty VideoEffectEnabledEventa VideoEffectErrorEventVideoEffectDisabledEvent mají následující strukturu rozhraní API:

VideoEffectName: Získá název video efektu, který aktivoval událost.

Jakmile budete mít VideoEffectsLocalVideoStreamFeature objekt, můžete se přihlásit k odběru událostí:

Pokud chcete video efekty používat se sadou SDK pro volání služby Azure Communication, přidejte proměnné do mainpage.

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

Po vytvoření LocalVideoStreamnástroje potřebujete získat VideoEffects rozhraní API LocalVideoStream funkce, které umožňuje povolit nebo zakázat video efekty.

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;

a začněte používat rozhraní API k povolení a zakázání video efektů:

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

Rozostření pozadí

Rozostření pozadí je video efekt, který umožňuje rozostření pozadí osoby. Pokud chcete použít efekt videa na pozadí, musíte získat VideoEffectsLocalVideoStreamFeature funkci z platného LocalVideoStreamobjektu .

Povolení efektu rozostření pozadí:

BackgroundBlurEffect Přidejte instanci do mainpage.

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

Vytvořte metodu VideoEFfects , která získá funkci odběru událostí:

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

Povolte a zakažte efekt Rozostření pozadí:

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

Další kroky

Další informace najdete v následujících článcích:

Podívejte se na ukázku volajícího hrdiny.
Začínáme s knihovnou uživatelského rozhraní
Informace o možnostech volání sady SDK
Další informace o tom, jak funguje volání

Rychlý start: Přidání efektů videa do videohovorů

Použití efektů videa

Instalace balíčku

Rozostření pozadí

Nahrazení pozadí obrázkem

Použití efektů videa

Rozostření pozadí

Použití efektů videa

Rozostření pozadí

Použití video efektů

Rozostření pozadí

Další kroky

Další materiály