deepar - npm Package Compare versions

Comparing version 5.0.0-alpha-4 to 5.0.0-alpha-744

js/types/callbacks.d.ts

@@ -15,3 +15,4 @@ import { FaceData } from "./faceData";
     /**
-     * Passes the information about the detected faces. If this callback is set, it will get called every frame when a face is detected.
+     * Passes the information about the detected faces. If this callback is set, it will get called every frame.
+     * NOTE: This callback is only called when the SDK does face tracking. For example, you laded some effect that uses face tracking (most of them do). But if no effect is loaded this callback will not get called because the SDK is not performing face tracking.
      * @param faceDataArray Information about all the tracked faces.
@@ -21,3 +22,4 @@ */
     /**
-     * Passes the information about the detected feet. If this callback is set, it will get called every frame when a foot is detected.
+     * Passes the information about the detected feet. If this callback is set, it will get called every frame.
+     * NOTE: This callback is only called when the SDK does foot tracking. For example, you laded some effect that uses foot tracking (shoe-try-on effects). But if no effect is loaded this callback will not get called because the SDK is not performing foot tracking.
      * @param leftFootData Information about the left foot.
@@ -24,0 +26,0 @@ * @param rightFootData Information about the right foot.

js/types/DeepAR.d.ts

@@ -55,8 +55,9 @@ import { ARTouchInfo } from "./touchType";
      *
+     * @throws {@link errors.SwitchEffectCanceled} If the switch effect is canceled by something.
      *
      * @example
      * // Switch filter 1.
-     * deepAR.switchEffect('url/path/to/filter1');
+     * await deepAR.switchEffect('url/path/to/filter1');
      * // Later switch fo filter 2.
-     * deepAR.switchEffect('url/path/to/filter2');
+     * await deepAR.switchEffect('url/path/to/filter2');
      *
@@ -67,9 +68,15 @@ * // Remove the current filter.
      * // Put two filters at the same time.
-     * deepAR.switchEffect('url/path/to/backgroundReplacement', {slot: 'background'});
-     * deepAR.switchEffect('url/path/to/glasses', {slot: 'faceMask'});
+     * await deepAR.switchEffect('url/path/to/backgroundReplacement', {slot: 'background'});
+     * await deepAR.switchEffect('url/path/to/glasses', {slot: 'faceMask'});
      * // Replace the glasses filter.
-     * deepAR.switchEffect('url/path/to/glasses2', {slot: 'faceMask'});
+     * await deepAR.switchEffect('url/path/to/glasses2', {slot: 'faceMask'});
      * // Remove those filters.
      * deepAR.clearEffect('background');
      * deepAR.clearEffect('faceMask');
+     *
+     * // Load filters for two people.
+     * await deepAR.switchEffect('url/path/to/faceMask1', {face: 0, slot: 'mask1'});
+     * await deepAR.switchEffect('url/path/to/faceMask2', {face: 1, slot: 'mask2'});
+     * // Clear effect for the second person.
+     * deepAR.clearEffect('mask2');
      */
@@ -115,4 +122,4 @@ switchEffect(effect: string | ArrayBuffer, effectOptions?: {
         mediaStreamConstraints?: MediaStreamConstraints;
-        cameraPermissionAsked: () => void;
-        cameraPermissionGranted: () => void;
+        cameraPermissionAsked?: () => void;
+        cameraPermissionGranted?: () => void;
     }): Promise<void>;
@@ -150,3 +157,4 @@ /**
     /**
-     * Process RGBA image. Used for processing single image. Can be used instead of {@link startCamera} or {@link setVideoElement}.
+     * Feed RGBA image to DeepAR as input instead of camera or video. Used for processing single image. Can be used instead of {@link startCamera} or {@link setVideoElement}.
+     * Can be called in a loop.
      * @param frame Image.
@@ -241,3 +249,3 @@ * @param width Width of the image.
      * But this method will start loading the foot tracking immediately.
-     * To start initializing foot tracking as soon as possible pass "foot" hint in the {@link initialize} function (see {@link DeepARParams}). <br><br>
+     * To start initializing foot tracking as soon as possible pass "footInit" hint in the {@link initialize} function (see {@link DeepARParams}). <br><br>
      *
@@ -257,3 +265,3 @@ * If the foot tracking is already initialized it will do nothing.
      * But this method will start loading the segmentation immediately.
-     * To start initializing foot tracking as soon as possible pass "segmentation" hint in the {@link initialize} function (see {@link DeepARParams}). <br><br>
+     * To start initializing foot tracking as soon as possible pass "segmentationInit" hint in the {@link initialize} function (see {@link DeepARParams}). <br><br>
      *
@@ -260,0 +268,0 @@ * If the segmentation is already initialized it will do nothing.

js/types/index.d.ts

@@ -7,2 +7,3 @@ export * from './version';
 export * from './footData';
+export * as errors from './errors';
 export * from './touchType';

js/types/initParams.d.ts

@@ -20,3 +20,3 @@ /**
      * Path to the root directory of the DeepAR SDK. This path will be used to locate and download all the additional needed files like ML models and wasm files.
-     * By default, this points to the JsDelivr CDN. For example "https://cdn.jsdelivr.net/npm/deepar@4.0.3/".<br>
+     * By default, this points to the JsDelivr CDN. For example "https://cdn.jsdelivr.net/npm/deepar@5.0.0/".<br>
      *
@@ -23,0 +23,0 @@ * If you want to host the DeepAR SDK yourself set the path to it here. It is recommended to host DeepAR SDK on your own since then you can use compressions like gzip and brotli on the files.

js/types/version.d.ts

 /**
  * DeepAR Web SDK version.
  */
-declare const version = "5.0.0-alpha-4";
+declare const version = "5.0.0-alpha-744";
 export { version };

package.json

 {
   "name": "deepar",
-  "version": "5.0.0-alpha-4",
+  "version": "5.0.0-alpha-744",
   "description": "The official DeepAR Web SDK",
@@ -5,0 +5,0 @@ "main": "js/deepar.esm.js",

README.md

@@ -14,3 +14,3 @@ # deepar
 
-> ❗ DeepAR Web requires an internet connection.
+> ❗ DeepAR Web works only in the **browser** (not Node.js).
 
@@ -21,2 +21,3 @@ ## Documentation
 - 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).
 
@@ -106,18 +107,22 @@ ## License key
 <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>
 ```
@@ -136,8 +141,7 @@
 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' 
 });
@@ -148,3 +152,3 @@ ```
 
-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.
 
@@ -158,3 +162,3 @@ Places you can get DeepAR effects:
 ```javascript
-deepAR.switchEffect('path/to/effect/alien');
+await deepAR.switchEffect('path/to/effect/alien');
 ```
@@ -166,2 +170,3 @@
 ```javascript
+// The image is a data url.
 const image = await deepAR.takeScreenshot();
@@ -178,2 +183,26 @@ ```
 
+## 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
@@ -217,8 +246,8 @@
 const deepAR = await deepar.initialize({
-  // ...
-  additionalOptions: {
-      cameraConfig: {
-          disableDefaultCamera: true
-      }
-  }
+    // ...
+    additionalOptions: {
+        cameraConfig: {
+            disableDefaultCamera: true
+        }
+    }
 });
@@ -230,4 +259,81 @@
 
+## 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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26071172

increased by26.47%

Number of package files

32

increased by10.34%

Lines of code

8093

increased by0.32%

Number of lines in readme file

330

increased by47.32%

Worsened metrics

Number of medium supply chain risk alerts

54

increased by1.89%

No dependency changes