다음을 통해 공유

영상 통화에 시각 효과 추가

  • 아티클

Important

이 문서에 설명된 기능은 현재 공개 미리 보기로 제공됩니다. 이 미리 보기 버전은 서비스 수준 계약 없이 제공되며, 프로덕션 워크로드에는 권장되지 않습니다. 특정 기능이 지원되지 않거나 기능이 제한될 수 있습니다. 자세한 내용은 Microsoft Azure Preview에 대한 추가 사용 약관을 참조하세요.

Important

통화 비디오 효과는 통화 SDK의 공개 미리 보기 버전 1.10.0-beta.1 부터 사용할 수 있습니다. 비디오 효과를 사용할 때 이 SDK 또는 최신 SDK를 사용하는지 확인하세요.

참고 항목

이 API는 개발자를 위한 미리 보기('베타')로 제공되며 받은 피드백에 따라 변경될 수 있습니다.

참고 항목

이 라이브러리는 독립 실행형으로 사용할 수 없으며 WebJS(https://www.npmjs.com/package/@azure/communication-calling)용 Azure Communication Calling 클라이언트 라이브러리와 함께 사용할 때만 작동할 수 있습니다.

참고 항목

현재 비디오 배경 효과 만들기에 대한 브라우저 지원은 Chrome 및 Edge 데스크톱 브라우저(Windows 및 Mac) 및 Mac Safari Desktop에서만 지원됩니다.

Azure Communication Calling SDK를 사용하면 통화 중인 다른 사용자가 볼 수 있는 비디오 효과를 만들 수 있습니다. 예를 들어 WebJS SDK를 사용하여 Azure Communication Services 호출을 수행하는 사용자의 경우 이제 사용자가 배경 흐림 효과를 켤 수 있도록 설정할 수 있습니다. 배경 흐림 효과를 사용하도록 설정하면 사용자는 출력 비디오에서 사용자에게만 표시되고 다른 모든 콘텐츠가 흐리게 표시되는 비디오 통화를 더 편안하게 할 수 있습니다.

필수 조건

Azure Communication Services 통화 SDK 설치

Azure CLI를 사용하는 예제

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

CLI 사용에 대한 자세한 내용은 Azure CLI를 사용하여 액세스 토큰 만들기 및 관리를 참조 하세요.

호출 효과 SDK 설치

'npm install' 명령을 사용하여 JavaScript용 Azure Communication Calling Effects SDK를 설치합니다.

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

통화 통신 효과에 대한 자세한 내용은 npm 패키지 페이지를 참조 하세요.

지원되는 비디오 효과:

현재 비디오 효과는 다음 기능을 지원합니다.

  • 배경색 흐리게
  • 배경을 사용자 지정 이미지로 바꾸기

클래스 모델:

이름 설명
BackgroundBlurEffect 배경 흐림 효과 클래스입니다.
BackgroundReplacementEffect 이미지 효과 클래스를 사용한 배경 대체입니다.

Azure Communication Calling 클라이언트 라이브러리에서 비디오 효과를 사용하려면 LocalVideoStream을 만든 후 LocalVideoStream에서 VideoEffects 기능 API를 가져와야 합니다.

코드 예제

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