基于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的开发。