HandsFree.js - 将脸部，手和/或姿势跟踪整合到前端项目

快速将面部，手和/或姿势跟踪在Snap✨👌中的前端项目中

该回购分为3个主要部分：实际库本身在/ SRC /，IT文件中的文档和/扩展/分机中的免提浏览器扩展名/。

注意：从CDN加载的型号可能会在初始页面加载上加载较慢，但应在浏览器缓存后加载得更快。

如果你没有或需要一个服务器，或者如果你是＆＃39;在像代号这样的网站上的原型设计，那么这个选项很棒。您还可以立即下载此repo并使用其中一个/ batherplate /。

＆lt;头＆gt; ＆lt;！ - 包括HandsFree.js - ＆gt; ＆lt;链接rel =＆＃34;样式表＆＃34; href =＆＃34; https://unpkg.com/[email protected]/build/lib/assets/handsfree.css& ad34; /＆gt; ＆lt;脚本src =＆＃34; https://unpkg.com/[email protected]/build/lib/handsfree.js" ＆gt; ＆lt; / script＆gt; ＆lt; / head＆gt; ＆lt;身体＆gt; ＆lt;！ - 您的代码必须在身体内部，因为它适用于它 - ＆gt; ＆lt;脚本＆gt; //使用Handtracking并显示Webcam Found Weldframe Fang免提=新免提（{Showdebug：True，Hands：True}）免提。 start（）//创建名为＆＃34的插件;记录器＆＃34;在每一帧免提上显示数据。使用（＆＃39; logger＆＃39; data =＆gt; {控制台。日志（数据。手）}）＆lt; / script＆gt; ＆lt; / body＆gt;

//在您的应用程序内导入免提＆＃39;免提＆＃39; //让＆＃39; s使用handtrack，并启用标记的插件标记为＆＃34;浏览器＆＃34; const免提=新免提（{showdebug：true，hands：true}）免提。 EnablePlugins（＆＃39;浏览器＆＃39;）免提。开始 （ ）

以上将从UNPKG CDN加载模型，超过10MB。如果您＆＃39; d宁愿托管自己（例如，脱机使用），那么您可以将模型从NPM包弹出到项目中＆＃39; s public文件夹：

＃将模型移动到您的项目中＆＃39; s public directory＃ - 下面更改公众，在WindowsXcopy / e node_modules \ handsfree \ build \ lib public＃wellwhere elsecp -r node_modules /免提上/ build / lib / * public

从＆＃39进口免提;免提＆＃39; const免提=新的免提（{双手：true，//将此设置为您将模型移动到Assetspath：＆＃39; /公共/资产＆＃39;，}）免提。 EnablePlugins（＆＃39;浏览器＆＃39;）免提。开始 （ ）

以下旨在让您快速概述工作原理。关键外带是一切都以钩子/插件为中心，它基本上是在每个帧上运行的名称标记，并且可以打开和关闭。

以下工作流程演示如何使用HandsFree.js的所有功能。查看指南和参考资料更深入，并随意在Google集团上发布，如果您陷入困境，则会在谷歌群体或不和谐！

//让＆＃39; s使默认面部指针const免提= new免提（{weboji：true}）免提。 EnablePlugins（＆＃39;浏览器＆＃39;）//现在让＆＃39; s从事免提。 start（）//＆＃39; s创建一个名为＆＃34; logger＆＃34的插件; // - 插件在每个帧上运行，并且是如何＆＃34;插入＆＃34;到主循环// - ＆＃34;这个＆＃34;上下文是插件本身。在这种情况下，Handsfree.plugin.logger免提。使用（＆＃39; logger＆＃39; data =＆gt; {控制台。日志（数据。Weboji。Morphs，Data。Weboji。旋转，数据。Weboji。指针，数据，此）}）//＆＃39; S切换到现在的手动跟踪。为了证明您可以执行此类实时，//＆＃39; s创建一个插件，当两个眉毛上朝上时，可以切换到手动跟踪。使用（＆＃39; handtrackingswitcher＆＃39; {weboji} =＆gt; {if（weboji。州。浏览）{//禁用此插件//与handsfree.plugin.handtrackingswitcher.disable（）。禁用（） //关闭面部跟踪并使手动跟踪免提。更新（{weboji：false，hands：true}）}}）//您可以启用和禁用任何模型和插件的组合免提。更新（//禁用当前正在运行Web的WebBeji：False，//启动姿势模型姿势：true，//这也是如何配置（或预先配置）一次性插件的一束插件：{fingerpointer： {已启用：false}，facescroll：{vertscroll：{scrollspeed：0.01}}}）//禁用所有插件免提。 disableplugins（）//仅启用插件，用于制作音乐（实际上没有实现）免提。 EnablePlugins（＆＃39;音乐＆＃39;）//覆盖我们的记录器以显示原始模型API免提。插入 。记录器。 onframe =（数据）=＆gt; { 安慰 。日志（免提。模型。姿势？。API，免提。模型。Weboji？。API，免提。模型。姿势？。API）}

如果您＆＃39; d想为图书馆或文档做出贡献，那么以下将让您前进：

一旦你跳过上面的运行，你可以使用NPM开始。如果您提取最新代码，请记住运行NPM i以获取任何新依赖项（这应该经常发生）。

＃启动localhost上的本地开发：8080npm start＃构建库，文档和extensionnpm运行＃构建仅限库/ dist / lib / npm运行构建：lib＃只构建文档at / dist / docs / npm运行构建： Docs＃只构建AT / Dist / Instementnpm运行构建的扩展名：扩展名#popplish intains to npmnpm loginnpm发布＃deploy文档到handsfree.js.orgdeploy.sh

请参阅Vuepress-component-font-awesome，用于向文档添加新图标。请记住运行NPM RUN FA：添加新字体图标时构建，以便将其复制到文档/ .vuepress / component / fa文件夹中

您可能偶尔需要重新启动服务器在向/ docs添加新文件时，此外，更改/docs/.vuepress.config.js也是如此

浏览器扩展是一个旨在帮助您通过面部和/或手势浏览Web免提。目标是开发A＆＃34;用户签到经理＆＃34;像Tampermonkey一样，但对于免提 - ificaly网页，游戏，应用程序，WebXR和真正任何其他类型的内容都找到了Web。

当您首次安装扩展时，/src/background/handsfree.js检查您是否批准了网络摄像头。如果没有，那么它＆＃39; ll打开src / options / stream-capture.html中的选项页面

弹出面板有一个＆＃34;开始/停止网络摄像头＆＃34;与背景脚本通信以启动网络摄像头的按钮：/src/popup/index.html

背景页面是存储和运行模型的位置。这使所有孤立的一切都保持了一切，只要求WebCam权限一次（每个域上的vs）：/src/background/handsfree.js

背景页面也使用＆＃34;图片在图片＆＃34中; API到＆＃34;流行网络摄像头＆＃34;走出浏览器。它将网络摄像头馈送和调试Canvases呈现为单个画布，并将其作为SRCObject到单独的视频元素，该单元是pip＆＃39; ed

默认情况下，每个页面都将获得A＆＃34;面部指针＆＃34;或一组＆＃34;棕榈指针＆＃34;让你浏览Page免提。

但是，除了指针之外，您还可以添加定制免提交互。例如，这里＆＃39;我的手中的展示不同的东西：

在Apache 2.0下，免提核心可用于免费和商业用途。在Apache 2.0下，每种型号也可免费使用和商业用途：

@golan和工作室为2019年举办居住而举办居住的创意询问，并以更快递的方式帮助我接近项目。还要邀请我回到2021年春季的多月份居住！

@Anildash为2018年冬季提供了支持项目的推出，其中包括在Glitch.com上分享我的项目的机会

@Jessscon和Google对为即将开始这个项目的早期支持

以前的每个人都支持通过Github赞助商，Patreon，Gofundme和Twitter多年来一直支持该项目