浏览器上的Webgazer.js网络摄像头眼睛跟踪

2020-07-17 00:43:19

js是一个眼睛跟踪库,它使用普通的网络摄像头来实时推断网页上网络访问者的眼睛注视位置。眼睛跟踪模型,它包含通过观察网络访问者与网页互动并训练眼睛特征和屏幕位置之间的映射来进行自我校准。js完全是用JavaScript编写的,只需几行代码就可以集成到任何希望更好地理解访问者和改变用户体验的网站中。WebGazer.js完全在客户端浏览器中运行,因此不需要将视频数据发送到服务器,并且需要用户同意才能访问他们的网络摄像头。

要使用WebGazer.js,您需要将webgazer.js文件作为脚本添加到您的网站中:请注意,当您进行本地开发时,您可能需要在本地运行支持https协议的简单http服务器。

一旦脚本被包括在内,webgazer对象就被引入到全局命名空间中。Webgazer有控制WebGazer.js操作的方法,允许我们启动和停止它、添加回调或更改模块。webgazer上最重要的两个方法是webgazer.egin()和webgazer.setGazeListener()。Begin()启动启用预测的数据收集,因此尽早调用它很重要。一旦调用了webgazer.egin(),WebGazer.js就可以开始提供预测了。setGazeListener()是访问这些预测的便捷方法。此方法每隔几毫秒调用您提供的回调,以提供用户的当前注视位置。如果您不需要经常访问此数据流,您也可以调用webgazer.getCurrentForecast(),它将在调用时为您提供预测。

webgazer.setGazeListener(function(data,elapsedTime){if(data==null){return;}var xrecast=data.x;//这些x坐标是相对于视口var yrecast=data.y;//这些y坐标是相对于视口console.log(ElapsedTime);//经过时间基于BEGIN被调用以来的时间})。Begin();

这里是获得预测的另一种方法,您可以根据需要请求凝视预测。

除了到目前为止所示的示例之外,WebGazer.js还启用了几个特性。js可以通过使用使用IndexedDB的localfeed将数据存储到浏览器来保存和恢复浏览器会话之间的训练数据。窗口中的每一次单击都会自动执行此操作。如果希望每个用户会话是独立的,请确保将main.js中的window.saveDataAcrossSessions设置为false。

js的核心是跟踪器和回归模块。跟踪器模块控制如何检测眼睛,回归模块确定如何学习回归模型以及如何基于从跟踪器模块提取的眼斑进行预测。这些模块可以随时换入换出。我们希望这将使WebGazer.js的扩展和改编变得容易,并欢迎任何想要贡献的开发人员。

js需要边界框,该边界框包括来自网络摄像头视频源的像素,这些像素对应于检测到的用户眼睛。目前,我们包括一个外部库来检测人脸和眼睛。

目前,MediaPipFacemesh默认随WebGazer.js一起提供。如果您想要介绍您自己的面部特征检测库,请告诉我们。

以下是WebGazer.js默认提供的所有回归模块。如果您想要介绍不同的模块,请让我们知道-只要记住,它们应该能够非常快地产生预测。

岭-一个简单的岭回归模型,将检测到的眼睛中的像素映射到屏幕上的位置。

WeektedRidge-一个权重岭回归模型,最新的用户交互对模型的贡献更大。

出于性能原因,可能需要暂停WebGazer.js的数据收集和预测。

webgazer.pause();//WebGazer.js现在暂停,不会采集数据,也不会执行凝视回调webgazer.Resume();//数据采集恢复,将再次调用凝视回调。

我们在webgazer.util中提供了一些有用的函数和对象。webgazer.params对象还包含一些用于调整以控制鼠标移动的视频保真度(权衡速度和精度)和采样率的有用参数。

webgazer.util.bound(预测);forection.x;//现在总是在viewportforection.y;//现在总是在视口的范围内