码农手记 基于TenorFlow开源JS库 实现网页前端人物动作捕捉

Xsens动作捕捉 2022-11-25 10200

码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第1张


鏍忕洰馃摪锛?/span>鐮佸啘鎵嬭 馃捇

鎾版枃鉁嶐煆伙細鏋侀摼鍓嶇Team 鏇惧惎婢?/span>

鏁寸悊馃摎锛?/span>鏋滄灉

鍏抽敭璇?/strong>馃搶锛?span> TensorFlow 銆?/strong> Javascript 銆?/strong> 浜虹墿鍔ㄤ綔鎹曟崏 



鉁嶏笍
 鐮佸啘鎵嬭 


灏嗕細閭€璇?/span>


涓€鐩村湪骞曞悗
鐢ㄤ唬鐮佸拰绠楁硶鏀瑰彉涓栫晫鐨?/span>
鎶€鏈ぇ浣滑
灏嗕細涓嶅畾鏈熸帹閫佷粬浠?/span>
鎵€鍐欑殑鍦ㄦ妧鏈笓涓氫腑鐨?/strong>
鎶€鏈粡楠?鐮旂┒/璁烘枃


涓轰綘鍛堢幇
/ 鏇村墠娌跨殑鎶€鏈€濊€?/
 / 鏇翠笓涓氱殑鎶€鏈共璐?/


#鐮佸啘鎵嬭# 绗?9鏈?/span>
鏂?| Video++鏋侀摼绉戞妧鍓嶇Team鏇惧惎婢?/span>
码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第2张


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第3张

闅忕潃鍓嶇鐢熸€佺殑鍙戝睍锛?/span>Javascript宸茬粡涓嶄粎浠呭眬闄愪簬浣滀负缃戦〉寮€鍙戯紝涔熻秺鏉ヨ秺娲昏穬浜庢湇鍔″櫒绔紝绉诲姩绔皬绋嬪簭绛夊簲鐢ㄥ紑鍙戜腑銆?/span>鐢氳嚦閫氳繃Electron绛夋墦鍖呭伐鍏凤紝鐢氳嚦杩樿兘澶熷紑鍙戝绯荤粺鐨勬闈㈠簲鐢ㄣ€?/span>鍏舵秹瓒崇殑棰嗗煙瀹芥硾涔熶娇寰楄兘澶熷疄鐜扮殑鍔熻兘涔熶笉鍐嶆槸绠€鍗曠殑UI鎺т欢鍒朵綔鍜屽唴瀹圭殑灞曠ず锛屽湪浜掑姩濞变箰锛屽皬娓告垙棰嗗煙涔熸湁鐫€鏋佸ぇ鐨勫彂灞曞墠鏅€?/span>

鏈枃浠ラ€氳繃JavaScript寮€鍙戜竴涓熀浜庢祻瑙堝櫒鎽勫儚澶寸殑瀹炴椂浜虹墿鍔ㄤ綔鎹曟崏灏忕▼搴忎负渚嬶紝浠嬬粛涓€涓嬪墠绔湪杩欎竴棰嗗煙鐨勫彲琛屾€с€?/span>


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第4张
 
TensorFlow 鏈€鍒濇槸鐢?/span>Google澶ц剳灏忕粍鐨勭爺绌跺憳鍜屽伐绋嬪笀浠紑鍙戝嚭鏉ワ紝閲囩敤鏁版嵁娴佸浘锛?/span>Data Flow Graphs锛?/span>鐢ㄤ簬鏈哄櫒瀛︿範鍜?strong>娣卞害绁炵粡缃戠粶鏂归潰鏁板€艰绠楃殑寮€婧愯蒋浠跺簱銆?/span>鍏堕珮搴︾殑鍙Щ妞嶆€у拰澶氳瑷€鎬т娇寰楀畠鍙互閫氳繃鍚勭甯哥敤缂栫▼璇█缂栧啓锛岃交鏉剧殑杩愯鍦ㄥ绉嶅钩鍙扮殑璁惧涓娿€?strong>鏄竴涓泦鎬ц兘锛屽彲闈犳€э紝閫氱敤鎬э紝鏄撶敤鎬т负涓€浣撶殑寮哄ぇ寮€婧愬簱銆?/strong>
 
鏈枃鎵€浣跨敤鐨勫紑婧?/span>Javascript妯″瀷搴擄細
 
  • tfjs-models/posenet: 涓€涓満鍣ㄥ涔犳ā鍨嬶紝鍔熻兘涓哄鍥惧儚鎴栬€呰棰戜腑鐨勪汉鐗╄繘琛屽姩浣滄崟鎹夛紝杈撳嚭浜轰綋鍚勪釜閮ㄤ綅鐨?/span>keypoints锛堝潗鏍囬泦锛夈€?/span>鍏锋湁鍗曚竴浜虹墿鍒嗘瀽鍜屽浜虹墿鍒嗘瀽鐨勭壒鐐广€?/span>

 
  • tfjs-models/body-pix: 涓€涓満鍣ㄥ涔犳ā鍨嬶紝鍔熻兘涓哄鍥惧儚鎴栬€呰棰戜腑浜虹墿鍜岃儗鏅繘琛屽垎鏋愶紝灏嗕汉鐗╀粠鑳屾櫙涓墺绂诲嚭鏉ワ紝杈撳嚭缁撴灉涓轰汉浣?/span>24涓儴浣嶅湪鐢婚潰涓殑鍍忕礌浣嶇疆銆?/span>鍏锋湁灏嗕汉鐗╀笌鑳屾櫙鍒嗙鐨勫姛鑳?nbsp;銆?/span>

 

码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第5张


鏈枃鎵€浠嬬粛鐨勫熀浜庢祻瑙堝櫒鍜岀綉缁滄憚鍍忓ご鐨勪汉鐗╁疄鏃跺姩浣滄崟鎹夋柟娉曪紝鍏跺疄鐜板師鐞嗘槸閫氳繃JavaScript璋冪敤<video/>鍏冪礌锛岄€氳繃娴忚鍣ㄥ懠鍙綉缁滄憚鍍忓ご锛屽皢缃戠粶鎽勫儚澶磋幏鍙栧埌鐨勮棰戞祦鐨勬瘡涓€甯ф暟鎹€氳繃TensorFlow 鐨?/span>JS妯″瀷搴擄紙tfjs-models/posenet鎴?/span>tfjs-models/body-pix锛夊鍥惧儚杩涜鍒嗘瀽锛岃緭鍑烘憚鍍忓ご鎵€鎷嶆憚瀵硅薄鐨勪汉浣撳悇keypoint鏁版嵁鍒嗘瀽缁撴灉鐨勫悓鏃讹紝瀵?/span>HTML5鐨?/span><canvas/>鍏冪礌杩涜娓叉煋銆?/span>寮€鍙戣€呭彲浠ユ牴鎹」鐩渶姹傦紝瀵硅幏寰楀埌鐨勪汉浣撳悇keypoint鏁版嵁杩涜鍒嗘瀽澶勭悊锛屽疄鐜扮▼搴忓姛鑳姐€?/span>

*鍦ㄥ熀鏈殑鍘熺悊涓?/span><canvas/>骞朵笉鏄繀椤荤殑缁勬垚閮ㄥ垎锛屼絾鍦ㄤ笅鏂囦腑浼氱畝鍗曚粙缁嶄竴绉嶉€氳繃<canvas/>鐨勫浘鍍忕粯鍒跺姛鑳斤紝鎻愬崌浜虹墿鎹曟崏绮惧害鐨勬柟娉曘€?/span>

 
码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第6张

#鍩烘湰閰嶇疆 


  • 瀵煎叆JS 

 
码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第7张

  • HTML


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第8张
 
  • 鍒濆鍖栫綉缁滄憚鍍忓ご

 
码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第9张

  • 鐢熸垚posenet瀵硅薄


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第10张
 
 #鍙傛暟璇存槑 
 
architecture锛?/span>鍒嗕负MobileNetV1鍜?/span>ResNet50涓や釜浣撶郴锛屽叾涓?/span>ResNet50绮惧害鏇撮珮浣嗗鐞嗛€熷害杈冩參銆?/span>
 
outputStride锛?/span>杈撳嚭缁撴灉姣忎釜鍍忕礌鍗犵敤瀛楄妭鏁帮紝鏁板瓧瓒婂皬缁撴灉瓒婄簿纭紝浣嗗鐞嗙殑鎴愭湰鍜屾椂闂存洿澶氥€?/span>
 
inputResolution锛?/span>杈撳叆鍥惧儚鍘嬬缉鍚庣殑灏哄锛屾暟瀛楄秺澶ц秺绮剧‘锛屼絾澶勭悊鐨勬垚鏈拰鏃堕棿鏇村銆?/span>
 
multiplier锛?/span>浠呭湪MobileNetV1浣撶郴涓娇鐢紝鍗风Н杩愮畻鐨勬繁搴︼紙閫氶亾鏁帮級锛屾暟瀛楄秺澶у眰鏁拌秺澶氳秺绮剧‘锛屼絾澶勭悊鐨勬垚鏈拰鏃堕棿鏇村銆?/span>
 
 #鎵ц瀹炴椂鍒嗘瀽 
 
码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第11张
 
 # 缁撴灉 


  • 澶氫汉鎹曟崏锛?/span>澶氫汉鎹曟崏鏃惰兘澶熻幏寰楃敾闈腑浜虹墿鐨刱eypoints锛屼簰鐩镐箣闂存湁涓€瀹氱殑骞叉壈浣嗗奖鍝嶅苟涓嶆槸鐗瑰埆澶?/span>銆?/span>


  • 鍗曚汉鎹曟崏锛?/span>寰堝鏄撹鑳屾櫙鍙婅韩杈逛汉鐗╁共鎵帮紝瀵艰嚧浜轰綋keypoint瀹氫綅涓嶅噯纭€?/span>

     

 # 缂虹偣 
 
閫氳繃瀹為檯鐨勬晥鏋滃彲浠ョ湅鍒帮紝璇ユā鍨嬪彲浠ュ湪澶氫汉鐗╃殑鏃跺€欏噯纭崟鎹夊埌鍚勪釜浜虹墿鐨勫姩浣滃拰韬綋閮ㄤ綅鐨?/span>keypoints锛?strong>铏界劧瀛樺湪鑻ュ共骞叉壈鍜屼笉绋冲畾浣嗗熀鏈兘澶熸帴鍙楋紝瀹炴椂鎬ф晥鏋滃ソ锛屼絾鏄棤娉曞尯鍒嗕富瑕佷汉鐗╁拰娆¤浜虹墿锛岄渶瑕佸紑鍙戣€呭缁撴灉鏁版嵁杩涜澶勭悊銆?/span>
 
鍏?/span>score鐨勭敓鎴愭槸鏍规嵁褰㈢姸鍑嗙‘搴︽潵璁$畻锛屾病鏈夊満鏅繁搴︾殑鍒嗘瀽锛屽洜姝ゆ棤娉曞垽鏂汉鐗╁墠鍚庝綅缃叧绯汇€?/span>
 
鐢变簬浠ヤ笂鐨勯棶棰橈紝璇ユ柟娉曞湪鍗曚竴浜虹墿鍔ㄤ綔鎹曟崏鏃惰鍛ㄥ洿鐜骞叉壈鐨勫奖鍝嶆瀬澶с€傚湪鑳屾櫙瀛樺湪鍏朵粬浜虹墿鏃朵細鍥犳棤娉曞垽鏂富娆′汉鐗╁叧绯伙紝鏋佸ぇ鐨勯檷浣庡噯纭巼銆傚鍗曚竴浜虹墿鍔ㄤ綔鎹曟晥鏋滈潪甯哥殑涓嶇悊鎯筹紝闇€瑕佽繘琛屾敼杩涖€?/span>
 

码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第12张


鍗曚竴浜虹墿鐨勫姩浣滄崟鎹夎澶栫晫骞叉壈鐨勫奖鍝嶅お澶у鑷寸粨鏋滃苟涓嶇悊鎯筹紝鍥犳棣栧厛瑕佽€冭檻鐨勫氨鏄睆钄芥帀鍛ㄥ洿骞叉壈鐗╀綋锛岀獊鍑轰富浣撲汉鐗┿€傜敱姝ゅ紩鍏ヤ簡tfjs-models/body-pix妯″瀷搴撱€?/span>
 
**tfjs-models/body-pix妯″瀷搴撶殑涓昏鍔熻兘锛?/span>**瀹炴椂鍒嗘瀽浜虹墿缁撴瀯锛屽皢浜虹墿浠庤儗鏅腑鍓ョ銆?/span>鍏朵綔鐢ㄥ璞′负鍗曚竴鎹曟崏瀵硅薄锛屾濂介€傜敤浜庝笂杩板崟浜烘崟鎹夌粨鏋滀笉鐞嗘兂鐨勬儏鍐点€?/span>

 #鍩烘湰閰嶇疆 

  • 瀵煎叆JS


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第13张


  • 鐢熸垚bodyPixNet瀵硅薄


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第14张
 
 #tfjs-models/body-pix涓?/span>tfjs-models/posenet鐨勬贩鍚堜娇鐢?nbsp;
 
码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第15张

#缁撴灉 
 
tfjs-models/body-pix涓?/span>tfjs-models/posenet鐨勬贩鍚堜娇鐢紝铏界劧鍔犲ぇ浜?/span>canvas澶勭悊鐨勮礋鎷咃紝鍔犲ぇ浜嗘弿缁樺拰鍥惧儚澶勭悊鐨勬鏁帮紝浣嗘槸鐢变簬tfjs-models/body-pix宸茬粡鍏堝皢浜虹墿涓庤儗鏅墺绂伙紝鍦?/span>tfjs-models/posenet鍙娇鐢ㄧ敤鏈€楂樻晥浣嗕綆鍑嗙‘搴︾殑鍙傛暟閰嶇疆涓嬶紝涔熻兘澶熶骇鐢熻繙楂樹簬浣跨敤楂樼簿纭害浣嗘秷鑰楀鐞嗘€ц兘鏋佸ぇ鐨勯厤缃墍涓嶈兘杈惧埌鐨勫噯纭害銆?/span>浠庤€屽疄鐜颁簡楂樻晥锛岄珮鍑嗙‘搴︼紝娴佺晠鐨勫疄鏃跺崟浜哄姩浣滄崟鎹夊姛鑳姐€?/span>
 

码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第16张


閫氳繃TensorFlow鐨勫紑婧愬簱锛岃兘澶熻交鏉剧殑鍦ㄦ祻瑙堝櫒涓婇€氳繃缃戠粶鎽勫儚澶村疄鐜颁汉鐗╁姩浣滅殑瀹炴椂鎹曟崏銆?/span>
 
鐢变簬鍩轰簬鍥惧儚鍒嗘瀽锛屽洜姝よ〃鐜拌兘鍔涙瀬澶х殑渚濊禆浜庡canvas鐨勬弿缁樻€ц兘锛岀Щ鍔ㄧ鐢变簬娴忚鍣?/span>canvas鎻忕粯鑳藉姏浠ュ強纭欢鎬ц兘闄愬埗鐨勫師鍥狅紝琛ㄧ幇骞朵笉鍑鸿壊锛屾棤娉曞仛鍒伴暱鏃堕棿瀹炴椂鎹曟崏銆?/span>鐢氳嚦閮ㄥ垎娴忚鍣ㄩ檺鍒朵簡缃戠粶鎽勫儚澶寸殑璋冪敤銆傚湪绉诲姩绔殑琛ㄧ幇骞朵笉鍑鸿壊銆?/span>
 
鍦ㄥ崟涓€浜虹墿鐨勫姩浣滄崟鎹夋椂锛?/span>tfjs-models/body-pix涓?/span>tfjs-models/posenet鐨勬贩鍚堜娇鐢ㄨ兘澶?strong>浣跨簿纭害澶уぇ鎻愬崌銆?/span>
 
鐢变簬闇€瑕佸canvas杩涜鎻忕粯锛岀粨鍚堝叾浠?/span>canvas鐨?/span>JS搴撳彲浠ヨ繘琛屼氦浜?/span>UI锛屼氦浜掑皬娓告垙绛変笉鍚屽満鍚?/span>APP鐨勫紑鍙戙€?/span>



馃殌

鏋侀摼绉戞妧鎷ユ湁鍥藉唴鏈€澶х殑

AI骞垮憡骞冲彴鍜屽満鏅數鍟嗗钩鍙?/span>

甯姪鏁扮櫨涓囧搧鐗屽晢瀹?/span>

瀹屾垚AI鏃朵唬涓嬬殑鎺ㄥ箍鍜岃浆鍖?/span>


鐜板凡鎴愰暱鎴愪负涓€瀹?/span>

鎷ユ湁棰嗗厛鐨勬妧鏈€佹捣閲忕敤鎴?/span>

鍜岀患鍚堟€ц惀鏀惰兘鍔涚殑

瑙嗛AI鍦烘櫙鍟嗕笟骞冲彴


码农手记  基于TenorFlow开源JS库 实现网页前端人物动作捕捉  第17张


馃憞馃徎鐐瑰嚮銆岄槄璇诲師鏂囥€?/strong>鏌ョ湅鏇村娣卞害鎶€鏈ソ鏂?/span>

The End