疫情特殊時期，各企業、學校紛紛啟用遠端辦公和學習的方式，在辦公期間，除了要完成日常工作安排，還要照顧自身的飲食起居，在高強度的工作節奏和缺少運動鍛鍊的情況之下，如何及早發現健康隱患，快樂辦公？且看鵝廠小哥bottlejiang帶來的今日分享。
背 景
你，是否還在為當下的疫情憂心忡忡？你，是否還在為每日三餐苦苦思慮？不端正的坐姿是否讓你腰痠背痛？窄小的電腦螢幕是否讓你眼乾眼澀？
居家辦公期間，不知不覺間暴露了很多的健康隱患：
第一：坐姿問題
家裡的辦公環境相對簡陋，筆記本螢幕高度低，一天不知不覺的彎腰駝背。
第二：吃飯問題
不能出門，不能叫外賣，自己做飯不好吃，又累又乏味。
第三：喝水問題
高度投入工作時總是忘了喝水運動。
第四：情緒問題
疫情嚴峻，待在出租屋擔心染病，情緒低迷。
我命由我不由天，健康生活賽神仙！做為一個工程師，平日裡做了無數的需求，這一次，何不為自己做一個需求？用自己的專業能力，用自己的雙手，用程式碼，去開發，去創造，去解決以上問題。
對症下藥
1. 針對坐姿問題
要避免彎腰駝背，需要在我坐姿不端正的時候提醒我。那麼需要解決以下3個問題：
- 實時監控我的坐姿
- 判斷我的坐姿是否端正
- 當我坐姿不端正的時候提醒我
（1）監控
如何監控？辦法是使用電腦攝像頭！筆記本基本自帶，桌上型電腦可以通過接入外設的方式支援。
web 想要呼叫電腦攝像頭,只需要呼叫一個 api 就能輕鬆解決：navigator.mediaDevices.getUserMedia.
navigator.getUserMedia 已更名為 MediaDevices.getUserMedia。同時，由於隱私原因，該 api 僅在 https 下支援。
navigator.mediaDevices.getUserMedia 返回一個 promise 物件，支援音視訊、尺寸幀率等設定。
（2）判斷
能夠實時拍下我的坐姿影像，那麼又該如何判斷我的坐姿端正呢？解決辦法是：藉助 tensorflow.js！
早在半年前，TensorFlow.js 最開始吸引我的地方正是他能夠識別人像的五官，輸入一張圖片，輸出人體器官在圖片中位置，包括：鼻子，眼睛，耳朵，肩膀，手肘，手腕，臀部，膝蓋，腳踝。
TensorFlow.js 是一個 JavaScript 庫，用於在瀏覽器和 Node.js 訓練和部署機器學習模型。簡單來說就是把機器學習搬到web上。它的應用有很多，也已經實現的一些有意思的事情。
問題來了，工作的時候正對著電腦，但筆記本攝像頭最多隻能拍到人的頭部五官和肩膀啊？
這裡可以想象一下，當坐姿不端正的時候，其實頭也是不端正的。（頭部端正而身體七歪八扭恐怕不常見）所以，判斷五官實際上就已經足夠了。
實現上，初始化（posenet.load）之後，通過 estimateSinglePose 方法輸入一個圖片，輸出得分（score）和人體各部位座標。
{
"score": 0.36588028040440645,
"keypoints":[
{
"score": 0.998099148273468,
"part": "nose",
"position": {
"x": 318.6268163302529,
"y": 371.8572926799611
}
},
{
"score": 0.996922492980957,
"part": "leftEye",
"position": {
"x": 260.77240393968873,
"y": 307.9062803988327
}
},
...
]
}複製程式碼posenet.load 的初始化有很多引數：architecture、outputStride、inputResolution、multiplier、quantBytes、modelUrl。
這些引數是對模型的設定，跟輸出的解析度、識別精度、準確性相關，並直接影響識別效率和效能。在當前的需求場景裡，可不必關注這些，預設即可。
estimateSinglePose 有一個引數 flipHorizontal：是否應水平翻轉/映象姿勢。
電腦攝像頭返回的是一個與現實方向水平相反的圖片（相對於自己的視角）。通過ccs水平翻轉180度（rotateY(180deg)）可處理。
同樣，模型的輸出通過設定 flipHorizontal 為true 能夠得到相應方向的座標資料。得到五官座標之後，通過 canvas 將相應的點畫到影像上即可驗證識別是否正確。
如上圖所示，坐姿端正時，臉部在影像中間，雙眼雙耳水平，鼻子在眼耳高度之間。坐姿不端正時往往不能滿足以上條件。那麼通過判斷五官的相對位置和絕對位置就可以檢測坐姿了。比如近大遠小，越靠近螢幕，拍到的人臉越大，兩眼的間距也越大。當大到一定程度可以認為人距離螢幕近到一定的程度，這個程度就是閾值。
超過這個閾值即可認定為：此時我正在近距離的盯著電腦螢幕看。此時我正在不健康的工作。
坐姿不端正一般有以下幾種場景，轉換到圖片上的五官位置判斷如下：
- 彎腰駝背：此時整個頭部在影像下半部分，判斷鼻子的y座標到影像下邊沿的距離
- 單手託下巴：此時頭部是歪的，判斷兩眼的y座標差
- 斜視：此時頭部沿y軸轉動，判斷左邊的眼睛和耳朵的x座標差和右邊眼耳x座標差之差
- 過度仰視（抬頭）：此時頭部向上仰，判斷鼻子的y座標是否過於接近眼睛的y座標
- 過度俯視（低頭）：此時頭部向下彎，判斷鼻子的y座標是否過於接近耳朵的y座標
- 眼睛離螢幕太近：此時頭部在影像中更大，判斷兩眼的x座標差（近大遠小）
接下來就是計算的問題了，算出各種差值之後設定閾值。這裡可以直接對著螢幕扭轉頭部試試，自己感受一下坐姿不端正時的引數，把握判斷的嚴格和寬鬆，逐步調參。
為了達到監控的目的，圖片識別邏輯需要跑一個迴圈。這裡用 setInterval 或者 requestAnimationFrame 都可以。
requestAnimationFrame 可以做到監控畫面十分流暢，觀賞效果極佳，但是60幀還是很吃效能的，每次都要 TensorFlow 識別、canvas 畫圖和邏輯判斷，著實有些難頂，短時間還可以，長時間跑的話 mac 便突突突的進入煮雞蛋模式。
一般來說開著頁面放著聽告警即可，這個監控不用那麼實時，用 setInterval 每 500 毫秒跑一次足夠。
（4）告警
能夠實時拍下我的坐姿影像，能夠判斷我的坐姿是否端正，那麼在不端正的時候如何提醒我？當然是播放語音啦！
從網上下載一段幾秒的警鈴音訊即可。識別判斷坐姿不端正的時候播放該音訊，提醒效果就有了。音訊的播放很簡單，獲取 audio 物件，play() 一下即可。
但有一個問題，以上坐姿不端正的場景有6種，聽到告警的時候怎麼知道是哪種呢，畢竟知道是哪種才能立馬有針對性的糾正坐姿。
有辦法！這裡可以藉助谷歌翻譯，下載各種提示文字的朗讀音訊。當坐姿不端正的時候，播放對應的語音。一開始突然放個警鈴總是嚇一跳，谷歌翻譯魔性的聲音明顯更人性化！
除此之外要考慮告警毛刺的過濾。比如我喝杯水或者伸個懶腰，這個時候頭可能是歪的，這樣的告警是不應該發出來的。考慮到喝水伸懶腰這些動作都是短時間內完成，假設3秒完成，那麼可以加個判斷，持續3秒以上的告警才是真正坐姿不端正的告警，才需要發出來。
實踐中還有一個場景，當我去上廁所或者出去倒個水的時候，此時人都不在電腦前了，按照原先的邏輯肯定是告警的。
這時候，模型輸出的得分（score）欄位就派上用場了。score是一個0到1的數值，數值越大表示輸出的結果更準確可靠。當人不在電腦前，score 分數小於0.1，於是把低於0.1分的資料直接捨棄。
最後把閾值和一些設定放到頁面上支援編輯，同時加個告警次數統計，一天下來可以看到自己是哪種不端正坐姿比較突出，可以有針對性的做一些運動舒展放鬆。
2. 針對吃飯問題
吃飯這個問題啊！對於沒有做飯經驗的人來說真的是災難。但當下情況特殊，也沒的辦法。只能隨便對付一下，比如把食材丟到電飯煲裡做懶人飯，或者買一次性碗筷。
1天2頓飯花3個鐘，做出來還不好吃！這就很沒意思了。做飯這個大前提是扳不倒的，只能提高一下趣味了。於是，按照主食、肉類、蔬菜、小吃四大類，將囤下來的吃食分類，然後加個隨機功能，每次到飯點的時候，按一下，隨機搭配。
這樣可以解決兩個問題：
- 吃什麼做飯難，其實面對一堆食材決定吃什麼也很難。
- 增加趣味可能隨機出一些奇奇怪怪的組合。未知帶來好奇，讓人保持興趣，未知是人類進步的階梯。是不是有點意思！
這裡要加多個去重的邏輯，連續兩次隨機出來的食物不能一樣。畢竟午餐和晚餐吃一樣的東西就沒意思了！
3.針對喝水&運動問題
一天下來常常忘了喝水，直到口渴的時候才被動想起，這時候你的身體已經缺水了，這是不健康的！一天下來常常一屁股下去坐半天，長期久坐也是不健康的！
針對這個問題可以做個定時提示，回想平時工作中容易忘記喝水的時間，早中晚分別2個提醒，同時加2個運動提醒。
實現上也比較簡單，跑個 setInterval 實時對比當前時間和設定提醒時間即可。告警方式同上。
結語
積極樂觀，開心向上有助於提高免疫力。
成年人的生活沒有容易二字，但要始終相信，辦法總比困難多！寫到這裡，想象著100歲的自己，雄壯有力的敲著鍵盤，嘴裡唸到：健康生活，長命百歲。
參考資料：