フレクトのクラウドblog re:newal

http://blog.flect.co.jp/cloud/からさらに引っ越しています

Amazon Chime SDKの新機能 背景置き換え機能(≒仮想背景機能)を使ってみた

こんにちは。研究開発室の岡田です。

先日(2022/1/25)、Amazon Chime SDK for Javascript に待望の背景置き換え機能が追加されましたね。

aws.amazon.com

これまで、Amazon Chime SDKアプリ開発者は独自の方法で仮想背景機能を作成する必要がありましたが()、AWS 公式での今回の機能追加によって、よりシンプルに仮想背景機能を作成することができるようになりました。

また、この機能は以前より提供されていた Amazon Chime SDK for Javascript の Video Processing API を使用して実現されているので、この機能を使用していた開発者(例えばBackground Blur)にとっては、ほとんど追加の学習なく使用できるようになっています。

それでは、どのような感じで動くのか、仮想背景機能を作成して試してみましょう。作成した仮想背景機能の動作は次のような感じになります。 ezgif com-gif-maker

前提知識

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 で確認するとこんな感じになってしまいます。 image

背景の画像を切り替えるユースケースがある場合は、一度作成した BackgroundReplacementProcessor の参照をキャッシュしておいて、setImageBlobメソッドを呼んで背景の画像を設定してあげると良いのではないかと思います。

replacementProcessor.setImageBlob(imageBlob);

デモ

今回ご紹介した内容のデモを次のリポジトリに置きました。Branch は aws-demo02 です。

https://github.com/w-okada/amazon-chime-bg-blur-demo

次のように clone して Readme に従って動かしてみてください。なお、Readme にも記載の通り、あらかじめ AWS の Credential を設定しておく必要があります。

$ git clone https://github.com/w-okada/amazon-chime-bg-blur-demo.git -b aws-demo02

会議室に入室後、画面上部のボタンから仮想背景の設定ができるようになります。 image

実際に動かすとこんな感じです。 ezgif com-gif-maker

少し荒い感じもしますが、なかなかいい感じになってますね。

CPU 負荷の簡易評価

簡易的にですが、タスクマネージャで CPU にどのくらい負荷がかかるのかを見てみました。 今回の評価には ThinkPad(corei5 8350U 1.7GH)を用いました。

image

CPU 使用率のグラフに青でコメントしている部分が背景置き換えをしていない時の CPU 負荷です。赤でコメントしているところが背景置き換えをしている時の CPU 負荷です。ざっくりではありますが、背景置き換えを行うことによって最大でも 6%位の使用率上昇のようです。かなり低負荷だと思います。この負荷で上記性能というのはなかなか良いのではないでしょうか。

なお、以前背景ぼかしで評価した時も大体これくらいでした。[参考1]

また、今回の機能も背景ぼかしと同様に、wasm を CPU で動かしていると推測されますので、GPU の計測はしていません2

その他

今回はご紹介しませんでしたが、背景置き換え機能には、CPU の使用状況に応じて処理をスキップする機能があるようです。ミッドレンジのスマホなどではまだまだ処理性能が限られているので、そういったユーザにはありがたい機能なのではないかと思います。機会を見て試してみたいと思います。

まとめ

今回は、Amazon Chime SDK for Javascript の新機能である背景置き換え機能を使って仮想背景を作成しました。 本当に待ち望んでいた公式実装ですので、おおいに活用したいと思います!!

最後に

弊社 FLECT は、Salesforce を中心に AWS, GCP, Azure を用いたマルチクラウドシステムの提案、開発を行っております。 また、ビデオ会議システムについては、Amazon Chime SDK を中心とした各種ビデオ会議用 SDK を用いたシステムの開発しており、サービス化の実績もあります。 ご興味をお持ちいただけたら是非ご相談ください。

謝辞

人物の動画、背景画像はこちらのサイトの画像を使わせていただきました。 https://pixabay.com/ja/ https://www.irasutoya.com/

Disclaimer

本ブログのソフトウェアの使用または使用不能により生じたいかなる直接損害・間接損害・波及的損害・結果的損害 または特別損害についても、一切責任を負いません。


  1. 使用する PC が統一できてなくてすみません。。。

  2. GPU 使っていないという仮説を検証するためにも GPU 使用率を見ても良かったのですが、正直に言うと評価時点ではそこまで頭が回ってませんでした。 背景ぼかしの時と同じミス。。。