你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

向视频通话添加视觉效果

项目
02/23/2024

重要

本文中所述的功能目前以公共预览版提供。此预览版在提供时没有附带服务级别协议，我们不建议将其用于生产工作负荷。某些功能可能不受支持或者受限。有关详细信息，请参阅 Microsoft Azure 预览版补充使用条款。

重要

从通话 SDK 的公共预览版 1.10.0-beta.1 开始，可以使用通话视频效果。请确保在使用视频效果时使用此 SDK 或更新的 SDK。

注意

此 API 作为预览版（“beta”版）提供给开发人员，可能会根据我们收到的反馈而更改。

注意

此库不能单独使用，只能与用于 WebJS (https://www.npmjs.com/package/@azure/communication-calling) 的 Azure 通信通话客户端库一起使用。

注意

目前，仅 Chrome 和 Edge 桌面浏览器（Windows 和 Mac）以及 Mac Safari 桌面版支持创建视频背景效果。

使用 Azure 通信通话 SDK 可以创建通话中的其他用户能够看到的视频效果。例如，对于使用 WebJS SDK 进行 Azure 通信服务通话的用户，现在可以让该用户启用背景模糊。启用背景模糊后，用户在进行视频通话时会感觉更舒服，因为输出视频仅显示用户，所有其他内容都会进行模糊处理。

先决条件

安装 Azure 通信服务呼叫 SDK

需要一个具有活动订阅的 Azure 帐户。有关如何创建 Azure 帐户，请参阅免费创建帐户。
推荐 Node.js 活动的长期支持 (LTS) 版本。
活动的通信服务资源。创建通信服务资源。
用于实例化通话客户端的用户访问令牌。了解如何创建和管理用户访问令牌。可以使用 Azure CLI，并结合你的连接字符串运行命令来创建用户和访问令牌。（需要通过 Azure 门户从资源中获取连接字符串。）
Azure 通信通话客户端库已正确设置和配置 (https://www.npmjs.com/package/@azure/communication-calling)。

使用 Azure CLI 的示例

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

有关使用 CLI 的详细信息，请参阅使用 Azure CLI 创建和管理访问令牌。

安装通话效果 SDK

使用“npm install”命令安装适用于 JavaScript 的 Azure 通信通话效果 SDK。

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

有关通话通信效果的更多详细信息，请访问 npm 包页。

支持的视频效果：

目前视频效果支持以下功能：

背景模糊
将背景替换为自定义图像

类模型：

名称	描述
BackgroundBlurEffect	背景模糊效果类。
BackgroundReplacementEffect	用图像替换背景的效果类。

要将视频效果与 Azure 通信通话客户端库配合使用，在创建 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();

Share via