React Js deepar.initialize() called but DeepAR is currently being initialized

Bugs
1

I’m trying to implement Deep Ar in react js App in every way, but in every way I have this error.
deepar.initialize() called but DeepAR is currently being initialized.
conlose
Deepar version: 5.6.10 deepAR.js:33 DeepAR: Using Offscreen canvas (webgl2 context) for image pipeline. deepAR.js:46 Error: deepar.initialize() called but DeepAR is currently being initialized. at Module.<anonymous> (deepar.js?v=4ea90d0d:7714:20) at Generator.next (<anonymous>) at deepar.js?v=4ea90d0d:7649:40 at new Promise (<anonymous>) at v2 (deepar.js?v=4ea90d0d:7628:12) at Module.K2 (deepar.js?v=4ea90d0d:7712:12) at InitializeDeepAR (deepAR.js:33:29) at initAR (ARPreviewer.jsx:11:32) at ARPreviewer.jsx:18:5 at commitHookEffectListMount (react-dom_client.js?v=4ea90d0d:16915:34) InitializeDeepAR @ deepAR.js:46 await in InitializeDeepAR initAR @ ARPreviewer.jsx:11 (anonymous) @ ARPreviewer.jsx:18 commitHookEffectListMount @ react-dom_client.js?v=4ea90d0d:16915 invokePassiveEffectMountInDEV @ react-dom_client.js?v=4ea90d0d:18324 invokeEffectsInDev @ react-dom_client.js?v=4ea90d0d:19701 commitDoubleInvokeEffectsInDEV @ react-dom_client.js?v=4ea90d0d:19686 flushPassiveEffectsImpl @ react-dom_client.js?v=4ea90d0d:19503 flushPassiveEffects @ react-dom_client.js?v=4ea90d0d:19447 (anonymous) @ react-dom_client.js?v=4ea90d0d:19328 workLoop @ react-dom_client.js?v=4ea90d0d:197 flushWork @ react-dom_client.js?v=4ea90d0d:176 performWorkUntilDeadline @ react-dom_client.js?v=4ea90d0d:384 Show 10 more frames Show lessUnderstand this error deepar.wasm:0xaba1f DeepAR SDK (web) version: v5.6.10 deepar.wasm:0x935c7 WebGL: INVALID_ENUM: renderbufferStorage: invalid internalformat GF @ deepar.js?v=4ea90d0d:5893 $func1923 @ deepar.wasm:0x935c7 $func3451 @ deepar.wasm:0x119a21 $func1956 @ deepar.wasm:0x96e1d $func1965 @ deepar.wasm:0x981c7 $func1963 @ deepar.wasm:0x978f2 $func3460 @ deepar.wasm:0x11b422 $func2296 @ deepar.wasm:0xc17a2 $func2210 @ deepar.wasm:0xbb1c6 $func3792 @ deepar.wasm:0x137b7b $func3210 @ deepar.wasm:0xf999c initialize @ VM7442:15 c.initializeDeepAR @ deepar.js?v=4ea90d0d:358 (anonymous) @ deepar.js?v=4ea90d0d:7770 a3 @ deepar.js?v=4ea90d0d:7631 Promise.then s2 @ deepar.js?v=4ea90d0d:7647 (anonymous) @ deepar.js?v=4ea90d0d:7649 v2 @ deepar.js?v=4ea90d0d:7628 K2 @ deepar.js?v=4ea90d0d:7712 InitializeDeepAR @ deepAR.js:33 initAR @ ARPreviewer.jsx:11 (anonymous) @ ARPreviewer.jsx:18 commitHookEffectListMount @ react-dom_client.js?v=4ea90d0d:16915 commitPassiveMountOnFiber @ react-dom_client.js?v=4ea90d0d:18156 commitPassiveMountEffects_complete @ react-dom_client.js?v=4ea90d0d:18129 commitPassiveMountEffects_begin @ react-dom_client.js?v=4ea90d0d:18119 commitPassiveMountEffects @ react-dom_client.js?v=4ea90d0d:18109 flushPassiveEffectsImpl @ react-dom_client.js?v=4ea90d0d:19490 flushPassiveEffects @ react-dom_client.js?v=4ea90d0d:19447 (anonymous) @ react-dom_client.js?v=4ea90d0d:19328 workLoop @ react-dom_client.js?v=4ea90d0d:197 flushWork @ react-dom_client.js?v=4ea90d0d:176 performWorkUntilDeadline @ react-dom_client.js?v=4ea90d0d:384 Show 19 more frames Show lessUnderstand this warning deepar.wasm:0x119a53 WebGL: INVALID_ENUM: getInternalformatParameter: invalid internalformat uE @ deepar.js?v=4ea90d0d:5585 $func3451 @ deepar.wasm:0x119a53 $func1956 @ deepar.wasm:0x96e1d $func1965 @ deepar.wasm:0x981c7 $func1963 @ deepar.wasm:0x978f2 $func3460 @ deepar.wasm:0x11b422 $func2296 @ deepar.wasm:0xc17a2 $func2210 @ deepar.wasm:0xbb1c6 $func3792 @ deepar.wasm:0x137b7b $func3210 @ deepar.wasm:0xf999c initialize @ VM7442:15 c.initializeDeepAR @ deepar.js?v=4ea90d0d:358 (anonymous) @ deepar.js?v=4ea90d0d:7770 a3 @ deepar.js?v=4ea90d0d:7631 Promise.then s2 @ deepar.js?v=4ea90d0d:7647 (anonymous) @ deepar.js?v=4ea90d0d:7649 v2 @ deepar.js?v=4ea90d0d:7628 K2 @ deepar.js?v=4ea90d0d:7712 InitializeDeepAR @ deepAR.js:33 initAR @ ARPreviewer.jsx:11 (anonymous) @ ARPreviewer.jsx:18 commitHookEffectListMount @ react-dom_client.js?v=4ea90d0d:16915 commitPassiveMountOnFiber @ react-dom_client.js?v=4ea90d0d:18156 commitPassiveMountEffects_complete @ react-dom_client.js?v=4ea90d0d:18129 commitPassiveMountEffects_begin @ react-dom_client.js?v=4ea90d0d:18119 commitPassiveMountEffects @ react-dom_client.js?v=4ea90d0d:18109 flushPassiveEffectsImpl @ react-dom_client.js?v=4ea90d0d:19490 flushPassiveEffects @ react-dom_client.js?v=4ea90d0d:19447 (anonymous) @ react-dom_client.js?v=4ea90d0d:19328 workLoop @ react-dom_client.js?v=4ea90d0d:197 flushWork @ react-dom_client.js?v=4ea90d0d:176 performWorkUntilDeadline @ react-dom_client.js?v=4ea90d0d:384 Show 19 more frames Show lessUnderstand this warning 69bc-197-255-129-114.ngrok-free.app/:1 [.WebGL-000013D4015A6900] GL_INVALID_OPERATION: Texture format does not support mipmap generation.Understand this warning deepar.wasm:0x5e71e Started loading side module xzimgMagicFace. deepar.js?v=4ea90d0d:4735 Side module xzimgMagicFace loaded. deepar.wasm:0xdfe96 ==> Face Tracking mode: XMG_NON_RIGID_FACE_REG2D_3D is activated deepAR.js:44 DeepAR initialized successfully!

My code file deepAR.js

import * as deepar from "deepar";
import effect from "./assets/effects/ray-ban-wayfarer.deepar";

// Log the version. Just in case.
console.log("Deepar version: " + deepar.version);
let deepAR = null;
// Top-level await is not supported.
// So we wrap the whole code in an async function that is called immediatly.
export default (async function InitializeDeepAR(cavasRef) {
  // Get the element you want to place DeepAR into. DeepAR will inherit its width and height from this and fill it.
  // const previewElement = document.getElementById("ar-screen");
  const previewElement = cavasRef.current;

  const effectList = [
    "./assets/effects/ray-ban-wayfarer.deepar",
    "./assets/effects/viking_helmet.deepar",
    "./assets/effects/MakeupLook.deepar",
    "./assets/effects/Split_View_Look.deepar",
    "./assets/effects/flower_face.deepar",
    "./assets/effects/Stallone.deepar",
    "./assets/effects/galaxy_background_web.deepar",
    "./assets/effects/Humanoid.deepar",
    "./assets/effects/Neon_Devil_Horns.deepar",
    "./assets/effects/Ping_Pong.deepar",
    "./assets/effects/Pixel_Hearts.deepar",
    "./assets/effects/Snail.deepar",
    "./assets/effects/Hope.deepar",
    "./assets/effects/Vendetta_Mask.deepar",
    "./assets/effects/Fire_Effect.deepar",
  ];
  if (!deepAR) {
    try {
      deepAR = await deepar.initialize({
        licenseKey:
          "here I put my license",
        previewElement,
        effect: effect,
        additionalOptions: {
          cameraConfig: {
            // facingMode: 'environment'  // uncomment this line to use the rear camera
          },
        },
      });
      console.log("DeepAR initialized successfully!");
    } catch (error) {
      console.error(error);

      return;
    }
  }
  return deepAR;
});

ARPreviewer.jsx

import React, { useEffect, useRef, useState } from "react";
import InitializeDeepAR from "./deepAR";

const ARPreviewer = () => {
  const canvasRef = useRef(null);
  const [deepARInstance, setDeepARInstance] = useState(null);

  useEffect(() => {
    const initAR = async () => {
      if (!deepARInstance) {
        const instance = await InitializeDeepAR(canvasRef);
        if (instance) {
          setDeepARInstance(instance);
        }
      }
    };

    initAR();

    return () => {
      if (deepARInstance) {
        deepARInstance.stopVideo();
        deepARInstance.shutdown();
        setDeepARInstance(null);
      }
    };
  }, [deepARInstance]);

  return <canvas ref={canvasRef} width={640} height={480} />;
};

export default ARPreviewer;

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import ARPreviewer from './ARPreviewer'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ARPreviewer />
  </StrictMode>,
)

Am I doing something wrong? Can someone help me?

2

For those who continue to fear this problem, the solution I found was to remove StrictMode from react itself

import { createRoot } from 'react-dom/client'
import './index.css'
import ARPreviewer from './ARPreviewer'

createRoot(document.getElementById('root')).render(
    <ARPreviewer />
)

StrictMode React Docs
Use StrictMode to enable additional development behaviors and warnings for the component tree inside:
Strict Mode enables the following development-only behaviors:

Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
Your components will be checked for usage of deprecated APIs.
Strictmode docs

1 Like