コンピュータへの入力インタフェースはマウスとキーボードが基本です。最近ではタッチ画面を使って直接操作されることもありますが、マウスの延長と言えるでしょう。他はMIDIのような機器、バーコードリーダーなども知られています。 今回紹介するHandsfree.jsはWebカメラを入力機器にします。指や顔を認識し、特定の動作を入力と紐付けます。

Handsfree.jsの使い方

指先を動かしてポインターを操作しています。

複数の指先、左右を認識します。

顔を動かすと画面が動くデモです。

Handsfree.jsは機械学習を用いて指先や顔の動きを認識します。口を尖らせるとクリックとするような仕組みもできます。さらに全身のポーズ認識もできるようです。認識はTensorflow.jsを利用しており、利用時にはモデルのダウンロードが必要です。

Handsfree.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Handsfree.js MIDIBlocks/handsfree: Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap ✨?