株式会社ICS15728699今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。Webテクノロジーでフェイストラッキングに挑戦しようWebテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイストラッキングの処理をWebGLで行っています。ライブラリのGitHubページではさまざまなデモが用意されているのでお試しください。▲画像から顔を検出しているデモJSライブラリclmtrackrで画像や動画の顔の位置を検出するclmtrackrは、画像や動画・Webカメラの映像から、顔や顔のパーツの位置や傾きを検出できます。検出した顔の情報は2D座標として取得できるので、SNOWのように鼻の位置に犬の鼻の画像を重ねてデコることも可能です。本記事では、clmtrackrを使ったフェイストラッキングのオリジナルデモを4つ紹介します。詳しいclmtrackrの使い方は割愛しますが、デモのコードにコメントを記載してますので、そちらを参考ください。すべてのコードを見るデモファイル(ZIP)をダウンロード画像から顔を検出するデモデモを別ウィンドウで開くコードを確認する画像から顔を検出するデモです。動画から顔を検出するデモデモを別ウィンドウで開くコードを確認する動画から顔を検出するデモです。動画の1コマずつに「画像から顔を検出するデモ」と同じ処理を実行して検出します。Webカメラの映像から顔を検出するデモデモを別ウィンドウで開くコードを確認する「動画から顔を検出するデモ」の動画部分をWebカメラの映像に差し替えたデモです。APIを使用しています。APIの対応ブラウザです。Edge・Firefox・Chromeは対応していますが、IE・Safariは未対応となっています。▲灰色の行が現行版バージョンを、緑色になっているものが対応していることを示します。use」より検出した顔に画像をマスキングするデモデモを別ウィンドウで開くコードを確認する「Webカメラの映像から顔を検出するデモ」で検出した顔に、顔画像をマスキングするデモです。顔の位置だけではなく表情にも連動します。輪郭)が位置する座標が必要になります。座標は、次の図のような71箇所をJSの配列で指定します。次のソースコードは、実際に公式サンプルで使用されているものです。図に記載されている数字の順番で配列に格納します。公式のサンプルでは小数点まで詳細に指定されていますが、それほど誤差はでないため、小数点部分は省いても問題ありません。254.4464699123733]];最後にJavaScriptでも簡単にフェイストラッキングが実現できました。1つ課題なのはフェイストラッキングの処理負荷です。パソコンほどのスペックがあれば、検出した顔になめらかな演出を追随させることができますが、スマホではまだ動作も重くフレームレートを下げたり、検出エリアを絞るなどの工夫が必要となりますでしょう。スマホのマシンスペックも日々進歩しているので、実用できるレベルまで到達する日もそう遠くないと考えられます。平成30年3月20日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。