こんにちは。研究開発室の岡田です。
前回は、Amazon Chime SDKでビデオセッションの上限（16セッション）を超えて映像配信する実験をご紹介しました。
今回もAmazon Chime SDKについて、最近他のビデオ会議ツール等で話題になっていた機能を実現する方法をご紹介したいと思います。
今回ご紹介するのは、パワーポイントなどのスライドをバーチャル背景にする方法です。 最初に大きな話題になったのは、mmhmmでしたね。その後、Zoomでも同様の機能がリリースされました。リモートで行うプレゼンに臨場感が出て良いと思います。
これをAmazon Chime SDKを用いて実現する方法をご紹介します。 Amazon Chime SDK(js)を使うので、特にソフトウェアをインストールすることなく使えちゃいます！！ また、スライド以外にも、画面共有可能なウィンドウをすべて背景にすることができます。 なので、例えばエディタとスピーカーを表示しながらライブコーディング、なんてことも出来たりします。
実際の動作イメージはこちらです。
Amazon Chime SDKでカメラの映像を送信する方法
以前、バーチャル背景の記事でもご説明した内容ですが、チュートリアルやサンプルなどではカメラの映像を送信する際の一般的な方法としてカメラデバイスのIDを登録する方法が紹介されています。しかし、実は同一のメソッドでMediaStreamを登録することもできるようになっています。
つまり、実はAmazon Chime SDKではMediaStreamさえ取得できれば、何でもシェアできるという柔軟な設計になっているのです。 たとえば、HTMLCanvasElementからはMediaStreamが取得できます。このため、HTMLCanvasElementになにか描画して、それを配信することが出来ます。 上述の記事では、これを利用してバーチャル背景は実現したのでした。 今回も、これを利用してスライドをバーチャル背景にします。
スライドの画像取得
バーチャル背景では、カメラの映像をBodyPixを用いて人物の領域と背景の領域を識別し、背景部分を指定された背景画像の映像に置き換えてHTMLCanvasElementに描画していました。 今回は、この背景画像を、パワーポイントなどのアプリケーションのウィンドウから取得します。下記のようにを呼び出すことで、アプリケーションの映像をMediaStreamとして取得できます。これをHTMLVideoElementのソースに設定した後に、カメラ映像と同じサイズのHTMLCanvasElementにフレームを描画します。そして、カメラの映像のフレームごとに、このHTMLCanvasElementのイメージをキャプチャして背景画像として用います。
navigator.mediaDevices.getDisplayMedia().then(media => {
...
})
処理の流れを纏めると次のようになります。図中上部は前述の通常のバーチャル背景の処理の流れです。図中下部が今回の処理です。赤字部分が変更点となります。
バーチャルフォアグランドもやってみた。
ここまでの説明で、Amazon Chime SDKでは、様々な加工をした映像を配信できることがおわかりになるかと思います。
例えば、下図は人物を線画にしたり、Asciiアートにしたりしてみたものです。
バーチャル背景（バックグラウンド）ならぬ、バーチャルフォアグラウンドといったところでしょうか。
このように、Amazon Chime SDKでは、カメラの映像配信用にMediaStreamを受け付けることで、さまざまな拡張が可能になっています。楽しいですね。
デモ
今回ご紹介したものと同等のロジックを組み込んだサイトを用意しました。
https://flect-lab-web.s3-us-west-2.amazonaws.com/001_virtual_background/index.html
FLECT Amazon Chime Meeting
また、現在FLECT研究開発室で、ビデオ会議の新機能のテストベッドとしてビデオ会議室システムを作成しており、リポジトリを公開しています。 今回ご紹介した機能も、こちらに実装されていますので、興味があればアクセスしてみてください。
https://github.com/FLECT-DEV-TEAM/FLECT_Amazon_Chime_Meeting
最後に
今回は、Amazon Chime SDKでスライドをバーチャル背景に設定する方法をご紹介しました。 また、この方法は、画面共有可能なアプリケーションであれば何でも背景に設定することができます。 このため、例えばライブコーディングを配信してみるなど、様々な活用の仕方も考えられると思います。是非お試しください。
弊社FLECTでは、Amazon Chime SDKを用いたシステムの提案、構築をしております。 興味をお持ちいただけたら是非ご相談をいただければと思います。
次回は、またAmazon Chimeで遊ぶか、以前紹介したマルチバーコードリーダの技術的な内容をご紹介するかをしようと思ってます。 では。
