次の方法で共有

ビデオ通話への視覚効果の追加

  • [アーティクル]

重要

この記事で説明されている機能は、現在パブリック プレビュー段階にあります。 このプレビュー バージョンはサービス レベル アグリーメントなしで提供されており、運用環境のワークロードに使用することは推奨されません。 特定の機能はサポート対象ではなく、機能が制限されることがあります。 詳しくは、Microsoft Azure プレビューの追加使用条件に関するページをご覧ください。

重要

通話ビデオ効果は、Calling SDK のパブリック プレビュー バージョン 1.10.0-beta.1 以降で使用できます。 ビデオ効果を使用する場合は、この SDK またはより新しい SDK を必ず使用してください。

Note

この API は、開発者向けのプレビュー ('ベータ') として提供されており、お客様からのフィードバックに基づいて変更される可能性があります。

Note

このライブラリはスタンドアロンでは使用できず、WebJS (https://www.npmjs.com/package/@azure/communication-calling) 用の Azure Communication Calling クライアント ライブラリで使用する場合にのみ機能します。

Note

現在、ビデオの背景効果を作成するためのブラウザーのサポートは、Chrome、Edge Desktop Browser (Windows および Mac)、Mac Safari Desktop 上でのみ対応しています。

Azure Communication Calling SDK を使用すると、通話の他のユーザーに表示されるビデオ効果を作成できます。 たとえば、WebJS SDK を使って Azure Communication Services の通話を行っているユーザーの場合、ユーザーによる背景のぼかしの有効化を、有効にできるようになりました。 背景のぼかしを有効にすると、出力されるビデオにはユーザーのみが映され、その他のコンテンツはすべてぼやけ、ユーザーは一層快適にビデオ通話できます。

前提条件

Azure Communication Services Calling SDK をインストールする

Azure CLI を使用する例

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

CLI 使用の詳細については、「Azure CLI を使用してアクセス トークンを作成および管理する」を参照してください。

Calling Effects SDK をインストールする

JavaScript 用の Azure Communication Calling Effects SDK をインストールするには、‘npm install’ コマンドを使用します。

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