Share via

Добавление визуальных эффектов в видеозвонок

  • Статья

Важно!

Функции, описанные в этой статье, в настоящее время находятся в общедоступной предварительной версии. Эта предварительная версия предоставляется без соглашения об уровне обслуживания. Ее не следует использовать для производственных рабочих нагрузок. Некоторые функции могут не поддерживаться или их возможности могут быть ограничены. Дополнительные сведения см. в статье Дополнительные условия использования Предварительных версий Microsoft Azure.

Важно!

Эффекты вызова видео доступны начиная с общедоступной предварительной версии 1.10.0-beta.1 пакета SDK для вызовов. При использовании видеоэффектов убедитесь, что вы используете этот или более новый пакет SDK.

Примечание.

Этот API предоставляется как предварительная версия (бета-версия) для разработчиков и может изменяться на основе полученных отзывов.

Примечание.

Эту библиотеку нельзя использовать автономно и может работать только при использовании с клиентской библиотекой вызовов Azure для WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Примечание.

В настоящее время поддержка браузера для создания фоновых эффектов видео поддерживается только в браузере Chrome и Edge Desktop (Windows и Mac) и Mac Safari Desktop.

Пакет SDK для звонков в Azure позволяет создавать видеоэффекты, которые могут видеть другие пользователи на вызове. Например, для пользователя, выполняющего вызовы Службы коммуникации Azure с помощью пакета SDK WebJS, теперь можно включить, чтобы пользователь мог включить фоновый размытие. Если фоновый размытие включен, пользователь может чувствовать себя более комфортно при выполнении видеозвонка, что выходной видео просто отображает пользователя, и все остальное содержимое размыто.

Необходимые компоненты

Установка пакета SDK для вызовов Службы коммуникации Azure

Пример использования Azure CLI для

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

Дополнительные сведения об использовании интерфейса командной строки см. в статье "Создание маркеров доступа и управление ими" с помощью Azure CLI.

Установка пакета SDK для вызовов

Используйте команду npm install, чтобы установить пакет SDK для вызовов связи Azure для JavaScript.

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

Дополнительные сведения о вызывающих эффектах связи см. на странице пакета npm.

Поддерживаемые эффекты видео:

В настоящее время видеоэффекты поддерживают следующие возможности:

  • Размытие фона
  • Замена фона пользовательским изображением

Модель класса:

Имя Описание
BackgroundBlurEffect Класс эффектов размытия фона.
BackgroundReplacementEffect Замена фона классом эффектов изображения.

Чтобы использовать видеоэффекты с клиентской библиотекой вызовов связи Azure, после создания LocalVideoStream необходимо получить API функций VideoEffects из LocalVideoStream.

Примеры кода

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