文档章节

基于TensorFlow的开源JS库的网页前端人物动作捕捉的实现

AiChinaTech
 AiChinaTech
发布于 09/09 18:33
字数 1732
阅读 613
收藏 4

前言

 

随着前端生态的发展,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的开发。

© 著作权归作者所有

AiChinaTech
粉丝 1
博文 12
码字总数 23546
作品 0
崇明
私信 提问
TensorFlow.js入门(一)一维向量的学习

TensorFlow的介绍   TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,...

jclian91
2018/07/14
0
0
TensorFlow从1到2(十五)(完结)在浏览器做机器学习

TensorFlow的Javascript版 TensorFlow一直努力扩展自己的基础平台环境,除了熟悉的Python,当前的TensorFlow还实现了支持Javascript/C++/Java/Go/Swift(预发布版)共6种语言。 越来越多的普通...

俺踏月色而来
05/14
0
0
Google 发布 TensorFlow.js,将机器学习带上浏览器

2018 TensorFlow 开发者峰会于北京时间 3 月 31 日凌晨 0 点 30 分在美国加利福尼亚州计算机历史博物馆如期举行,汇集全球机器学习开发者进行为期一天的技术分享和演示。 Google 发布面向 Ja...

周其
2018/04/03
4.8K
9
GitHub 年度报告来袭,并带来全新自动化流程工具

在 GitHub Universe 开发者大会上,GitHub 发布了可直接运行部分代码的 GitHub Actions,以及宣布了 2018 年的 GitHub 年度报告。 新版本更新 在年度 GitHub Universe 大会上,GitHub 发布了...

达尔文
2018/10/18
4.2K
14
用 TensorFlow.js 在浏览器中训练神经网络

本文结构: 什么是 TensorFlow.js 为什么要在浏览器中运行机器学习算法 应用举例:regression 和 tflearn 的代码比较 1. 什么是 TensorFlow.js TensorFlow.js 是一个开源库,不仅可以在浏览器...

不会停的蜗牛
2018/06/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈prototype原型模式

一、原型模式简介 原型(Prototype)模式是一种对象创建型模式,他采取复制原型对象的方法来创建对象的实例。使用原型模式创建的实例,具有与原型一样的数据。 原型模式的特点: 1、由原型对...

青衣霓裳
14分钟前
6
0
shell mysql 备份

#!/bin/bash time2=$(date "+%Y-%m-%d-%H:%M:%S") /usr/local/mysql/bin/mysqldump -uroot -p ad > /usr/local/mysql/backup/"$time2".sql 变量引用原来是这么用的。......

奋斗的小牛
22分钟前
4
0
Jmeter监控Linux服务器操作

系统:Win7 64位 工具:Jmeter 4.0 要准备好的插件:JMeterPlugins-Standard-1.4.0,ServerAgent-2.2.1 解压JMeterPlugins-Standard-1.4.0.zip,将其中\lib\ext\JMeterPlugins-Standard.jar......

魔鬼妹子
22分钟前
5
0
系列文章:云原生Kubernetes日志落地方案

在Logging这块做了几年,最近1年来越来越多的同学来咨询如何为Kubernetes构建一个日志系统或者是来求助在这过程中遇到一系列问题如何解决,授人以鱼不如授人以渔,于是想把我们这些年积累的经...

Mr_zebra
23分钟前
5
0
入门必备!快速学会用Aspose.Words在表格中插入和删除列!

Aspose.Words For .Net(点击下载)是一种高级Word文档处理API,用于执行各种文档管理和操作任务。API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsoft W...

mnrssj
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部