Tensorflow.jsのBodyPix 2.0を使ってみた

こんにちは。最近センサー系に興味を持ち始めているエンジニアの森(@d_forest)です。今回は11月18日にリリースされたBodyPix 2.0を試しに使ってみたので、そのコードを公開し、試してみた感想を書きます。

[Updated] BodyPix: Real-time Person Segmentation in the Browser with TensorFlow.js[Updated] BodyPix: Real-time Person Segmentation in the Browser with TensorFlow.js

BodyPixとは？

BodyPix の概要: ブラウザと TensorFlow.js によるリアルタイム人セグメンテーションBodyPix の概要: ブラウザと TensorFlow.js によるリアルタイム人セグメンテーション

↑上の記事の日本語翻訳です。これを読むとよくわかります。

要約すると、BodyPixはTensorflow.jsの機械学習モデルのひとつで、ブラウザと端末のカメラだけで、リアルタイムに人の体の部位や写っている領域を分割できるようになります。

今回の2.0では、複数人の同時分割などの新機能が追加され、精度も向上したようです。

BodyPixのソースコードはデモと一緒にGithubで公開されています。

tensorflow/tfjs-models

BodyPixを使ってみる

Vue.jsでサンプルを実装してみました。といっても、公式のデモを参考にしてすこし変更したくらいです。

dforest/bodypix-sample

こちらでこのソースコードのデモを試すことができます。

bodypix-sample

実装してみて、とても簡単にボディトラッキングや領域分割を実装できるのがよく分かりました。そのため開発者は、それらの処理はBodyPixに任せて、ビジネスロジックに集中することができそうです。

また、ブラウザで実行できるので、スマホでもアプリインストールなしで使えます。スマホであればほぼ必ずカメラがついていますので、非常に相性がよいですね。

ただ、全てクライアントでの処理になるので、処理速度は端末に依存します。特にリアルタイムの場合、処理する解像度が大きいと処理速度が落ち、フレームレートが遅くなってしまいます。解像度を小さくするなどして、処理速度が落ちないような工夫は必要です。

drawPixelatedMaskのバグに注意

drawPixelatedMaskは人の範囲をピクセルマスクしてくれる面白いメソッドです。ただこのメソッドには、人が映ってないとエラーを吐いて止まるバグがありました（実装時）。

そのため、以下の用にNull避けをする必要があるのでご注意ください。

// https://github.com/dforest/bodypix-sample/blob/master/src/components/BodyPix.vue#L170-L185
const ctx = canvas.getContext('2d')
     const coloredPart = bodyPix.toColoredPartMask(segmentation, self.colorScale)
     if (coloredPart != null) {
       bodyPix.drawPixelatedMask(
         canvas,
         video,
         coloredPart,
         1.0,
         0,
         true,
         10.0
       )
     } else {
       ctx.clearRect(0, 0, canvas.width, canvas.height)
     }

______________________________________
PARTYでは未来の体験を社会にインストールすべく、好奇心旺盛なエンジニアを募集してます！

PARTY