---
lang: ja
path: user-guide/javascript-sdk/video-processing
labels: ユーザーガイド/JavaScript SDK/バーチャル背景と背景ぼかし処理の実装
metaTitle: バーチャル背景と背景ぼかし処理の実装 ｜ JavaScript SDK ｜ ユーザーガイド ｜ SkyWay（スカイウェイ）
---

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

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

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

## 対応ブラウザ

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

- Chrome
- Edge
- Safari

> macOSのSafari、もしくはiOSの各ブラウザでは、解像度の大きな映像に対して使用するとフレームレートが低下する可能性があります。該当の環境では、負荷軽減のため適切な解像度でのご利用をおすすめします。

## インストール

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

```
npm install skyway-video-processors
```

## 使い方

以下の使い方の詳細は[Sample](https://github.com/skyway/skyway-video-processors/tree/main/examples/simple)を参照してください。

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

### VirtualBackground の使い方

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

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

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

```ts
await backgroundProcessor.initialize();
```

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

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

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

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

### BlurBackground の使い方

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

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

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

```ts
await backgroundProcessor.initialize();
```

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

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

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

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

## JavaScript SDKとの連携方法

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

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

```ts
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 リファレンスを公開しています。

- [API リファレンス](https://github.com/skyway/skyway-video-processors/tree/main#api)

## サンプル

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

- [バーチャル背景を利用したカメラ映像を取得するアプリケーション](https://github.com/skyway/skyway-video-processors/tree/main/examples/simple)
- [バーチャル背景を利用してSkyWayで通話するアプリケーション](https://github.com/skyway/skyway-video-processors/tree/main/examples/skyway-js-sdk)