フェイストラッキングという技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。
フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTMLでフェイストラッキングを実現する方法を紹介します。
ウェブテクノロジーでフェイストラッキングに挑戦しよう
ウェブテクノロジーで簡単にフェイストラキングを実現するには、JavaScriptライブラリ「clmtrackr」が挙げられます。このライブラリでは、負荷が高いフェイストラッキングの処理をWebGLで行っています。ライブラリのGitHubページではさまざまなデモが用意されています。
▲画像から顔を検出しているデモ
JSライブラリclmtrackrで画像や動画の顔の位置を検出する
clmtrackrは、画像や動画・Webカメラの映像から、顔や顔のパーツの位置や傾きを検出できます。検出した顔の情報は2D座標として取得できます。鼻の位置に犬の鼻の画像を重ねてデコることも可能です。
本記事では、clmtrackrを使ったフェイストラッキングのオリジナルデモを4つ紹介します。clmtrackrの詳細な使い方は割愛しますが、デモのコードにコメントを記載してますので、そちらを参考ください。
デモ① 画像から顔を検出
静止画像から顔を検出するデモを紹介します。読み込まれた画像を解析し、眉、目、鼻、口、顔の輪郭を検出します。
デモ② 動画から顔を検出
動画から顔を検出するデモです。動画の1コマずつに「画像から顔を検出するデモ」と同じ処理を実行して検出します。
デモ③ Webカメラの映像から顔を検出
「動画から顔を検出するデモ」の動画部分をWebカメラの映像に差し替えたデモです。ブラウザからWebカメラへのアクセスは、HTMLのMediaStream APIを使用しています。
MediaStream APIは現行ブラウザではすべて対応しています（Can I Use…参照）。
デモ④ 検出した顔に画像をマスキング
「Webカメラの映像から顔を検出するデモ」で検出した顔に、顔画像をマスキングしてみます。
顔の位置だけではなく表情にも連動します。検出した顔にマスキングするには、マスク画像と顔のパーツ（眉、目、鼻、口、顔の輪郭）が位置する座標が必要になります。座標は、次の図のような71箇所をJavaScriptの配列で指定します。
次のソースコードは、実際に公式サンプルで使用されているものです。図に記載されている数字の順番で配列に格納します。公式のサンプルでは小数点まで詳細に指定されていますが、それほど誤差はでないため、小数点部分は省いても問題ありません。
// マスクの座標
var maskData = [
[266.539778613571, 254.84378898872825],
[266.3039097561577, 285.302233189556] /* (省略) */,
,
[390.7655312307384, 254.4464699123733],
];
最後に
JavaScriptでも簡単にフェイストラッキングが実現できました。2016年の本記事公開当時は、スマートフォンでの処理性能の課題がありました。しかし、現代のスマートフォンでは性能が向上しており、実用できるレベルまで到達しています。
ICS MEDIAでは他にもさまざまなフェイストラッキングのJavaScriptライブラリを紹介しています。次の記事も参考にしてみてください！
※この記事が公開されたのは8年前ですが、4か月前の7月に内容をメンテナンスしています。
