Amazon Chime SDK の新機能 Video Processing APIを使って仮想背景を作る

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

12月21日にAmazon Chime SDK JS version 2.3.0がリリースされました。このリリースでは、新機能Video Processing APIが追加されました！

Video Processing APIはビデオ会議で用いる自分のカメラの画像(フレーム)を転送前に編集するAPIになります。これを使えば、たとえば、カメラの画像に写り込んだ背景をぼかす仮想背景機能が実現できます。実現方法は、公式のドキュメントを読む限り、以前このブログで紹介したHTMLCanvasを使用して実現していた方法に近いように思われます。とうとう公式実装が来たか！という感じです。ワクワクしますね。

それでは早速Video Processing APIを使って仮想背景を作ってみることにしましょう。

Video Processing APIの使い方

f:id:Wok:20201225114632p:plain

ドキュメントにも記載されているとおり、Video Processing APIでは、入力デバイス *1のフレームを一つ以上のVideoFrameProcessorがパイプライン処理する形で映像の編集を行います。 Video Processing APIでは、このパイプライン処理をラップするVideoTransformDeviceというクラス(interface)が提供されています。このクラスのコンストラクタに入力デバイスとVideoFrameProcessorの配列を渡してあげて、インスタンスを生成します。このVideoTransformDeviceのインスタンスは仮想的なビデオ入力デバイスとしてAmazon Chimeに渡すことが可能ですので、chooseVideoInputDeviceで渡してあげます。

つまり、

const transformDevice = new DefaultVideoTransformDevice(
    logger,
    deviceId, 
    [new SomeVideoFrameProcessorA(), ...]  // 画像編集機能を実装したVideoFrameProcessor
);

とVideoTransformDeviceを作成し、

meetingSession.audioVideo.chooseVideoInputDevice(deviceId)

としていたところ

meetingSession.audioVideo.chooseVideoInputDevice(transformDevice)

といったカタチで渡してあげることになります。

今回は、背景を他の画像に置き換える単一のVideoFrameProcessorを作成して仮想背景機能を実現します。 VideoTransformDeviceの作成の仕方はこんな感じになります。

const transformDevice = new DefaultVideoTransformDevice(
    logger,
    deviceId, 
    [new VirtualBackground()]  // 仮想背景機能を実装したVideoFrameProcessor
);

仮想背景機能(VideoFrameProcessor)

VideoFrameProcessor はフレームの画像処理を行うprocessメソッドを持つクラス（interface）です。このprocessメソッドの中身で人物と背景を識別し、背景を別の画像に置き換えます。人物と背景の識別には、以前の記事でご紹介したBodypixを用います*2。

processメソッドは、フレームのデータ（VideoFrameBuffer）の配列を引数として受けとるので、ここから画像データを抜き出して加工します。ざっくり下記のような感じです。

    async process(buffers: VideoFrameBuffer[]){
        for(const f of buffers){
            const canvas = f.asCanvasElement() // 画像データの抜き出し。
            // (1)画像の編集処理
        }
        return Promise.resolve(buffers)
    }

上記のソースコードの(1)画像の編集処理の部分で、bodypixを使って人物と背景を識別し、背景の置き換えを行います。具体的な処理は以前の記事に記載してありますので、ここでは省略します。

たったこれだけです。以前ご紹介したように自分でこれをやるためには、ダミーのHTMLVideoElementを用意して、ループを回してフレームの取得し、画像の編集といったことを実装する必要がアリましたが、そういった処理がごっそりと不要となります。

動作確認

では、動作を確認してみましょう。背景が画像に入れ替わっていますね。

f:id:Wok:20201229120135g:plain

リポジトリ

今回作成したソースコードは次のリポジトリに置いてあります。

https://github.com/w-okada/chime-videoprocess-ts

動作方法はリポジトリのREADMEをご確認ください。

まとめ

以上、Amazon Chime SDK の新機能 Video Processing APIsを用いて仮想背景を実装してみました。かなり簡単に実装できるようになっており、これまで我々が苦労して実装していたかなりの部分を省略することができました。なんとも複雑な気分ですが、メンテナンスが公式にされるので、トータルとしてはありがたいですね。

なお、FLECTでは、次世代ビデオ会議システムの機能開発を進めており、Amazon Chime を用いたテストベッドを作成しています。このテストベッドでは、ここで紹介した機能以外にも、チャット機能やホワイトボード機能も搭載しています。またCognito連携も実装しています。下記のリポジトリに公開していますので、是非ご活用ください。

https://github.com/w-okada/flect-chime-sdk-demo

最後に

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