最近パソコンばっかりやっていて猫背が酷いので、何とか改善しようと試みました。

概要

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アプリを作った気がします。よければ使ってみてください。最後に、

通知を許可するのを忘れないで！

とだけ言っておきます。では、さようなら！