deepar 5.4.0-canvasInDiv-alpha-13 → 5.4.0

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 (28) hide show
  1. package/README.md +59 -57
  2. package/VERSION.txt +1 -1
  3. package/effects/background_blur.deepar +0 -0
  4. package/js/deepar.esm.js +2 -1
  5. package/js/deepar.esm.js.LICENSE.txt +6 -0
  6. package/js/deepar.js +2 -1
  7. package/js/deepar.js.LICENSE.txt +6 -0
  8. package/js/dynamicModules/mediaPipe.esm.js +1 -0
  9. package/js/dynamicModules/xzimg.esm.js +2 -0
  10. package/js/dynamicModules/xzimg.esm.js.LICENSE.txt +219 -0
  11. package/js/types/DeepAR.d.ts +60 -27
  12. package/js/types/callbacks.d.ts +1 -0
  13. package/js/types/canvasHelper.d.ts +2 -2
  14. package/js/types/canvasTouchHelper.d.ts +13 -0
  15. package/js/types/initParams.d.ts +64 -12
  16. package/js/types/mediaRecorderVideoRecording.d.ts +10 -0
  17. package/js/types/version.d.ts +1 -1
  18. package/js/types/webCodecsVideoRecording.d.ts +11 -0
  19. package/mediaPipe/segmentation/models/selfie_segmenter.tflite +0 -0
  20. package/mediaPipe/segmentation/models/selfie_segmenter_landscape.tflite +0 -0
  21. package/mediaPipe/segmentation/wasm/vision_wasm_internal.js +22 -0
  22. package/mediaPipe/segmentation/wasm/vision_wasm_internal.wasm +0 -0
  23. package/mediaPipe/segmentation/wasm/vision_wasm_nosimd_internal.js +22 -0
  24. package/mediaPipe/segmentation/wasm/vision_wasm_nosimd_internal.wasm +0 -0
  25. package/models/face-cnn/face-det.bin +0 -0
  26. package/models/face-cnn/face-track-19.bin +0 -0
  27. package/package.json +1 -1
  28. package/wasm/deepar.wasm +0 -0
package/README.md CHANGED
@@ -42,27 +42,6 @@ Using `yarn`:
42
42
  $ yarn add deepar
43
43
  ```
44
44
 
45
- ## Canvas
46
-
47
- DeepAR requires a [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) element for the preview of camera, masks, filters and effects. You can add it directly in the HTML.
48
-
49
- ```html
50
- <canvas width="1280" height="720"></canvas>
51
- ```
52
-
53
- Or you can create it in Javascript.
54
- ```javascript
55
- const canvas = document.createElement("canvas");
56
- canvas.width = 1280;
57
- canvas.height = 720;
58
- ```
59
-
60
- > ⚠️ **Note:** Be sure to set `width` and `height` properties of the `canvas`!
61
-
62
- You can always change the canvas dimensions and they don't have to match the
63
- input video resolution. DeepAR will fit the input camera/video stream correctly
64
- to any canvas size.
65
-
66
45
  ## Getting started
67
46
  There are two main ways to get deepar.js in your JavaScript project:
68
47
  via [script tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)
@@ -77,42 +56,32 @@ Add the following code to an HTML file:
77
56
  ```html
78
57
  <html>
79
58
  <head>
80
- <!-- Load deepar.js -->
81
- <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"> </script>
59
+ <!-- Load deepar.js -->
60
+ <script src='https://cdn.jsdelivr.net/npm/deepar/js/deepar.js'> </script>
82
61
  </head>
83
62
 
84
63
  <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>
64
+ <!-- Div element where AR preview will be inserted -->
65
+ <div style='width: 640px; height: 360px' id='deepar-div'></div>
66
+ <!-- Initialize DeepAR and load AR effect/filter -->
67
+ <script>
89
68
  (async function() {
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
- });
69
+ const deepAR = await deepar.initialize({
70
+ licenseKey: 'your_license_key_here',
71
+ previewElement: document.querySelector('#deepar-div'),
72
+ effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
73
+ });
105
74
  })();
106
- </script>
75
+ </script>
107
76
  </body>
108
77
  </html>
109
78
  ```
110
79
 
111
80
  Alternatively, you can import DeepAR as an ES6 module.
112
81
 
113
- Via `<script type="module">`.
82
+ Via `<script type='module'>`.
114
83
  ```html
115
- <script type="module">
84
+ <script type='module'>
116
85
  import * as deepar from 'https://cdn.jsdelivr.net/npm/deepar/js/deepar.esm.js';
117
86
  </script>
118
87
  ```
@@ -136,7 +105,7 @@ import * as deepar from 'deepar';
136
105
 
137
106
  const deepAR = await deepar.initialize({
138
107
  licenseKey: 'your_license_key_here',
139
- canvas: document.getElementById('deepar-canvas'),
108
+ previewElement: document.querySelector('#deepar-canvas'),
140
109
  effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
141
110
  });
142
111
  ```
@@ -163,9 +132,9 @@ Take a screenshot.
163
132
  const image = await deepAR.takeScreenshot();
164
133
  ```
165
134
 
166
- Shoot a video.
135
+ Record a video.
167
136
  ```javascript
168
- deepAR.startVideoRecording();
137
+ await deepAR.startVideoRecording();
169
138
  // Video is now recording...
170
139
  // When user is ready to stop recording.
171
140
  const video = await deepAR.finishVideoRecording();
@@ -261,6 +230,39 @@ const deepAR = await deepar.initialize({
261
230
  await deepAR.startCamera();
262
231
  ```
263
232
 
233
+ ## Providing your own canvas for rendering
234
+
235
+ Create canvas directly in the HTML:
236
+ ```html
237
+ <canvas width='1280' height='720'></canvas>
238
+ ```
239
+
240
+ Or you can create it in Javascript.
241
+ ```javascript
242
+ const canvas = document.createElement('canvas');
243
+ // Set canvas size, accounting screen resolution (to make it look 🤌 even on high definition displays)
244
+ const canvasSize = { width: 640, height: 360 };
245
+ const dpr = window.devicePixelRatio || 1;
246
+ canvas.style.maxWidth = `${canvasSize.width}px`;
247
+ canvas.style.maxHeight = `${canvasSize.height}px`;
248
+ canvas.width = Math.floor(canvasSize.width * dpr);
249
+ canvas.height = Math.floor(canvasSize.height * dpr);
250
+ ```
251
+
252
+ > ⚠️ **Note:** Be sure to set `width` and `height` properties of the `canvas`!
253
+
254
+ You can always change the canvas dimensions and they don't have to match the
255
+ input video resolution. DeepAR will fit the input camera/video stream correctly
256
+ to any canvas size.
257
+
258
+ You pass the canvas when initializing DeepAR.
259
+ ```javascript
260
+ await deepar.initialize({
261
+ canvas: canvas,
262
+ // ...
263
+ });
264
+ ```
265
+
264
266
  ## Download speed optimizations for DeepAR Web
265
267
 
266
268
  Apart from the main *deepar.js* file and AR effect files, DeepAR uses additional files like:
@@ -319,19 +321,19 @@ const deepAR = await deepar.initialize({
319
321
  // ...
320
322
  additinalOptions: {
321
323
  faceTrackingConfig: {
322
- modelPath: "path/to/deepar/models/face/models-68-extreme.bin"
324
+ modelPath: 'path/to/deepar/models/face/models-68-extreme.bin'
323
325
  },
324
326
  segmentationConfig: {
325
- modelPath: "path/to/deepar/models/segmentation/segmentation-160x160-opt.bin"
327
+ modelPath: 'path/to/deepar/models/segmentation/segmentation-160x160-opt.bin'
326
328
  },
327
329
  footTrackingConfig: {
328
- poseEstimationWasmPath: "path/to/deepar/wasm/libxzimgPoseEstimation.wasm",
329
- detectorPath: "path/to/deepar/models/foot/foot-detection-96x96x6.bin",
330
- trackerPath: "path/to/deepar/models/foot/foot-tracker-96x96x18-test.bin",
331
- objPath: "path/to/deepar/models/foot/foot-model.obj",
332
- tfjsBackendWasmPath: "path/to/deepar/wasm/tfjs-backend-wasm.wasm",
333
- tfjsBackendWasmSimdPath: "path/to/deepar/wasm/tfjs-backend-wasm-simd.wasm",
334
- tfjsBackendWasmThreadedSimdPath: "path/to/deepar/wasm/tfjs-backend-wasm-threaded-simd.wasm",
330
+ poseEstimationWasmPath: 'path/to/deepar/wasm/libxzimgPoseEstimation.wasm',
331
+ detectorPath: 'path/to/deepar/models/foot/foot-detection-96x96x6.bin',
332
+ trackerPath: 'path/to/deepar/models/foot/foot-tracker-96x96x18-test.bin',
333
+ objPath: 'path/to/deepar/models/foot/foot-model.obj',
334
+ tfjsBackendWasmPath: 'path/to/deepar/wasm/tfjs-backend-wasm.wasm',
335
+ tfjsBackendWasmSimdPath: 'path/to/deepar/wasm/tfjs-backend-wasm-simd.wasm',
336
+ tfjsBackendWasmThreadedSimdPath: 'path/to/deepar/wasm/tfjs-backend-wasm-threaded-simd.wasm',
335
337
  },
336
338
  deeparWasmPath: 'path/to/deepar/wasm/deepar.wasm'
337
339
  }
package/VERSION.txt CHANGED
@@ -1 +1 @@
1
- DeepAR SDK version: v5.4.0-canvasInDiv-alpha-13
1
+ DeepAR SDK version: v5.4.0
package/effects/background_blur.deepar CHANGED
Binary file