Lägga till visuella effekter i ett videosamtal

Viktigt!

Funktioner som beskrivs i den här artikeln är för närvarande i offentlig förhandsversion. Den här förhandsversionen tillhandahålls utan ett serviceavtal och vi rekommenderar det inte för produktionsarbetsbelastningar. Vissa funktioner kanske inte stöds eller kan vara begränsade. Mer information finns i Kompletterande villkor för användning av Microsoft Azure-förhandsversioner.

Viktigt!

Effekterna av samtalsvideo är tillgängliga från och med den offentliga förhandsversionen version 1.10.0-beta.1 av Calling SDK. Se till att du använder det här eller ett nyare SDK när du använder videoeffekter.

Kommentar

Det här API:et tillhandahålls som en förhandsversion ("beta") för utvecklare och kan ändras baserat på feedback som vi får.

Kommentar

Det här biblioteket kan inte användas fristående och kan bara fungera när det används med Azure Communication Calling-klientbiblioteket för WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Kommentar

För närvarande stöds webbläsarstöd för att skapa videobakgrundseffekter endast i Chrome och Edge Desktop Browser (Windows och Mac) och Mac Safari Desktop.

Med Azure Communication Calling SDK kan du skapa videoeffekter som andra användare på ett samtal kan se. För en användare som till exempel anropar Azure Communication Services med hjälp av WebJS SDK kan du nu aktivera att användaren kan aktivera bakgrundsoskärpa. När bakgrundsoskärpan är aktiverad kan en användare känna sig mer bekväm med att göra ett videosamtal som utdatavideon bara visar en användare och allt annat innehåll är suddigt.

Förutsättningar

Installera Azure Communication Services Calling SDK

• Ett Azure-konto med en aktiv prenumeration krävs. Se Skapa ett konto kostnadsfritt om hur du skapar ett Azure-konto.
• Node.js aktiva LTS-versioner (Long Term Support) rekommenderas.
• En aktiv Communication Services-resurs. Skapa en Communication Services-resurs.
• En användaråtkomsttoken för att instansiera en samtalsklient. Lär dig hur du skapar och hanterar användaråtkomsttoken. Du kan också använda Azure CLI och köra kommandot med din anslutningssträng för att skapa en användare och en åtkomsttoken. (Behöver hämta anslutningssträng från resursen via Azure-portalen.)
• Klientbiblioteket för Azure Communication Calling är korrekt konfigurerat (https://www.npmjs.com/package/@azure/communication-calling).

Ett exempel som använder Azure CLI för att

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

Mer information om hur du använder CLI finns i Använda Azure CLI för att skapa och hantera åtkomsttoken.

Installera SDK för samtalseffekter

Använd kommandot "npm install" för att installera Azure Communication Calling Effects SDK för JavaScript.

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

Mer information om samtalskommunikationseffekterna finns på sidan npm-paket.

Videoeffekter som stöds:

För närvarande stöder videoeffekterna följande förmåga:

• Bakgrundsoskärpa
• Ersätt bakgrunden med en anpassad avbildning

Klassmodell:

Name	beskrivning
BackgroundBlurEffect	Effektklassen för bakgrundsoskärpa.
BackgroundReplacementEffect	Bakgrundsersättningen med bildeffektklassen.

Om du vill använda videoeffekter med Azure Communication Calling-klientbiblioteket måste du hämta funktions-API:et VideoEffects från LocalVideoStream när du har skapat en LocalVideoStream.

Kodexempel

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