Dodawanie efektów wizualnych do rozmowy wideo

Ważne

Ta funkcja usług Azure Communication Services jest obecnie dostępna w wersji zapoznawczej. Funkcje w wersji zapoznawczej są publicznie dostępne i mogą być używane przez wszystkich nowych i istniejących klientów firmy Microsoft.

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ą nie być obsługiwane lub mogą być 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 zestawu SDK w wersji 1.10.0-beta.1 lub nowszej dla efektów wideo.

Uwaga / Notatka

• Ten interfejs API jest udostępniany jako wersja zapoznawcza dla deweloperów i może ulec zmianie na podstawie otrzymywanych opinii.
• Tej biblioteki nie można używać autonomicznej. Działa tylko wtedy, gdy jest używana z biblioteką klienta wywołania komunikacji platformy Azure dla usługi WebJS (https://www.npmjs.com/package/@azure/communication-calling).
• Obecnie tworzenie efektów tła wideo jest obsługiwane tylko w przeglądarkach Chrome i Microsoft Edge Desktop (Windows i Mac) i Mac Safari Desktop.

Zestaw SDK wywołań w komunikacji platformy Azure umożliwia tworzenie efektów wideo widocznych dla innych użytkowników podczas połączenia. Na przykład dla uczestników korzystających z usług Azure Communication Services wywołujących zestaw WEBJS SDK możesz udostępnić użytkownikowi opcję włączenia rozmycia w tle. Po włączeniu rozmycia tła użytkownik może czuć się bardziej komfortowo podczas rozmowy wideo, wiedząc, że tło jest rozmyte.

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ę stosować aktywne wersje długoterminowego wsparcia (LTS) Node.js.
• Aktywny zasób usług komunikacyjnych. Utwórz zasób usług komunikacyjnych.
• Token dostępu użytkownika w celu utworzenia wystąpienia klienta połączeń. Dowiedz się, jak tworzyć tokeny dostępu użytkowników i zarządzać nimi. Możesz również użyć Azure CLI i uruchomić polecenie z użyciem ciągu połączenia, aby utworzyć użytkownika i token dostępu. Zarejestruj parametry połączenia z zasobu za pośrednictwem witryny Azure Portal.
• Biblioteka klienta połączeń dla usługi Azure Communication jest prawidłowo skonfigurowana (https://www.npmjs.com/package/@azure/communication-calling).

Przykład użycia interfejsu wiersza polecenia platformy Azure do tworzenia tokenów dostępu i zarządzania nimi:

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

Aby uzyskać więcej informacji, zobacz Tworzenie tokenów dostępu za pomocą interfejsu wiersza polecenia platformy Azure i zarządzanie nimi.

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, zobacz stronę pakietu npm.

Obsługiwane efekty wideo

Obecnie efekty wideo obsługują następujące możliwości:

• Rozmycie tła.
• Zastąp tło obrazem niestandardowym.

Model klas

Nazwa	Opis
BackgroundBlurEffect	Klasa efektu rozmycia tła.
BackgroundReplacementEffect	Zamiana tła za pomocą klasy efektu obrazu.

Aby użyć wideoefektów z biblioteką klienta połączeń Azure Communication, utwórz LocalVideoStream element, a następnie pobierz VideoEffects tę funkcję z biblioteki 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();