ボクココ

個人開発に関するテックブログ

開発コンテストに出て、WebGL の未来を感じた話

ども、@kimihom です。久々の更新。

先週末、以下のような Twilio を使ったイベントに参加した。

twiliomeetup.doorkeeper.jp

この日は他の開発イベントも多く重なっていたようで、ドタキャンがたくさんいたなぁ。

今回の開発コンテストでは皆を “わっ!” と驚かせられるような機能の開発に挑戦した。

ビデオ通話での顔認識

そこで今回チャレンジしたのが、ビデオ通話での顔認識技術。

今後はリモートワークや遠隔地でのMTG、外部とのやりとりなどが当たり前になると思っている。そこで、ビデオ通話はより一般的になるはずで、そこで出てくるであろう課題が顔認識技術によって改善できると考えた。

例えば女性であれば在宅ワークの時にわざわざビデオ通話のためだけにメイクをしなければならないのだろうか。それは当然面倒なことである。また、一般的なビデオ通話でも普段より綺麗に加工された動画を相手に送った方が気持ち良くコミュニケーションが取れるということもあるだろう。というのも、デフォルトのカメラは上から下に見上げるような形で撮影するため、あまり綺麗に映らないのである。

もちろんミーティング用途以外にも、相手に顔をあまり見せたくないような場合にマスクする機能など、ビデオ通話の中で顔をうまく加工したり隠したりでいる機能ってのは需要があるように思う。

てことで、以下のようなものを作った。

まだアプリ自体は一般には公開していないものの、簡単なキャプチャを貼る。顔隠しているので多少は気軽にアップロードできるのがいい点だ。w


Mask De talk

こんな感じで、自分の送る画像をマスクで隠した状態で、相手に届けることができる。上の動画は2つページ立ち上げて自分の顔を2つ表示させてるけど、もちろん他人のPCとビデオ通話してお互いの顔をマスクすることが可能だ。

今回の開発で最も重要だったのは、相手に自分の選択したマスク状態の動画を送るという点である。ここの実装が最も難しく、チャレンジングなものとなった。

当日の DEMO は大成功。大いに会場を沸かすことができて大満足である。願わくば優勝したかったのだけど、残念ながら準優勝という結果で終わった(またかよw)。

技術的な話

実はこれ、全部 JavaScript で動いている。動画の撮影と送信は WebRTC (Twilio Video), マスク画像の共有は WebSocket (Twilio Sync)、そして動画にマスクを当て込むのは WebGL (clmtrackr) といった具合である。特に WebGL でどんなことができるのかは前々から興味を持っていて、新しいチャレンジをしてみる良い機会となった。

んで、顔をうまく隠せたら次は音声もいじりたい、ってなるよね。 WebAudio API を使えば、リアルタイムで音声を操作することが可能なようだ。これは突き詰めれば、完全に他人としてビデオ通話ができるようになるということはでないか・・・!そう考えた時、"この分野スゲー" って素人ながらに思った。

突き詰めると、この話は基本的に悪用のイメージが強いのだけども、世界をよりよくする方向にするための技術として考えてみたいなと思った。

ネタアプリとしても十分面白い Web アプリになってると思うので、そのうち一般公開するかもしれない。その時は是非 Mask De Talk を楽しんで頂けたら幸いである。

自分と全く関係ない分野にサクッとチャレンジしてみる。そんな時には開発コンテストでちょっくらやってみるのは面白いものだね〜。