Delen via

Visuele effecten toevoegen aan een videogesprek

  • Artikel

Belangrijk

De functionaliteit die in dit artikel wordt beschreven, is momenteel beschikbaar als openbare preview. Deze preview-versie wordt geleverd zonder een service level agreement en we raden deze niet aan voor productieworkloads. Misschien worden bepaalde functies niet ondersteund of zijn de mogelijkheden ervan beperkt. Zie Aanvullende gebruiksvoorwaarden voor Microsoft Azure-previews voor meer informatie.

Belangrijk

De video-effecten voor gesprekken zijn beschikbaar vanaf de openbare preview-versie 1.10.0-beta.1 van de Calling SDK. Zorg ervoor dat u deze of een nieuwere SDK gebruikt bij het gebruik van video-effecten.

Notitie

Deze API wordt geleverd als preview ('bèta') voor ontwikkelaars en kan worden gewijzigd op basis van feedback die we ontvangen.

Notitie

Deze bibliotheek kan niet zelfstandig worden gebruikt en kan alleen werken wanneer deze wordt gebruikt met de Azure Communication Calling-clientbibliotheek voor WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Notitie

Momenteel wordt browserondersteuning voor het maken van video-achtergrondeffecten alleen ondersteund in Chrome en Edge Desktop Browser (Windows en Mac) en Mac Safari Desktop.

Met de Azure Communication Calling SDK kunt u video-effecten maken die andere gebruikers in een gesprek kunnen zien. Als een gebruiker bijvoorbeeld Azure Communication Services aanroept met behulp van de WebJS SDK, kunt u nu inschakelen dat de gebruiker achtergrond vervagen kan inschakelen. Wanneer de achtergrondvervaging is ingeschakeld, kan een gebruiker zich comfortabeler voelen bij het uitvoeren van een videogesprek dat de uitvoervideo alleen een gebruiker laat zien en alle andere inhoud wazig is.

Vereisten

De Sdk voor aanroepen van Azure Communication Services installeren

Een voorbeeld van het gebruik van de Azure CLI voor

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

Zie Azure CLI gebruiken voor het maken en beheren van toegangstokens voor meer informatie over het gebruik van de CLI.

De SDK voor aanroepende effecten installeren

Gebruik de opdracht npm install om de Sdk voor aanroepende effecten van Azure Communication voor JavaScript te installeren.

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

Ga naar de npm-pakketpagina voor meer informatie over de belcommunicatie-effecten.

Ondersteunde video-effecten:

Momenteel ondersteunen de video-effecten de volgende mogelijkheid:

  • Achtergrond vervagen
  • De achtergrond vervangen door een aangepaste afbeelding

Klassemodel:

Name Beschrijving
BackgroundBlurEffect De klasse achtergrond vervagen.
BackgroundReplacementEffect De achtergrondvervanging met afbeeldingseffectklasse.

Als u video-effecten wilt gebruiken met de Azure Communication Calling-clientbibliotheek, moet u, nadat u een LocalVideoStream hebt gemaakt, de Functie-API videoEffects ophalen van localVideoStream.

Codevoorbeelden

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