Share via

Přidání vizuálních efektů do videohovoru

  • Článek

Důležité

Funkce popsané v tomto článku jsou aktuálně ve verzi Public Preview. Tato verze Preview je poskytována bez smlouvy o úrovni služeb a nedoporučujeme ji pro produkční úlohy. Některé funkce se nemusí podporovat nebo mohou mít omezené možnosti. Další informace najdete v dodatečných podmínkách použití pro verze Preview v Microsoft Azure.

Důležité

Efekty volajícího videa jsou dostupné od verze Public Preview verze 1.10.0-beta.1 volající sady SDK. Ujistěte se, že při použití efektů videa používáte tuto nebo novější sadu SDK.

Poznámka:

Toto rozhraní API je poskytováno jako verze Preview (beta verze) pro vývojáře a může se měnit na základě zpětné vazby, kterou obdržíme.

Poznámka:

Tuto knihovnu nelze použít samostatně a může fungovat pouze při použití s klientskou knihovnou Azure Communication Call pro WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Poznámka:

V současné době se podpora vytváření efektů na pozadí videa podporuje jenom v prohlížeči Chrome a Edge (Windows a Mac) a Desktopu Mac Safari.

Sada SDK pro volání komunikace Azure umožňuje vytvářet video efekty, které vidí ostatní uživatelé volání. Například pro uživatele, který volá službu Azure Communication Services pomocí sady WebJS SDK, teď můžete povolit, aby uživatel mohl zapnout rozostření pozadí. Když je zapnuté rozostření pozadí, může se uživatel cítit pohodlněji při videohovoru, že se ve výstupním videu zobrazí jenom uživatel a veškerý ostatní obsah je rozmazaný.

Požadavky

Instalace sady SDK pro volání služeb Azure Communication Services

  • Vyžaduje se účet Azure s aktivním předplatným. Informace o vytvoření účtu Azure najdete zdarma v tématu Vytvoření účtu Azure.
  • Node.js doporučujeme používat aktivní verze dlouhodobé podpory (LTS).
  • Aktivní prostředek komunikační služby. Vytvořte prostředek komunikační služby.
  • Přístupový token uživatele pro vytvoření instance klienta volání. Naučte se vytvářet a spravovat přístupové tokeny uživatelů. K vytvoření uživatele a přístupového tokenu můžete také použít Azure CLI a spustit příkaz se svým připojovací řetězec. (Je potřeba vzít připojovací řetězec z prostředku prostřednictvím webu Azure Portal.)
  • Klientská knihovna azure Communication Calling je správně nastavená a nakonfigurovaná (https://www.npmjs.com/package/@azure/communication-calling).

Příklad použití Azure CLI k

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

Podrobnosti o používání rozhraní příkazového řádku najdete v tématu Použití Azure CLI k vytváření a správě přístupových tokenů.

Instalace sady SDK pro volající efekty

Pomocí příkazu npm install nainstalujte sadu SDK azure Communication Calling Effects sdk pro JavaScript.

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

Další podrobnosti o volajících komunikačních efektech najdete na stránce balíčku npm.

Podporované video efekty:

V současné době efekty videa podporují následující schopnost:

  • Rozostření pozadí
  • Nahrazení pozadí vlastním obrázkem

Model třídy:

Název Popis
BackgroundBlurEffect Třída efektu rozostření pozadí.
BackgroundReplacementEffect Nahrazení pozadí třídou efektu obrázku.

Pokud chcete použít video efekty s klientskou knihovnou Azure Communication Calling, musíte po vytvoření LocalVideoStream získat rozhraní API funkce VideoEffects z LocalVideoStream.

Příklady kódu

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