Sdílet prostřednictvím

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

Důležité

Tato funkce služeb Azure Communication Services je aktuálně ve verzi Preview. Funkce ve verzi Preview jsou veřejně dostupné a můžou je používat všichni noví a stávající zákazníci Microsoftu.

Tato verze Preview je poskytována bez smlouvy o úrovni služeb a nedoporučujeme ji pro produkční úlohy. Některé funkce nemusí být podporované nebo můžou být omezené.

Další informace najdete v dodatečných podmínkách použití pro verze Preview Microsoft Azure.

Důležité

Efekty videohovorů jsou dostupné od verze Public Preview 1.10.0-beta.1 sady SDK pro volání. Ujistěte se, že pro efekty videa používáte sadu 1.10.0-beta.1 nebo novější sadu SDK.

Poznámka:

  • Toto rozhraní API je poskytováno jako verze Preview pro vývojáře a může se měnit na základě zpětné vazby, kterou obdržíme.
  • Tuto knihovnu nelze použít samostatně. Funguje jenom při použití s klientskou knihovnou Azure Communication Calling pro WebJS (https://www.npmjs.com/package/@azure/communication-calling).
  • V současné době se vytváření efektů na pozadí videa podporuje jenom v prohlížeči Chrome a Prohlížeči microsoft Edge (Windows a Mac) a Desktopu Mac Safari.

Sada SDK pro volání komunikace Azure umožňuje vytvářet efekty videa, které jsou viditelné pro ostatní uživatele při volání. Například pro účastníka, který používá sadu WebJS SDK volající službu Azure Communication Services, můžete uživateli poskytnout možnost zapnout rozostření pozadí. Když je zapnuté rozostření pozadí, může se uživatel při videohovoru cítit pohodlněji, protože víte, že pozadí je rozmazané.

Požadavky

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

Příklad použití Azure CLI k vytvoření a správě přístupových tokenů:

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

Další informace najdete v tématu Použití Azure CLI k vytváření a správě přístupových tokenů.

Nainstalujte sadu SDK pro efekty volání

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

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

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

Podporované efekty videa

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

  • Rozostření pozadí
  • Pozadí nahraďte vlastním obrázkem.

Model třídy

Název Popis
BackgroundBlurEffect Třída efektu rozostření pozadí.
BackgroundReplacementEffect Nahrazení pozadí pomocí třídy obrazového efektu.

Pokud chcete použít video efekty s klientskou knihovnou Azure Communication Calling, vytvořte LocalVideoStream, poté získejte funkci 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();