將視覺效果新增至視訊通話

發行項
05/02/2024

重要

本文所述的功能目前處於公開預覽狀態。此預覽版本沒有服務等級協定，不建議用於處理生產工作負載。可能不支援特定功能，或可能已經限制功能。如需詳細資訊，請參閱 Microsoft Azure 預覽版增補使用條款。

重要

通話視訊效果從通話 SDK 的公開預覽版 1.10.0-beta.1 開始提供。使用視訊效果時，請務必使用此版本或較新的 SDK。

注意

此 API 僅供開發人員預覽 (搶鮮版)，而且可能會根據收到的意見反應變更。

注意

此程式庫無法獨立使用，必須與 WebJS 的 Azure 通訊通話用戶端程式庫 (https://www.npmjs.com/package/@azure/communication-calling) 搭配使用才能運作。

注意

目前，只有 Chrome 和 Edge Desktop Browser (Windows 與 Mac) 以及 Mac Safari Desktop 提供建立視訊背景效果的瀏覽器支援。

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

共用方式為