npm - deepar - Versions diffs - 5.0.0-alpha-4 → 5.0.0-alpha-744 - Mend

deepar 5.0.0-alpha-4 → 5.0.0-alpha-744

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md CHANGED Viewed

@@ -11,12 +11,13 @@ DeepAR Web supports:
 - Shoe try-on.
 - AR mini-games.
-> ❗ DeepAR Web requires an internet connection.
+> ❗ DeepAR Web works only in the **browser** (not Node.js).
 ## Documentation
 - Visit the official DeepAR docs for Web SDK here: https://docs.deepar.ai/category/deepar-sdk-for-web
 - See the official example here: https://github.com/DeepARSDK/quickstart-web-js-npm
+- Full API reference [here](https://s3.eu-west-1.amazonaws.com/sdk.developer.deepar.ai/doc/web/index.html).
 ## License key
@@ -101,22 +102,26 @@ or [Rollup](https://rollupjs.org/guide/en).
 Add the following code to an HTML file:
 ```html
 <html>
-  <head>
-    <!-- Load deepar.js -->
-    <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"> </script>
-    <script>
+<head>
+  <!-- Load deepar.js -->
+  <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"> </script>
+</head>
+<body>
+  <!-- Canvas element for AR preview -->
+  <canvas width="640" height="360" id="deepar-canvas"></canvas>
+  <!-- Initialize DeepAR and load AR effect/filter -->
+  <script>
+    (async function() {
       const deepAR = await deepar.initialize({
         licenseKey: 'your_license_key_here',
         canvas: document.getElementById('deepar-canvas'),
-        effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
+        effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
       });
-    </script>
-  </head>
-<body>
-  <canvas width="1280" height="720" id="deepar-canvas"></canvas>
+    })();
+  </script>
 </body>
-</html>>
+</html>
 ```
 ### via NPM
@@ -130,18 +135,17 @@ understand. However, you are free to use any build tool that you prefer.
 ```javascript
 import * as deepar from 'deepar';
-import deeparEffect from './effects/effectFile'
 const deepAR = await deepar.initialize({
-    licenseKey: 'your_license_key_here',
-    canvas: document.getElementById('deepar-canvas'),
-    effect: deeparEffect
+  licenseKey: 'your_license_key_here',
+  canvas: document.getElementById('deepar-canvas'),
+  effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
 });
 ```
 ## Switch effects
-All filters are represented by effect files in DeepAR. You can load them to preview the effect.
+AR filters are represented by effect files in DeepAR. You can load them to preview the effect.
 Places you can get DeepAR effects:
 - Download a free filter pack: https://docs.deepar.ai/deep-ar-studio/free-filter-pack.
@@ -150,13 +154,14 @@ Places you can get DeepAR effects:
 Load an effect using the `switchEffect` method:
 ```javascript
-deepAR.switchEffect('path/to/effect/alien');
+await deepAR.switchEffect('path/to/effect/alien');
 ```
 ## Take screenshot or video
 Take a screenshot.
 ```javascript
+// The image is a data url.
 const image = await deepAR.takeScreenshot();
 ```
@@ -168,6 +173,30 @@ deepAR.startVideoRecording();
 const video = await deepAR.finishVideoRecording();
 ```
+## Callbacks
+DeepAR has some callbacks you can implement for addition information. For example,
+to check if feet are visible in the camera preview.
+```javascript
+await deepAR.switchEffect('https://cdn.jsdelivr.net/npm/deepar/effects/Shoe');
+deepAR.callbacks.onFeetTracked = (leftFoot, rightFoot) => {
+    if(leftFoot.detected && rightFoot.detected) {
+        console.log('Both foot detected!');
+    } else if (leftFoot.detected) {
+        console.log('Left foot detected!');
+    } else if (rightFoot.detected) {
+        console.log('Right foot detected!');
+    } else {
+        console.log('No feet detected!');
+    }
+};
+```
+To remove callback if you don't need it anymore.
+```javascript
+deepAR.callbacks.onFeetTracked = undefined;
+```
 ## Different video sources
 DeepAR will by default use the user facing camera. It will also ask the
@@ -206,18 +235,95 @@ Initialize DeepAR but start the camera later.
 This is used when you do not want to ask the camera permission right away.
 ```javascript
 const deepAR = await deepar.initialize({
-  // ...
-  additionalOptions: {
-      cameraConfig: {
-          disableDefaultCamera: true
-      }
-  }
+    // ...
+    additionalOptions: {
+        cameraConfig: {
+            disableDefaultCamera: true
+        }
+    }
 });
 // When you want to ask the camera permission and start the camera.
 await deepAR.startCamera();
 ```
+## Download speed optimizations for DeepAR Web
+Apart from the main *deepar.js* file and AR effect files, DeepAR uses additional files like:
+- WebAssembly (WASM) files.
+- ML model files.
+Some of them are required and will be downloaded every time. The others will be lazy
+downloaded when/if needed.
+> ⚠️ DeepAR will by default automatically fetch all additional resources from the [JsDelivr](https://www.jsdelivr.com/) CDN.
+Fetching files from JsDelivr is not recommended if you care about download
+speeds of DeepAR Web resources. This is because the files on JsDelivr are not compressed.
+### Compression
+To optimize download speeds, all the DeepAR files should be compressed.
+It is recommended to serve DeepAR files from your own server or some CDN which supports file compression.
+> If it is supported, you should use [GZip](https://developer.mozilla.org/en-US/docs/Glossary/GZip_compression) or
+> [Brotli](https://developer.mozilla.org/en-US/docs/Glossary/Brotli_compression) compression on all DeepAR files which will significantly reduce the
+> SDK size. Check out your server/CDN options for compressing files.
+### Custom deployment of DeepAR Web
+DeepAR Web can be downloaded from [DeepAR Developer Portal](https://developer.deepar.ai/downloads).
+But since most users will install DeepAR through NPM, follow the next instructions.
+It is recommended to copy `./node_modules/deepar` directory which contains all the DeepAR
+files into your distribution (dist) folder.
+You can use `rootPath` to set a path to the custom root of the DeepAR SDK. All additional files
+that need to be fetched by DeepAR will be resolved against the given `rootPath`.
+```javascript
+const deepAR = await deepar.initialize({
+  // ...
+  rootPath: 'path/to/root/deepar/directory'
+});
+```
+> It is recommended to setup the copying of the DeepAR directory as part of you bundler build scripts,
+> in case you ever need to updated to a newer version of DeepAR.
+#### Specifying paths for each file
+Another option, instead of using the DeepAR directory and copying it as-is, is to specify
+a path to each file. The advantage of this is that you can use the bundler to keep track of your files.
+For example, if using [Webpack](https://webpack.js.org/), you can use it's
+[asset modules](https://webpack.js.org/guides/asset-modules/) to import all the files needed.
+Pass the file paths in `additionalOptions`.
+```javascript
+const deepAR = await deepar.initialize({
+    // ...
+    additinalOptions: {
+        faceTrackingConfig: {
+            modelPath: "path/to/deepar/models/face/models-68-extreme.bin"
+        },
+        segmentationConfig: {
+            modelPath: "path/to/deepar/models/segmentation/segmentation-160x160-opt.bin"
+        },
+        footTrackingConfig: {
+            poseEstimationWasmPath: "path/to/deepar/wasm/libxzimgPoseEstimation.wasm",
+            detectorPath: "path/to/deepar/models/foot/foot-detection-96x96x6.bin",
+            trackerPath: "path/to/deepar/models/foot/foot-tracker-96x96x18-test.bin",
+            objPath: "path/to/deepar/models/foot/foot-model.obj",
+            tfjsBackendWasmPath: "path/to/deepar/wasm/tfjs-backend-wasm.wasm",
+            tfjsBackendWasmSimdPath: "path/to/deepar/wasm/tfjs-backend-wasm-simd.wasm",
+            tfjsBackendWasmThreadedSimdPath: "path/to/deepar/wasm/tfjs-backend-wasm-threaded-simd.wasm",
+        },
+        deeparWasmPath: 'path/to/deepar/wasm/deepar.wasm'
+    }
+});
+```
 ## License
 Please see: https://developer.deepar.ai/customer-agreement

package/effects/Shoe ADDED Viewed

Binary file

package/effects/galaxy_background ADDED Viewed

Binary file