SkyWay

Back

JavaScript SDK

DocumentationユーザーガイドJavaScript SDKバーチャル背景と背景ぼかし処理の実装

バーチャル背景と背景ぼかし処理の実装

SkyWay では、JavaScript/TypeScript を用いてブラウザ上でカメラから取得した映像の背景を加工するライブラリを提供しています。

カメラから取得した映像の背景を任意の画像に差し替えたり(以下では背景差し替え処理と呼びます)、背景へのぼかし処理(以下では背景ぼかし処理と呼びます)を行うことができます。

対応ブラウザ

以下ブラウザの直近 2 バージョンに対応しています。

  • Chrome
  • Edge

インストール

以下のコマンドでインストールを行います。

npm install skyway-video-processors

使い方

以下の使い方の詳細はSampleを参照してください。

任意の画像を利用して背景差し替え処理を行う VirtualBackground と、任意の強度で背景ぼかし処理を適用する BlurBackground の 2 つのクラスが存在します。

VirtualBackground の使い方

VirtualBackground のインスタンスを作成します。

import { VirtualBackground } from "skyway-video-processors";
const backgroundProcessor = new VirtualBackground({ image: "green.png" });

インスタンスの初期化を行います。

await backgroundProcessor.initialize();

createProcessedStream によって、デバイスからの映像に対して背景差し替え処理を行った映像の ProcessedStream を取得できます。 ProcessedStream の track を用いて、背景差し替え処理を行った映像の MediaStream を作成できます。

const result = await backgroundProcessor.createProcessedStream();
const stream = new MediaStream([result.track]);

作成した MediaStream を videoElement の srcObject に割り当てることで映像を再生できます。

videoElement.srcObject = stream;
await videoElement.play();

BlurBackground の使い方

BlurBackground のインスタンスを作成します。

import { BlurBackground } from "skyway-video-processors";
const backgroundProcessor = new BlurBackground();

インスタンスの初期化を行います。

await backgroundProcessor.initialize();

createProcessedStream によって、デバイスからの映像に対して背景ぼかし処理を行った映像の ProcessedStream を取得できます。 ProcessedStream の track を用いて、背景ぼかし処理を行った映像の MediaStream を作成できます。

const result = await backgroundProcessor.createProcessedStream();
const stream = new MediaStream([result.track]);

作成した ProcessedStream を videoElement の srcObject に割り当てることで映像を再生できます。

videoElement.srcObject = stream;
await videoElement.play();

JavaScript SDKとの連携方法

バーチャル背景による加工を行った映像を SkyWay で送信する映像として利用することができます。

VirtualBackground, もしくは BlurBackground の初期化を行い、そのインスタンスを JavaScript SDK に引数として渡します。

const backgroundProcessor = new BlurBackground();
await backgroundProcessor.initialize();

const video = await SkyWayStreamFactory.createCustomVideoStream(backgroundProcessor, {
    stopTrackWhenDisabled: true,
});

const me = await room.join();
await me.publish(video);

API リファレンス

こちらに API リファレンスを公開しています。

サンプル

こちらにサンプルアプリを公開しています。

解放・破棄処理

Tips