0

I am trying to implement DeepAR SDK for shoe try-on in my react app but when I try to instantiate DeepAR class I got a weird error:

Uncaught (in promise) RuntimeError: Aborted(both async and sync fetching of the wasm failed). Build with -sASSERTIONS for more info.
    at q2 (deepar.esm.js:1:676382)
    at Q2 (deepar.esm.js:1:676689)
    at deepar.esm.js:1:755786

I tried to put those files in public folder, and inside src but it didn't work.

 const deepar = new DeepAR({
    canvas,
    licenseKey: import.meta.env.VITE_DEEPAR_SDK_KEY,
    deeparWasmPath: "../lib/wasm/deepar.wasm",
    footTrackingConfig: {
      poseEstimationWasmPath: "../lib/wasm/libxzimgPoseEstimation.wasm",
      detectorPath: iosDetected
        ? "../lib/models/foot/foot-detector-ios.bin"
        : "../lib/models/foot/foot-detector-android.bin",
      trackerPath: iosDetected
        ? "../lib/models/foot/foot-tracker-ios.bin"
        : "../lib/models/foot/foot-tracker-android.bin",
      objPath: "../lib/models/foot/foot-model.obj",
    },
    callbacks: {
      onInitialize: () => {
        deepar.startVideo();
        // deepar.switchEffect(0, "mask", "/effects/Shoe_PBR");
      },
      onCameraPermissionAsked: () => console.log("onCameraPermissionAsked"),
      onCameraPermissionGranted: () => console.log("onCameraPermissionGranted"),
      onCameraPermissionDenied: () => console.log("onCameraPermissionDenied"),
      onVideoStarted: () => console.log("onVideoStarted"),
      onError: (error) => console.log("onError", error),
    },
  });
Ismail_Aj
  • 332
  • 1
  • 4
  • 17
  • did you get this resolved? I'm now having a similar issue. The minute I import DeepAR alone, my app produced build error around `/node_modules/deepar/js/deepar.esm.js:1` – guest May 14 '23 at 03:48
  • No I didn't found the solution – Ismail_Aj May 14 '23 at 16:43
  • 1
    I actually solved this bug after messing around with it the entire day. It was because DeepAR was instantly loading the file (so you have to defer the loading of the component that was using DeepAR). Once I did this, I was able to render all effects without error. – guest May 14 '23 at 18:42
  • Could you please share a code snippet explaining what you did – Ismail_Aj May 14 '23 at 18:45
  • 1
    Mine was based on NextJs/React. It might not be exactly the solution to the your problem. NextJS has something called dynamic import, so I did this with the component below that was using DeepAR. ```const TakePhotoWithFilters = dynamic( () => import("@/components/ui/Video/TakePhotoWithFilters"), { ssr: false, } );``` Yours might be similar: order of component loading may be the problem – guest May 14 '23 at 18:51

0 Answers0