基於TensorFlow的開源JS庫的網頁前端人物動做捕捉的實現

前言

 

隨着前端生態的發展，Java已經不單單侷限於做爲網頁開發，也愈來愈活躍於服務器端，移動端小程序等應用開發中。甚至經過Electron等打包工具，甚至可以開發多系統的桌面應用。其涉足的領域寬泛也使得可以實現的功能也再也不是簡單的UI控件製做和內容的展現，在互動娛樂，小遊戲領域也有着極大的發展前景。本文以經過Java開發一個基於瀏覽器攝像頭的實時人物動做捕捉小程序爲例，介紹一下前端在這一領域的可行性。

什麼是TensorFlow

TensorFlow 最初是由Google大腦小組的研究員和工程師們開發出來，採用數據流圖（Data Flow Graphs）用於機器學習和深度神經網絡方面數值計算的開源軟件庫。其高度的可移植性和多語言性使得它能夠經過各類經常使用編程語言編寫，輕鬆的運行在多種平臺的設備上。是一個集性能，可靠性，通用性，易用性爲一體的強大開源庫。

本文所使用的開源Java模型庫：

l tfjs-models/posenet: 一個機器學習模型，功能爲對圖像或者視頻中的人物進行動做捕捉，輸出人體各個部位的keypoints（座標集）。具備單一人物分析和多人物分析的特色。

l tfjs-models/body-pix: 一個機器學習模型，功能爲對圖像或者視頻中人物和背景進行分析，將人物從背景中剝離出來，輸出結果爲人體24個部位在畫面中的像素位置。具備將人物與背景分離的功能。

實現原理

本文所介紹的基於瀏覽器和網絡攝像頭的人物實時動做捕捉方法，其實現原理是經過Java調用<video/>元素，經過瀏覽器呼叫網絡攝像頭，將網絡攝像頭獲取到的視頻流的每一幀數據經過TensorFlow 的JS模型庫（tfjs-models/posenet或tfjs-models/body-pix）對圖像進行分析，輸出攝像頭所拍攝對象的人體各keypoint數據分析結果的同時，對HTML5的<canvas/>元素進行渲染。開發者能夠根據項目需求，對得到到的人體各keypoint數據進行分析處理，實現程序功能。

*在基本的原理中<canvas/>並非必須的組成部分，但在下文中會簡單介紹一種經過<canvas/>的圖像繪製功能，提高人物捕捉精度的方法。

經過tfjs-models/posenet模型庫實現人物動做捕捉

l 基本配置

· 導入JS

· HTML

· 初始化網絡攝像頭

· 生成posenet對象

參數說明：

architecture：分爲MobileNetV1和ResNet50兩個體系，其中ResNet50精度更高但處理速度較慢。

outputStride：輸出結果每一個像素佔用字節數，數字越小結果越精確，但處理的成本和時間更多。

inputResolution：輸入圖像壓縮後的尺寸，數字越大越精確，但處理的成本和時間更多。

multiplier：僅在MobileNetV1體系中使用，卷積運算的深度（通道數），數字越大層數越多越精確，但處理的成本和時間更多。

l 執行實時分析

l 結果

· 多人捕捉：多人捕捉時可以得到畫面中人物的keypoints，互相之間有必定的干擾但影響並非特別大。

· 單人捕捉：很容易被背景及身邊人物干擾，致使人體keypoint定位不許確。

l 缺點

經過實際的效果能夠看到，該模型能夠在多人物的時候準確捕捉到各我的物的動做和身體部位的keypoints，雖然存在若干干擾和不穩定但基本可以接受，實時性效果好，可是沒法區分主要人物和次要人物，須要開發者對結果數據進行處理。

其score的生成是根據形狀準確度來計算，沒有場景深度的分析，所以沒法判斷人物先後位置關係。

因爲以上的問題，該方法在單一人物動做捕捉時被周圍環境干擾的影響極大。在背景存在其餘人物時會因沒法判斷主次人物關係，極大的下降準確率。對單一人物動做捕效果很是的不理想，須要進行改進。

改進方案

單一人物的動做捕捉被外界干擾的影響太大致使結果並不理想，所以首先要考慮的就是屏蔽掉周圍干擾物體，突出主體人物。由此引入了tfjs-models/body-pix模型庫。

**tfjs-models/body-pix模型庫的主要功能：**實時分析人物結構，將人物從背景中剝離。其做用對象爲單一捕捉對象，正好適用於上述單人捕捉結果不理想的狀況。

l 基本配置

· 導入JS

· 生成bodyPixNet對象

l tfjs-models/body-pix與tfjs-models/posenet的混合使用

l 結果

tfjs-models/body-pix與tfjs-models/posenet的混合使用，雖然加大了canvas處理的負擔，加大了描繪和圖像處理的次數，可是因爲tfjs-models/body-pix已經先將人物與背景剝離，在tfjs-models/posenet只使用用最高效但低準確度的參數配置下，也可以產生遠高於使用高精確度但消耗處理性能極大的配置所不能達到的準確度。從而實現了高效，高準確度，流暢的實時單人動做捕捉功能。

結論

經過TensorFlow的開源庫，可以輕鬆的在瀏覽器上經過網絡攝像頭實現人物動做的實時捕捉。

因爲基於圖像分析，所以表現能力極大的依賴於對canvas的描繪性能，移動端因爲瀏覽器canvas描繪能力以及硬件性能限制的緣由，表現並不出色，沒法作到長時間實時捕捉。甚至部分瀏覽器限制了網絡攝像頭的調用。在移動端的表現並不出色。

在單一人物的動做捕捉時，tfjs-models/body-pix與tfjs-models/posenet的混合使用可以使精確度大大提高。

因爲須要對canvas進行描繪，結合其餘canvas的JS庫能夠進行交互UI，交互小遊戲等不一樣場合APP的開發。