deepar 5.3.1-selfieSegmentation-alpha-5 → 5.4.0-canvasInDiv-alpha-13

package/js/types/canvasHelper.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Function that needs to be called before every render.
+ */
+declare const preRenderUpdate: () => void;
+/**
+ * Function that needs to be called after every render.
+ */
+declare const postRenderUpdate: () => void;
+/**
+ * Creates a canvas and appends it to the target element.
+ * @param targetElement
+ */
+declare function createCanvas(targetElement: HTMLElement): HTMLCanvasElement;
+/**
+ * Removes the created canvas and invalidates the current context.
+ */
+declare function invalidate(): void;
+export { preRenderUpdate, postRenderUpdate, createCanvas, invalidate };

package/js/types/index.d.ts

@@ -4,6 +4,7 @@ export * from './initParams';
 export * from './callbacks';
 export * from './faceData';
 export * from './footData';
+export * from './wristData';
 export * from './scriptingApi';
 export * as errors from './errors';
 export * from './touchType';

package/js/types/initParams.d.ts

@@ -7,9 +7,20 @@ export interface DeepARParams {
      */
     licenseKey: string;
     /**
-     * Canvas element where DeepAR will render the camera and effects/filters.
+     * Target HTML element where AR preview will be presented.
+     *
+     * > ⚠️ You must specify {@link targetElement} or {@link canvas}.
+     *
+     * This is usually a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div">div</a> element which
+     * is used solely for AR preview. AR preview will fully occupy the targetElement's space.
+     * Therefore, position and size your targetElement according to your preferred AR preview dimensions.
+     *
+     * > NOTE: AR preview will adjust to the size of the targetElement if it changes.
+     *
+     * The canvas element will be appended as child to the targetElement. If you wish to work with the canvas element directly
+     * and position and size it yourself then use {@link canvas} parameter instead.
      */
-    canvas: HTMLCanvasElement;
+    targetElement?: HTMLElement;
     /**
      *  The URL of a DeepAR effect file. This effect will be applied when DeepAR is initialized.
      *  This parameter is optional. You can always later switch to a different effect with {@link DeepAR.switchEffect}.
@@ -28,6 +39,30 @@ export interface DeepARParams {
      * To configure usage of non-default ML models, define them in the {@link additionalOptions}.
      */
     rootPath?: string;
+    /**
+     * Canvas element where DeepAR will render the AR preview.
+     *
+     * > ⚠️ You must specify {@link targetElement} or {@link canvas}.
+     *
+     * The preferred way is by using the {@link targetElement} parameter.
+     * In that case, the DeepAR will take care of correctly sizing the canvas.
+     *
+     * @example
+     * ```javascript
+     * const canvas = document.createElement('canvas')
+     * canvas.style.display = 'block'
+     *
+     * // We want to fill the whole screen.
+     * const width = window.innerWidth
+     * const height = window.innerHeight
+     * const dpr = window.devicePixelRatio || 1
+     * canvas.width = width * dpr
+     * canvas.height = height * dpr
+     * canvas.style.width = `${width}px`
+     * canvas.style.height = `${height}px`
+     * ```
+     */
+    canvas?: HTMLCanvasElement;
     /**
      * Additional DeepAR options.
      */
@@ -81,11 +116,7 @@ export interface DeepARParams {
             /**
              * Path to the segmentation model. Something like "path/to/deepar/models/segmentation/segmentation-192x192.bin".
              */
-            modelPath?: string;
-            mediaPipeConfig?: {
-                wasmBasePath?: string;
-                modelPath?: string;
-            };
+            modelPath: string;
         };
         /**
          * Foot tracking module paths and options.

package/js/types/version.d.ts

@@ -1,5 +1,5 @@
 /**
  * DeepAR Web SDK version.
  */
-declare const version = "5.3.1-selfieSegmentation-alpha-5";
+declare const version = "5.4.0-canvasInDiv-alpha-13";
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepar",
-  "version": "5.3.1-selfieSegmentation-alpha-5",
+  "version": "5.4.0-canvasInDiv-alpha-13",
   "description": "The official DeepAR Web SDK",
   "main": "js/deepar.esm.js",
   "jsdelivr": "js/deepar.js",