0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

猫背を改善するために姿勢を検知するWebアプリを作った話

Posted at

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

概要

mosaic.png

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?