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

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

注目のGoogle Meet 仮想背景機能のモデルをAmazon Chime SDKで使ってみた

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

前回の投稿Amazon Chime SDK*1のVideo Processing APIを使って仮想背景を実現する方法をご紹介しました。この中では人物と背景のセグメンテーションをBody Pixを用いて行っていました。今回は、より軽量といわれているGoogle Meetのモデルを用いて仮想背景機能を実装、評価してみたいと思います。

こんな感じに動きます。 f:id:Wok:20210118215437g:plain

*1:Amazon Chime SDKAmazonが提供するビデオ会議システムをWebアプリに組み込むためのSDK

続きを読む

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

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

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

github.com

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

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

続きを読む

Amazon Chime SDK React Component LibraryのデモにChat機能を追加する

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

前回、Amazon Chime SDK React Component Libraryについて簡単な紹介記事を投稿しました。 執筆時点での、このライブラリの最新のアップデートであるver1.5.0ではChat関連のコンポーネントが追加されました。今回、これを使ってAWS公式のデモにChat機能を追加してみようと思います。

具体的には、このようなものを作ります。

f:id:Wok:20201126120942g:plain

なお、今回はReactを使ったコーディングを使った少し込み入った話となります。 単純に動かしてみたいだけという方は、最後にリポジトリのURLを示しておりますので、そちらからコードを入手して動かしてみてください。

続きを読む

Amazon Chime SDK React Component Library のデモを動かしてみた件

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

今年に入ってからAmazon Chime SDK (JavaScript SDK)の紹介記事を何度か投稿してきました。

当時からAmazon Chime SDKはWebRTCの難しいところを隠蔽しており、使いやすいSDKでした。 これに加え、AWSは今年9月に、これを更にReactでラップしたAmazon Chime SDK React Component Libraryを発表しました。

aws.amazon.com

シンプルでありながらかっこいいアプリが開発できるということなので、 Amazon Chime SDKでもやったように、今回もデモを動かしてどのようなことができるのか見てみたいと思います。

続きを読む

Webworkerを使ってFaceSwapとバーチャル背景を同時に行う話。

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

前回は、Amazon Chime SDKを用いてPPTのスライドをバーチャル背景にしたビデオ会議を行う方法をご紹介しました。

cloud.flect.co.jp

前回ご紹介した方法は、AIの処理や画像の処理をブラウザ上で行うことで実現していました。 今回はこれらの処理をwebworkerを用いて実行する方法についてご紹介したいと思います。

webworkerを使うことで、重いAI処理や画像処理を複数並列実行できるようになり、fpsの改善をはかることができます。 例えば、次の様な加工をリアルタイムで実施できるようになります。 f:id:Wok:20201018023426g:plain

続きを読む