今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、面白い写真へ編集することが若い女性の間で流行っています。

このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。

フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。

Webテクノロジーでフェイストラッキングに挑戦しよう

Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がおすすめです。このライブラリでは、負荷が高いフェイストラッキングの処理をWebGLで行っています。ライブラリのGitHubページではさまざまなデモが用意されているのでお試しください。

画像から顔を検出しているデモ

▲画像から顔を検出しているデモ

JSライブラリclmtrackrで画像や動画の顔の位置を検出する

clmtrackrは、画像や動画・Webカメラの映像から、顔や顔のパーツの位置や傾きを検出できます。検出した顔の情報は2D座標として取得できるので、SNOWのように鼻の位置に犬の鼻の画像を重ねてデコることも可能です。

本記事では、clmtrackrを使ったフェイストラッキングのオリジナルデモを4つ紹介します。詳しいclmtrackrの使い方は割愛しますが、デモのコードにコメントを記載してますので、そちらを参考ください。

画像から顔を検出するデモ

画像から顔を検出するデモです。読み込まれた画像を解析し、眉、目、鼻、口、顔の輪郭を検出します。

動画から顔を検出するデモ

動画から顔を検出するデモです。動画の1コマずつに「画像から顔を検出するデモ」と同じ処理を実行して検出します。

Webカメラの映像から顔を検出するデモ

「動画から顔を検出するデモ」の動画部分をWebカメラの映像に差し替えたデモです。ブラウザからWebカメラへのアクセスは、HTML5のMediaStream APIを使用しています。次の図は執筆時点でのMediaStream APIの対応ブラウザです。Microsoft Edge・Firefox・Chromeは対応していますが、IE・Safariは未対応となっています。

Can I useキャプチャ

▲灰色の行が現行版バージョンを、緑色になっているものが対応していることを示します。「Can I use」より

検出した顔に画像をマスキングするデモ

「Webカメラの映像から顔を検出するデモ」で検出した顔に、顔画像をマスキングするデモです。顔の位置だけではなく表情にも連動します。検出した顔にマスキングするには、マスク画像と顔のパーツ(眉、目、鼻、口、顔の輪郭)が位置する座標が必要になります。座標は、次の図のような71箇所をJSの配列で指定します。

マスキングに必要なデータの解説図

次のソースコードは、実際に公式サンプルで使用されているものです。図に記載されている数字の順番で配列に格納します。公式のサンプルでは小数点まで詳細に指定されていますが、それほど誤差はでないため、小数点部分は省いても問題ありません。

// マスクの座標
var maskData = [[266.539778613571, 254.84378898872825], [266.3039097561577, 285.302233189556], /* (省略) */, [390.7655312307384, 254.4464699123733]];

最後に

JavaScriptでも簡単にフェイストラッキングが実現できました。1つ課題なのはフェイストラッキングの処理負荷です。パソコンほどのスペックがあれば、検出した顔になめらかな演出を追随させることができますが、スマホではまだ動作も重くフレームレートを下げたり、検出エリアを絞るなどの工夫が必要となりますでしょう。ですが、スマホのマシンスペックも日々進歩しているので、実用できるレベルまで到達する日もそう遠くないと考えられます。みなさんもぜひフェイストラッキングに挑戦してください!

スマートフォンブラウザでフェイストラッキング

▲ スマートフォンブラウザ(Android Chrome)でフェイストラッキングのデモが再生できる