Dodawanie efektów wizualnych do wywołania wideo
Ważne
Funkcje opisane w tym artykule są obecnie dostępne w publicznej wersji zapoznawczej. Ta wersja zapoznawcza jest udostępniana bez umowy dotyczącej poziomu usług i nie zalecamy korzystania z niej w przypadku obciążeń produkcyjnych. Niektóre funkcje mogą być nieobsługiwane lub ograniczone. Aby uzyskać więcej informacji, zobacz Uzupełniające warunki korzystania z wersji zapoznawczych platformy Microsoft Azure.
Ważne
Efekty wywoływania wideo są dostępne od publicznej wersji zapoznawczej 1.10.0-beta.1 zestawu Calling SDK. Upewnij się, że używasz tego lub nowszego zestawu SDK podczas korzystania z efektów wideo.
Uwaga
Ten interfejs API jest udostępniany jako wersja zapoznawcza ("beta") dla deweloperów i może ulec zmianie na podstawie otrzymywanych opinii.
Uwaga
Tej biblioteki nie można używać autonomicznej i może działać tylko wtedy, gdy jest używana z biblioteką klienta wywołującą komunikację platformy Azure dla usługi WebJS (https://www.npmjs.com/package/@azure/communication-calling).
Uwaga
Obecnie obsługa przeglądarki do tworzenia efektów tła wideo jest obsługiwana tylko w przeglądarkach Chrome i Edge Desktop (Windows i Mac) i Mac Safari Desktop.
Zestaw AZURE Communication Calling SDK umożliwia tworzenie efektów wideo, które inni użytkownicy wywołania mogą zobaczyć. Na przykład dla użytkownika wykonującego wywołania usług Azure Communication Services przy użyciu zestawu SDK webJS można teraz włączyć, że użytkownik może włączyć rozmycie w tle. Gdy funkcja rozmycia tła jest włączona, użytkownik może czuć się bardziej komfortowo podczas wykonywania wywołania wideo, że wyjściowy film wideo pokazuje tylko użytkownika, a cała inna zawartość jest rozmyta.
Wymagania wstępne
Instalowanie zestawu SDK wywołującego usługi Azure Communication Services
- Wymagane jest konto platformy Azure z aktywną subskrypcją. Zobacz Tworzenie konta bezpłatnie , aby dowiedzieć się, jak utworzyć konto platformy Azure.
- zaleca się Node.js aktywnych wersji długoterminowych pomocy technicznej (LTS).
- Aktywny zasób usług komunikacyjnych. Utwórz zasób usług komunikacyjnych.
- Token dostępu użytkownika w celu utworzenia wystąpienia klienta wywołania. Dowiedz się, jak tworzyć tokeny dostępu użytkowników i zarządzać nimi. Możesz również użyć interfejsu wiersza polecenia platformy Azure i uruchomić polecenie za pomocą parametry połączenia, aby utworzyć użytkownika i token dostępu. (Należy pobrać parametry połączenia z zasobu za pośrednictwem witryny Azure Portal).
- Biblioteka klienta wywołująca komunikację platformy Azure jest prawidłowo skonfigurowana i skonfigurowana (https://www.npmjs.com/package/@azure/communication-calling).
Przykład użycia interfejsu wiersza polecenia platformy Azure do
az communication identity token issue --scope voip --connection-string "yourConnectionString"
Aby uzyskać szczegółowe informacje na temat korzystania z interfejsu wiersza polecenia platformy Azure, zobacz Tworzenie tokenów dostępu i zarządzanie nimi za pomocą interfejsu wiersza polecenia platformy Azure.
Instalowanie zestawu SDK efektów wywołujących
Użyj polecenia "npm install", aby zainstalować zestaw AZURE Communication Calling Effects SDK dla języka JavaScript.
npm install @azure/communication-calling-effects --save
Aby uzyskać więcej informacji na temat efektów komunikacji wywołującej, odwiedź stronę pakietu npm.
Obsługiwane efekty wideo:
Obecnie efekty wideo obsługują następujące możliwości:
- Rozmycie tła
- Zamień tło na obraz niestandardowy
Model klas:
| Nazwa/nazwisko | opis |
|---|---|
| BackgroundBlurEffect | Klasa efektu rozmycia tła. |
| BackgroundReplacementEffect | Zamiana tła na klasę efektu obrazu. |
Aby używać efektów wideo z biblioteką klienta wywołania komunikacji platformy Azure, po utworzeniu elementu LocalVideoStream należy pobrać interfejs API funkcji VideoEffects z elementu LocalVideoStream.
Przykłady kodu
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();