Skip to main content

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 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 or Brotli 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 resources​

DeepAR Web can be downloaded from DeepAR Developer Portal. 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 and use it as a static (public) directory. 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.

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, you can use it's asset modules to import all the files needed.

Pass the file paths in additionalOptions.

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'
  }
});