deepar 5.3.1-rigid-face-alpha-3 → 5.3.1-selfieSegmentation-alpha-5

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 (16) hide show
  1. package/README.md +42 -16
  2. package/VERSION.txt +1 -1
  3. package/js/deepar.esm.js +1 -1
  4. package/js/deepar.js +1 -1
  5. package/js/types/initParams.d.ts +7 -27
  6. package/js/types/version.d.ts +1 -1
  7. package/mediaPipe/segmentation/models/selfie_segmenter.tflite +0 -0
  8. package/mediaPipe/segmentation/models/selfie_segmenter_landscape.tflite +0 -0
  9. package/mediaPipe/segmentation/wasm/vision_wasm_internal.js +22 -0
  10. package/mediaPipe/segmentation/wasm/vision_wasm_internal.wasm +0 -0
  11. package/mediaPipe/segmentation/wasm/vision_wasm_nosimd_internal.js +22 -0
  12. package/mediaPipe/segmentation/wasm/vision_wasm_nosimd_internal.wasm +0 -0
  13. package/package.json +1 -1
  14. package/wasm/deepar.wasm +0 -0
  15. package/models/face-cnn/face-det.bin +0 -0
  16. package/models/face-cnn/face-track-19.bin +0 -0
package/README.md CHANGED
@@ -5,19 +5,19 @@ that allows users to integrate advanced, Snapchat-like
5
5
  face lenses in the browser environment.
6
6
 
7
7
  DeepAR Web supports:
8
+ - Glasses try-on.
8
9
  - Face filters and masks.
9
10
  - Background replacement.
10
11
  - Background blur.
11
12
  - Shoe try-on.
12
13
  - AR mini-games.
13
14
 
14
- > ❗ DeepAR Web works only in the **browser** (not Node.js).
15
-
16
15
  ## Documentation
17
16
 
18
- - Visit the official DeepAR docs for Web SDK here: https://docs.deepar.ai/category/deepar-sdk-for-web
17
+ - Visit official DeepAR docs for Web SDK here https://docs.deepar.ai/category/deepar-sdk-for-web.
19
18
  - See the official example here: https://github.com/DeepARSDK/quickstart-web-js-npm
20
- - Full API reference [here](https://s3.eu-west-1.amazonaws.com/sdk.developer.deepar.ai/doc/web/index.html).
19
+ - Set up and web ad with DeepAR: https://github.com/DeepARSDK/quickstart-web-ad
20
+ - Full API reference [here](https://docs.deepar.ai/deepar-sdk/deep-ar-sdk-for-web/api-reference).
21
21
 
22
22
  ## License key
23
23
 
@@ -77,23 +77,33 @@ Add the following code to an HTML file:
77
77
  ```html
78
78
  <html>
79
79
  <head>
80
- <!-- Load deepar.js -->
81
- <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"> </script>
80
+ <!-- Load deepar.js -->
81
+ <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"> </script>
82
82
  </head>
83
83
 
84
84
  <body>
85
- <!-- Canvas element for AR preview -->
86
- <canvas width="640" height="360" id="deepar-canvas"></canvas>
87
- <!-- Initialize DeepAR and load AR effect/filter -->
88
- <script>
85
+ <!-- Canvas element for AR preview -->
86
+ <canvas width="640" height="360" id="deepar-canvas"></canvas>
87
+ <!-- Initialize DeepAR and load AR effect/filter -->
88
+ <script>
89
89
  (async function() {
90
- const deepAR = await deepar.initialize({
91
- licenseKey: 'your_license_key_here',
92
- canvas: document.getElementById('deepar-canvas'),
93
- effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
94
- });
90
+ const canvas = document.getElementById("deepar-canvas");
91
+
92
+ // Set canvas size, accounting screen resolution (to make it look 🤌 even on high definition displays)
93
+ const canvasSize = { width: 640, height: 360 };
94
+ const dpr = window.devicePixelRatio || 1;
95
+ canvas.style.maxWidth = `${canvasSize.width}px`;
96
+ canvas.style.maxHeight = `${canvasSize.height}px`;
97
+ canvas.width = Math.floor(canvasSize.width * dpr);
98
+ canvas.height = Math.floor(canvasSize.height * dpr);
99
+
100
+ const deepAR = await deepar.initialize({
101
+ licenseKey: 'your_license_key_here',
102
+ canvas: canvas,
103
+ effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
104
+ });
95
105
  })();
96
- </script>
106
+ </script>
97
107
  </body>
98
108
  </html>
99
109
  ```
@@ -161,6 +171,22 @@ deepAR.startVideoRecording();
161
171
  const video = await deepAR.finishVideoRecording();
162
172
  ```
163
173
 
174
+ ## Background blur
175
+
176
+ Enable background blur with strength 5.
177
+ ```javascript
178
+ await deepAR.backgroundBlur(true, 5)
179
+ ```
180
+
181
+ ## Background replacement
182
+
183
+ This is also known as background removal or green screen effect.
184
+
185
+ Enable background replacement with an image of a sunny beach.
186
+ ```javascript
187
+ await deepAR.backgroundReplacement(true, 'images/sunny_beach.png')
188
+ ```
189
+
164
190
  ## Callbacks
165
191
 
166
192
  DeepAR has some callbacks you can implement for additional informations. For example,
package/VERSION.txt CHANGED
@@ -1 +1 @@
1
- DeepAR SDK version: v5.3.1-rigid-face-alpha-3
1
+ DeepAR SDK version: v5.3.1-selfieSegmentation-alpha-5