最近パソコンばっかりやっていて猫背が酷いので、何とか改善しようと試みました。
概要
Webカメラから姿勢を検知し、猫背だと警告するWebアプリです。
個人情報(顔)は隠してあります。右の青い色は体の部位を示すものがぼかされているので決して体調が悪いわけではありません
技術とその他諸々
コード全文はGithubにあげてます。
一応Github Pagesもあります。試したい方はどうぞ。
色々解説します。
画像取得
navigator.mediaDevices.getUserMedia
でストリームを取得し、300ms毎に姿勢を検知しています。
姿勢検知 - Tensorflow.js / Posenet
Tensorflow.jsとPosenetを使いました。
PosenetのestimateSinglePose
を使って体の各部位を検出しています。
その中から両目と両肩の座標を用いています。
Posenetを知った経緯がこれだとは言えない
猫背度判定 - ゴリ押しアルゴリズム
肩の丸まりのスコアを
$score_1 = 100 - 100sigmoid(\frac{肩幅}{目幅} - 3)$
で、頭の近づきを
$score_2 = 100sigmoid(\frac{3肩幅}{distance(両目の中心, 両肩の中心)-1.5})$
で計算し、最終スコアをそれぞれの平均%としています。
ほとんどChatGPTに考えてもらいました
ジャッジ - ただのif文
スコアが35以下の場合健康的な姿勢です!
スコアが45以下の場合少し危険です
スコアが70以下の場合猫背です!
もっと高い場合の場合今すぐ姿勢を正しましょう!
というメッセージが表示されます。
通知- Notification API
猫背(スコアが45以上)の状態が10秒ほど続くと、通知されます。
1. タブのタイトルが変わります。
2. バイブレーションします。(モバイル端末のみ)
3. 通知が送られます。 Chromeの通知設定オフになっていた事に気づかなかった
最後に
今までで一番役に立つ(?)Webアプリを作った気がします。よければ使ってみてください。最後に、
通知を許可するのを忘れないで!
とだけ言っておきます。では、さようなら!