困ったー

WIN10・アプリ・ゲームで困ったことを調べてみた

「こまったー」は困ったことを調べたブログです。

コロナ対策 |  Teams |  エクセル |  VisualStudio | 

スポンサーリンク


【JavaScript】顔や手の認識系人工知能JSのまとめ

JavaScriptで顔や手を認識できるライブラリがあります。

ここではライブラリと、そのデモを簡単に見れるページをまとめていきます。

生体の認識

顔認識

Robots at Kaist

clmtrackr.js

ブラウザ上で顔認識でよく使われているライブラリです。

精度もまずまずですが、ひとりまでのようです。

 

コードはこちら。

GitHub - shimabox/face_recognition_with_clmtrackr: Sample of face recognition with clmtrackr.js

 

デモはこちら。

Face recognition with clmtrackr.js

 

face-api.js

tensorflow.jsを活用したライブラリ。

表情識別や顔パーツ識別にも対応。

ライブラリはこちら。

GitHub - justadudewhohacks/face-api.js: JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js

 

デモはこちら。

https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection

画像をアップすると判定できます。

f:id:apicode:20191201094100p:plain

 

ソースコード例はこちら。

ブラウザで顔、表情、パーツ位置の検出、誰かを当ててみる(face-api.js) – console dot log

https://itnext.io/face-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07

 

Face Detection

jQueryプラグインとしての顔識別です。

ライブラリはこちら。

GitHub - jaysalvat/jquery.facedetection: A jQuery plugin to detect faces on images, videos and canvases.

 

デモはこちら。

jQuery/Zepto Face Detection Plugin

 

ソースコード例はこちら。

javascriptでお手軽に顔認識できちゃうライブラリ - Qiita

 

js-objectdetect

ライブラリはこちら。

https://github.com/mtschirs/js-objectdetect/

 

デモはこちら。

Image Example

プルダウンから顔、口、目などを切り替えます。

f:id:apicode:20191201094408p:plain

 

Kittydar

猫の顔を識別。

ライブラリはこちら。

https://github.com/harthur/kittydar

 

デモはこちら。

http://harthur.github.io/kittydar/

 

猫写真をドラッグアンドドロップすると顔位置を計算します。

f:id:apicode:20191201093723p:plain

写真素材:写真素材 足成:くろねこ ⅳ

 

Pico.js

複数人にも対応した顔認識です。

 

ライブラリはこちら。

GitHub - shimabox/face_recognition_with_pico: Sample of face recognition with pico.js

 

デモはこちら。

pico.js: face detection in JavaScript

Face recognition with pico.js

 

Shape Detection API

コードサンプルはこちら。

JSで3分でできる「 顔認識 」Shape Detection API(ネット接続も不要) - Qiita

 

 

手を認識

js-handtracking

ライブラリはこちら。

https://github.com/jcmellado/js-handtracking

 

デモはこちらから。

https://jcmellado.github.io/js-handtracking/fast_demo/fast_demo.html

 

うちで試したところ、背景などを手として認識してしまうことが多く、背景は単色スクリーンにしておかないと効果は薄い印象でした。

f:id:apicode:20191130094713p:plain

 

ポジションでも差があるため、手全体を認識する場合もあれば、手の上部だけ特徴点が抽出されているというケースもありました。

f:id:apicode:20191130095230p:plain

 

 

物体識別

TensorFlow.js

利用方法は以下参照。

https://www.tensorflow.org/js/tutorials/setup?hl=ja

 

ライブデモはこちら。

https://z364noozrm.codesandbox.io/

判定表示されるまで2,3秒かかりました。

 

ソース例はこちら。

https://nanonets.com/blog/object-detection-tensorflow-js/

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

利用規約・プライバシーポリシー |〇問い合わせ