jeelizAR
1.0.0
警告：该存储库已被弃用，不再维护。请改用Webar.rocks.Object。
独立的AR咖啡 - 享受Jieliz提供的免费咖啡！
检测到咖啡杯，并在增强现实中演奏3D动画。
该演示仅依赖于Jielizar和Trix.js。
这是库的主要特征：
/demos/ ：演示的源代码，/dist/ ：图书馆的心脏：jeelizAR.js ：主要缩写脚本，/helpers/ ：可以帮助您在某些特定用例（例如Webxr）中使用此库的脚本，/libs/ ：演示中使用的第三方库和3D发动机，/neuralNets/神经网络模型。 这些是该库的一些演示。有些需要特定的设置。
您可以订阅Jieliz YouTube频道或@startupjieliz Twitter帐户，以了解我们的最前沿开发。
如果您使用此库进行了应用程序或有趣的演示，我们很想在此处看到并插入链接！通过Twitter @startupjieliz或LinkedIn与我们联系。
这些演示在标准的Web浏览器中起作用。他们只需要访问网络摄像头。
要运行这些演示，您需要一个实现WebXR的Web浏览器。我们希望它将在所有网络浏览器中尽快实施！
然后，您可以运行这些演示：
这些演示在移动或平板电脑上的标准Web浏览器中运行。他们依靠惊人的第八墙AR发动机。我们使用引擎的Web版本，然后从Three.js Web样本开始。网络引擎尚未公开发布，因此您需要：
index.html <WEBAPPKEY>写下键演示：
该库的最基本集成示例是第一个演示，“调试检测”演示。在index.html中，我们在<head>部分中包括主库脚本， /dist/jeelizAR.js （以前称为getUserMedia API ）helper， /helpers/JeelizMediaStreamAPIHelper.js helpers /jeelizmediastreamapihelper.js和demo脚本和demo脚本，demo.js：demo.js：demo.js MediaStramAPI demo.js：demo.js：demo.js： demo.js ：
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script >在index.html的<body>部分中，我们放置了一个<canvas>元素，该元素将用于初始化库中用于深度学习计算的WebGL上下文，并可能显示一个调试渲染：
< canvas id = ' debugJeeARCanvas ' > </ canvas >然后，在demo.js中，我们使用MediaStream API助手加载页面后获得网络摄像头视频feed：
JeelizMediaStreamAPIHelper . get ( DOMVIDEO , init , function ( ) {
alert ( 'Cannot get video bro :(' ) ;
} , {
video : true //mediaConstraints
audio : false
} )您可以通过静态视频替换此部分，还可以提供媒体的违规行为来指定视频分辨率。当捕获视频供稿时，启动了回调功能init 。它初始化了该库：
function init ( ) {
JEEARAPI . init ( {
canvasId : 'debugJeeARCanvas' ,
video : DOMVIDEO ,
callbackReady : function ( errLabel ) {
if ( errLabel ) {
alert ( 'An error happens bro: ' , errLabel ) ;
} else {
load_neuralNet ( ) ;
}
}
} ) ;
}功能load_neuralNet加载神经网络模型：
function load_neuralNet ( ) {
JEEARAPI . set_NN ( '../../neuralNets/basic4.json' , function ( errLabel ) {
if ( errLabel ) {
console . log ( 'ERROR: cannot load the neural net' , errLabel ) ;
} else {
iterate ( ) ;
}
} , options ) ;
}您还可以提供解析的JSON对象，而不是提供神经网络的URL。
功能iterate启动迭代循环：
function iterate ( ) {
var detectState = JEEARAPI . detect ( 3 ) ;
if ( detectState . label ) {
console . log ( detectState . label , 'IS DETECTED YEAH !!!' ) ;
}
window . requestAnimationFrame ( iterate ) ;
}JEEARAPI.init以这些属性为论点，将词典作为论点：
<video> video ：HTML5视频元素（可以来自MediaStream API助手）。如果为false ，请在调用JEEARAPI.detect(...)时提供的videoFrameBuffer object中的源纹理（如Webxr emos），<dict> videoCrop ：有关更多详细信息，请参见视频裁剪部分<function> callbackReady ：准备就绪时启动或有错误时启动回调函数。使用错误标签或false调用<string> canvasId ：将创建用于深度学习处理的Canvas的ID，<canvas> canvas ：如果未提供canvasId ，您也可以直接提供<canvas>元素<dict> scanSettings ：有关更多详细信息，请参见扫描设置部分<boolean> isDebugRender ：布尔。如果为true，则将在<canvas>元素上显示调试渲染。对于调试有用，但应将其设置为生产false因为它会浪费GPU计算资源，<int> canvasSize ：像素中检测画布的大小（应为正方形）。特殊值-1保持画布尺寸。默认值： 512 。<boolean> followZRot ：仅与神经网络模型一起输出音高，滚动和偏航角。在跟踪阶段，使用当前检测的滚动裁剪输入窗口，[<float>, <float>] ZRotRange ：仅当followZRot = true时才起作用。随机化初始旋转角。值是弧度。默认值： [0,0] 。触发检测的功能是JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) 。
<int> nDetectionPerLoop是进行连续检测的数量。它越高，检测的速度越快。但是，如果它太高，它可能会减慢整个应用程序，因为功能调用会消耗太多的GPU资源。建议3至6之间的值。如果值为0 ，则每个循环的检测数量是1至6之间的适应性，初始值为3 ，<videoFrame> frame仅与WebXR演示一起使用（请参见WebXR集成部分）。否则将其设置为null ，<dictionary> options是可选的词典，可以具有这些属性：<float> thresholdDetectFactor ：应用于检测到的对象的检测阈值的因素。默认值为1 。例如，如果等于0.5 ，则检测将容易2倍。<string> cutShader ：调整用于裁剪视频区域的默认着色器。可能的值是：null ：默认值，不应用过滤器并保留RGBA频道，IOS ：仅用于WebXR使用的iOS设备的值。将红色通道复制到其他颜色通道中，并应用5像素中间过滤器median ：分别在RGB通道上应用3x3中位过滤器，null ：默认值，不应用过滤器并保留RGBA频道<boolean> isSkipConfirmation ：使检测更加容易（更敏感），但可以触发更多的假阳性。默认： false ，<boolean> isKeepTracking ：如果我们在检测后继续跟踪对象。默认： false ，[<float>,<float>,<float>] trackingFactors ：跟踪沿x，y轴和比例的转换敏感性。默认值： 1.0 ，<float> thresholdDetectFactorUnstitch ：如果检测阈值低于此值，则停止跟踪。仅当isKeepTracking=true时才使用。应该小于thresholdDetectFactor ，<float> secondNeighborFactor ：如果另一个对象的检测得分至少为secondNeighborFactor * objectDetectionScore则请勿确认对象。默认值为0.7 ，<int> nLocateAutomoves ： LOCATE阶段的检测步骤数（Juste用噪声移动输入检测窗口）（默认： 10 ），，<float> locateMoveNoiseAmplitude ：相对于输入窗口尺寸（默认值： 0.01 ），， LOCATE阶段的噪声<int> nConfirmAutoMoves ： CONFIRM阶段期间的检测步骤数（默认值： 8 ），<float> thresholdConfirmOffset ：Abord确认阶段是否检测分数低于对象检测阈值 +此值（默认值： -0.02 ），<float> confirmMoveNoiseAmplitude ：相对于输入窗口尺寸（默认值： 0.01 ），在CONFIRM阶段的噪声<int> nConfirmUnstitchMoves ：在保持跟踪模式（ isKeepTracking = true ） 20[<float> position, <float> angle] ：如果在CONFIRM阶段模棱两可的检测（2个对象的分数），请倾斜输入窗口。第一个值是相对于窗口尺寸的，第二个值是程度的角度（默认值： [0.1, 10] ），，<float> confirmScoreMinFactorDuringAutoMove ：在确认阶段，每个举动的最低分数。如果分数小于此值，请回到扫荡阶段。默认值为0.3 。检测函数返回对象， detectState 。为了优化目的，它是通过参考分配的，而不是通过值分配。它是具有这些属性的字典：
<float> distance ：学习距离，IE在训练数据集期间相机与物体之间的距离。给出有关对象的真实规模的线索，<bool/string> label ： false如果未检测到对象，否则检测到的对象的标签。它总是在大写字母中，取决于神经网络，<array4> positionScale ：存储4个值的浮子数组： [x,y,sx,sy]其中x和y是检测到对象中心的归一化相对位置。 sx ， sy是检测窗口的相对归一化量表因子：x是水平轴上的位置。它从0 （左）到1 （右），y是垂直轴上的位置。它从0 （底部）到1 （顶部），sx是水平轴上的比例。它从0 （尺寸为null）到1 （水平轴上的全尺寸），sy是垂直轴上的比例。它从0 （无效）到1 （垂直轴上的全尺寸），<float> yaw ：径向的角度的角度围绕垂直（y）轴旋转的角度，<float> detectScore ：检测到的对象的检测分数，在0 （不良检测）和1 （非常好检测）之间。JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) ：切换神经网络，并在完成时调用函数，用false AS参数或带有错误标签，JEEARAPI.reset_state() ：返回扫描模式，JEEARAPI.get_aspectRatio() ：返回输入源的长宽比<width>/<height>JEEARAPI.set_scanSettings(<dict> scanSettings) ：有关更多信息，请参见扫描设置部分。Webxr演示主代码直接在index.html文件中。 3D部分由三个JS处理。演示的起点是[Mozilla Fundation的WebXR查看器]（Demos的GitHub存储库）提供的示例。
我们通过特定的助手， helpers/JeelizWebXRHelper.js使用Jieliz AR ，我们强烈建议将此助手用于您的WebXR演示。通过iOS实现，它可以处理视频流转换（视频流以YCBCR缓冲液给出。我们仅采用Y缓冲区，然后在其中应用中位过滤器。）。
JEEARAPI.init返回。InitCallbackReady callbackReady ）："GL_INCOMPATIBLE" ：webGL不可用，或此WebGL配置不够（没有WebGL2，或者没有OES_TEXTURE_FLOAT或OES_TEXTURE_HALF_FLOAT EXTENSION的WEBGL1，"ALREADY_INITIALIZED" ：API已被初始化，"GLCONTEXT_LOST" ：WebGL上下文丢失了。如果初始化后上下文丢失，则将第二次以此值作为错误代码启动callbackReady函数，"INVALID_CANVASID" ：无法在DOM中找到<canvas>元素。只有在将canvasId提供给init()方法时，才能触发此错误。JEEARAPI.set_NN回调函数返回）："INVALID_NN" ：神经网络模型无效或损坏，"NOTFOUND_NN" ：未找到神经网络模型，或在请求期间发生HTTP错误。可以提供视频作物参数。仅当输入元素是<video>元素时，它才能起作用。默认情况下，没有视频裁剪（整个视频图像被视为输入）。可以提供视频作物设置：
JEEARAPI.init使用参数videoCrop调用时，JEEARAPI.set_videoCrop(<dict> videoCrop)字典videoCrop是错误的（没有Videocrop），或者具有以下参数：
<int> x ：裁剪区域左下角的水平位置，像素，<int> y ：裁剪区域左下角的垂直位置，像素，<int> w ：裁剪区域的宽度，像素，<int> h ：以像素为单位的裁剪区域的高度。可以提供扫描设置：
scanSettings调用JEEARAPI.initJEEARAPI.set_scanSettings(<dict> scanSettings)字典scanSettings具有以下属性：
<float> margins ：边距。不要尝试检测检测窗口的中心是否离边界太近。 0 →没有边缘， 1 →100％边缘。默认值： 0.1 ，<int> nSweepXYsteps ：给定比例尺的翻译步骤数。默认值： 6*6=36 ，<int> nSweepSsteps ：比例步骤的数量。翻译步骤的总数=nSweepXYsteps*nSweepSsteps 。默认值： 4 ，[<float>,<float>] sweepScaleRange ：检测窗口比例的范围。 1→整窗最小尺寸（宽度和高度之间）。不要考虑利润。默认值： [0.3, 0.7] ，，<int> sweepStepMinPx ：像素的最小尺寸。默认： 16 ，<boolean> sweepShuffle ：如果我们应该洗牌扫描位置。默认值： true 。演示应托管带有有效证书的静态HTTPS服务器。否则可能无法使用WebXR或MediaStream API。
请小心至少对JSON文件启用GZIP压缩。神经元网络模型可能很重，但幸运的是，它被GZIP良好压缩。
/dist/jeelizAR.module.js与/dist/jeelizAR.js完全相同，除了它与ES6一起使用，因此您可以直接使用以下方式导入它：
import 'dist/jeelizAR.module.js' 我们在 /神经网络 /路径中提供了几种神经网络模型。我们将定期在此GIT存储库中添加新的神经网络。我们还可以提供特定的神经网络培训服务。请在此处与我们联系以获取定价和详细信息。您可以在这里找到：
| 型号文件 | 检测到的标签 | 输入大小 | 检测成本 | 可靠性 | 评论 |
|---|---|---|---|---|---|
basic4.json | 杯子，椅子，自行车，笔记本电脑 | 128*128px | ** | ** | |
basic4Light.json | 杯子，椅子，自行车，笔记本电脑 | 64*64px | * | * | |
cat.json | 猫 | 64*64px | *** | *** | 检测猫的脸 |
sprite0.json | Spritecan | 128*128px | *** | *** | 独立网络（6D检测） |
ARCoffeeStandalone01.json | 杯子 | 64*64px | ** | *** | 独立网络（6D检测） |
输入大小是网络输入图像的分辨率。检测窗口不是静态的：它沿着视频滑动以进行位置和比例。如果您将此库与WebXR和iOS一起使用，则视频分辨率将为480*270像素，因此64*64像素输入就足够了。例如，如果您使用了128*128像素输入神经网络模型，则通常需要放大输入图像作为输入。
该库使用Jieliz WebGL深度学习技术来检测对象。使用3D引擎和3D型号的数据集对神经网络进行了训练。所有这些都是处理客户端的。
WebGL2 ，它使用WebGL2 ，不需要特定的扩展名，WebGL2不可用，但是WebGL1 ，我们需要OES_TEXTURE_FLOAT扩展名或OES_TEXTURE_HALF_FLOAT扩展名，WebGL2不可用，并且WebGL1不可用，或者OES_TEXTURE_FLOAT或OES_HALF_TEXTURE_FLOAT都无法实现，则用户不兼容。如果触发兼容性错误，请在此存储库上发布问题。如果这是网络摄像头访问的问题，请在关闭所有可以使用您的设备的应用程序后首先重试（Skype，Messenger，其他浏览器选项卡和Windows ...）。请包括：
WebGL1实现），WebGL2实现）的屏幕截图，Apache 2.0。此应用程序对于商业和非商业用途都是免费的。
我们感谢您通过在您的应用程序或桌面网站中包括Jieliz徽标和指向JIELIZ网站的链接。当然，我们不会期望在您的面部滤镜上有一个较大的链接，但是如果您可以将链接放入信用/aidgion/help/footer部分中，那就太好了。
Jieliz主脸检测和跟踪库是Cjieliz faceFilter API。它处理多面跟踪，对于每个跟踪的脸部，它都提供了旋转角度和开口因子。非常适合在浏览器中构建自己的snapchat/msqrd，就像在浏览器中运行的脸部过滤器一样。它带有数十个集成演示，包括面部交换。
我们基于深度学习的图书馆Weboji从网络摄像头视频提要中实时检测11种面部表情。然后，它们将在三个化身中复制在3D上，带有三个JS渲染器，或者在2D中使用SVG渲染器（因此，即使您不是3D开发人员，也可以使用它）。您可以在此处访问GITHUB存储库。
如果您只想检测用户是否正在查看屏幕，那么Jieliz Glance Tracker就是您想要的。无论用户是否正在观看，播放和暂停视频都可能很有用。该图书馆需要更少的资源，而神经网络文件则更轻。
如果您想将此库用于Virtual Try-On（太阳镜，眼镜，滑雪口罩），可以看一下Jieliz VTO小部件。它包括高质量且轻巧的3D引擎，可实现以下功能：递延阴影，PBR，射线饰面阴影，正常映射，...还可以重建用户周围的照明环境（环境和定向照明）。但是眼镜来自我们服务器中托管的数据库。如果您想添加一些型号，请与我们联系。
