Amazon Chime SDKの新機能 背景置き換え機能(≒仮想背景機能)を使ってみた
こんにちは。
先日(2022/1/25)、Amazon Chime SDK for Javascript に待望の背景置き換え機能が追加されましたね。
これまで、Amazon Chime SDK のアプリ開発者は独自の方法で仮想背景機能を作成する必要がありましたが(例)、AWS 公式での今回の機能追加によって、よりシンプルに仮想背景機能を作成することができるようになりました。
また、この機能は以前より提供されていた Amazon Chime SDK for Javascript の Video Processing API を使用して実現されているので、この機能を使用していた開発者(例えばBackground Blur)にとっては、ほとんど追加の学習なく使用できるようになっています。
それでは、どのような感じで動くのか、仮想背景機能を作成して試してみましょう。作成した仮想背景機能の動作は次のような感じになります。
前提知識
Amazon Chim SDK for Javascript を使ってアプリケーションを開発した経験のあるエンジニアであれば、背景置き換え機能はかなり簡単に利用できるようになっています。特別に必要となる前提知識はないと思います。あえて言うなら Video Processing API を知っておくとより理解が深まると思います。Video Processing API については過去にご紹介したことがあるので、こちらの記事をご覧ください。
仮想背景機能の実装
今回は、以前の記事で紹介した背景ぼかしのデモに仮想背景機能を追加する形にしようと思います。
ここでは仮想背景機能の実装についてのみ紹介します。全体像は、後述するリポジトリのuseChimeClient.tsを参照ください。
背景置き換えを機能を用いて仮想背景機能を作成する方法は、公式のドキュメントにも記載されています。次のコードは公式のページから抜粋してコメントをいれたものです。カメラデバイスから入力された映像の背景を置き換える仮想デバイス(transformDevice)を作成しています。
const processors = [];
if (await BackgroundReplacementVideoFrameProcessor.isSupported()) {
const image = await fetch("https://pathtoimage.jpeg"); // (1) fetch image for virtual background.
const imageBlob = await image.blob();
const options = { imageBlob };
const replacementProcessor =
await BackgroundReplacementVideoFrameProcessor.create(null, options); // (2) create processor for background replacement.
processors.push(replacementProcessor);
}
let transformDevice = new DefaultVideoTransformDevice(
logger,
device,
processors
); // (3) create virtual device.
(1)でイメージをフェッチして、(2)でそれを入力としてBackgroundReplacementProcessorを作成しています。これが背景置き換え処理を行うコンポーネントです。
(3)で、このBackgroundReplacementProcessorとカメラデバイスを入力してtransformDeviceを作成します。上記コード上には記載されていませんが、最後に、これをMeetingSessionの chooseVideoInputDevice で指定してあげれば仮想背景機能の出来上がりです。例えばこんな感じになると思います。
meetingSession.audioVideo.chooseVideoInputDevice(transformDevice);
すごい簡単ですね。
この公式ドキュメント通り作成してもいいのですが、このソースコード通りだと背景の画像を変えるたびに毎回 BackgroundReplacementProcessor を作成してしまい効率が良くないです。デフォルトでは BackgroundReplacementProcessor は Web Worker で起動するようなので、うまく終了処理をしないと Web Worker のプロセスがどんどん増えていってしまいます。
Chrome の Developper Tools で確認するとこんな感じになってしまいます。
背景の画像を切り替えるユースケースがある場合は、一度作成した BackgroundReplacementProcessor の参照をキャッシュしておいて、setImageBlobメソッドを呼んで背景の画像を設定してあげると良いのではないかと思います。
replacementProcessor.setImageBlob(imageBlob);
デモ
今回ご紹介した内容のデモを次のリポジトリに置きました。Branch は aws-demo02 です。
次のように clone して Readme に従って動かしてみてください。なお、RReadme にも記載の通り、あらかじめ AWS の Credential を設定しておく必要があります。
$ git clone https://github.com/w-okada/amazon-chime-bg-blur-demo.git -b aws-demo02
会議室に入室後、画面上部のボタンから仮想背景の設定ができるようになります。
実際に動かすとこんな感じです。
少し荒い感じもしますが、なかなかいい感じになってますね。
CPU 負荷の簡易評価
簡易的にですが、タスクマネージャで CPU にどのくらい負荷がかかるのかを見てみました。
今回の評価には ThinkPad(corei5 8350U 1.7GH)を用いました。
CPU 使用率のグラフに青でコメントしている部分が背景置き換えをしていない時の CPU 負荷です。赤でコメントしているところが背景置き換えをしている時の CPU 負荷です。ざっくりではありますが、背景置き換えを行うことによって最大でも 6%位の使用率上昇のようです。かなり低負荷だと思います。この負荷で上記性能というのはなかなか良いのではないでしょうか。
なお、以前背景ぼかしで評価した時も大体これくらいでした。[参考[1]]
また、今回の機能も背景ぼかしと同様に、wasm を CPU で動かしていると推測されますので、GPU の計測はしていません[2]。
その他
今回はご紹介しませんでしたが、背景置き換え機能には、CPU の使用状況に応じて処理をスキップする機能があるようです。ミッドレンジのスマホなどではまだまだ処理性能が限られているので、そういったユーザにはありがたい機能なのではないかと思います。機会を見て試してみたいと思います。
まとめ
今回は、Amazon Chime SDK for Javascript の新機能である背景置き換え機能を使って仮想背景を作成しました。
本当に待ち望んでいた公式実装ですので、おおいに活用したいと思います！！
謝辞
人物の動画、背景画像はこちらのサイトの画像を使わせていただきました。
Disclaimer
本ブログのソフトウェアの使用または使用不能により生じたいかなる直接損害・間接損害・波及的損害・結果的損害 または特別損害についても、一切責任を負いません。
Discussion