本文にスキップする
Version: 5.3

バーチャル背景

ビデオ通話中にバーチャル背景（virtual background）機能を使用して、背景をぼかしたり画像に置き換えたりすることができます。ここでは、バーチャル背景機能の使い方について説明します。

対応する通話タイプSDKの最低バージョン
1対1通話、グループ通話（カンファレンス）WebPlanetKit 5.3
Note
  • 現在、Safariブラウザーではバーチャル背景機能をサポートしません。
  • カスタムメディアストリームを設定した状態では、バーチャル背景機能を使用できません。
Warning

バーチャル背景効果を適用すると、CPUとメモリの使用量が増加します。

バーチャル背景機能のプラグインSDKをインストールする​

WebPlanetKitでは、別途のプラグインSDKを通じてバーチャル背景機能を使用できるAPIを提供します。バーチャル背景機能APIを使用するには、まずプラグインSDKリポジトリのREADMEを参考にして、バーチャル背景機能のプラグインSDKをインストールしてください。

バーチャル背景機能の使用を準備する​

インストールしたバーチャル背景機能のプラグインSDKをインポートしてPlanetKitVirtualBackgroundインスタンスを生成し、生成されたインスタンスをWebPlanetKitインスタンスに登録してください。PlanetKitVirtualBackgroundインスタンスはWebPlanetKitでユーザーがMediaStreamを簡単に作成し、管理できるように提供するMediaStreamManagerインスタンスにも登録して使用できます。

// Import SDK
import { Conference } from "@line/planet-kit";
import PlanetKitVirtualBackground from "@line/planet-kit-virtual-background";

// Create a planet-kit instance (This example is for group call).
const planetKit = new Conference();

// Create a planet-kit-virtual-background instance.
const virtualBackground = new PlanetKitVirtualBackground();

// Register the planet-kit-virtual-background with the planet-kit.
const conferenceParams = {
    ...,
    mediaHtmlElement: {
        myVideo: myVideoElement // Used as the default video source of virtual background.
    }
};
planetKit.joinConference(conferenceParams).then(() => {
    planetKit.registerVirtualBackground(virtualBackground);
});

バーチャル背景の基本動作方式​

WebPlanetKitのバーチャル背景機能は、MakeCallParamsやVerifyCallParams、またはConferenceParamsにローカルユーザのビデオエレメントで設定したビデオエレメントをソースとして、このソースにバーチャル背景効果を適用した結果物を下記のような別途キャンバスエレメントにレンダリングする方式で動作します。

<html>
    <div>
        <canvas id="virtual-background-canvas" autoplay></canvas>
    </div>
</html>

ぼかし背景を設定する​

背景にぼかし（blur）効果を適用するには、キャンバスエレメントとぼかしの程度を決める値（blurRadius）を引数として入れて、startVirtualBackgroundBlur()を呼び出します。blurRadiusは、バーチャル背景に適用されるガウシアンブラー（Gaussian blur）の半径を決める値で、値が大きいほど結果はよりぼやけます。一般的に5～20の間の値を多く使用し、設定しない場合、デフォルトは15です。

const virtualBackgroundCanvasElement = document.getElementById('virtual-background-canvas');
const blurRadius = 15;

planetKit.startVirtualBackgroundBlur(virtualBackgroundCanvasElement, blurRadius)
    .then(() => {
        // Successfully started blurred virtual background
    })
    .catch((error) => {
        // Failed to start blurred virtual background
    });

画像を背景に設定する​

背景を画像に切り替えるには、キャンバスエレメントと背景に設定する画像を引数として入れて、startVirtualBackgroundImage()を呼び出します。画像としては、HTMLImageElementまたはImageBitmapタイプを使用できます。

const virtualBackgroundCanvasElement = document.getElementById('virtual-background-canvas');
const image = new Image();
image.src = '/image_file';

planetKit.startVirtualBackgroundImage(virtualBackgroundCanvasElement, image)
    .then(() => {
        // Successfully started image virtual background
    })
    .catch((error) => {
        // Failed to start image virtual background
    });

バーチャル背景のソースビデオエレメントを変更する​

バーチャル背景機能のソースとして使用するビデオエレメントを変更するには、新しいソースとして使用するビデオエレメントを引数として入れ、changeVirtualBackgroundVideoElement()を呼び出します。

<html>
    <div>
        <video id="new-my-video" muted autoplay playsinline></video>
    </div>
</html>
const newMyVideoElement = document.getElementById('new-my-video');

planetKit.changeVirtualBackgroundVideoElement(newMyVideoElement)
    .then(() => {
        // Successfully changed source video element for virtual background
    })
    .catch((error) => {
        // Failed to change source video element for virtual background
    });

バーチャル背景が適用されたキャンバスエレメントを変更する​

バーチャル背景効果が適用されたキャンバスエレメントを変更するには、新しいキャンバスエレメントを引数として入れ、changeVirtualBackgroundCanvasElement()を呼び出します。

<html>
    <div>
        <canvas id="new-virtual-background-canvas" autoplay></canvas>
    </div>
</html>
const newVirtualBackgroundCanvasElement = document.getElementById('new-virtual-background-canvas');

planetKit.changeVirtualBackgroundCanvasElement(newVirtualBackgroundCanvasElement)
    .then(() => {
        // Successfully changed canvas element for virtual background
    })
    .catch((error) => {
        // Failed to change canvas element for virtual background
    });

バーチャル背景を使用中であるか確認する​

現在、バーチャル背景を使用しているかを確認するには、isVirtualBackgroundActive()を呼び出します。

if (planetKit.isVirtualBackgroundActive()) {
    // Currently virtual background is active
}

バーチャル背景を解除する​

バーチャル背景を解除するには、stopVirtualBackground()を呼び出します。

planetKit.stopVirtualBackground()