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，射線飾面陰影，正常映射，...還可以重建用戶周圍的照明環境（環境和定向照明）。但是眼鏡來自我們服務器中託管的數據庫。如果您想添加一些型號，請與我們聯繫。
