How i use the jewellery.zip folder in react

Filters & Effects
1

hi i just want to know the jewellery.zip folder which is located in the jewellery section in the documentation , i downloaded this jewellery folder but i dont know how i use this in the effect section in the react app

2

Hi Rejadaud,

Please share where you download the jewelery.zip, I’ll check the contents and confirm for you how to run it in the react sample.

nik

3

here i downloaded the jewellery.zip folder from banuba documentation please help me how i run this file jewelry.zip effect in react , however i downloaded the only one effect which is ear_decoration.zip which is running in my react app , but i don’t know how to run all these effects (earrings,rings, necklace)which are combine in jewellery.zip folder

here i attached the jewelry.zip folder (its not working)

and ears_decoration (which is currently running in my react app )

Blockquote

4

// App.jsx
import React, { useEffect, useRef, useState } from “react”;
import { BANUBA_CLIENT_TOKEN } from “./BanubaClientToken”;
import { Webcam, Player, Module, Effect, Dom } from “@banuba/webar”;
import wasm from “@banuba/webar/BanubaSDK.wasm”;
import simd from “@banuba/webar/BanubaSDK.simd.wasm”;
import data from “@banuba/webar/BanubaSDK.data”;
import faceTracker from “@banuba/webar/face_tracker.zip”;

import “./App.css”;

function App() {
const ref = useRef({});
const [isEffectVisible, setEffectVisible] = useState(true);

// Toggle the visibility of the effect
const toggleEffectVisibility = () => {
setEffectVisible(!isEffectVisible);
};

// componentDidMount
useEffect(() => {
const webcam = (ref.current.webcam ??= new Webcam());
const promise = (ref.current.player ??= Player.create({
clientToken: BANUBA_CLIENT_TOKEN,
locateFile: {
“BanubaSDK.wasm”: wasm,
“BanubaSDK.simd.wasm”: simd,
“BanubaSDK.data”: data,
},
}).then((player) =>
player.addModule(new Module(faceTracker)).then(() => {
player.use(webcam);

    if (isEffectVisible) {
      player.applyEffect(new Effect("effects/jewellery.zip

"));
}

    Dom.render(player, "#webar");
  })
));

return () => {
  webcam.stop();
  Dom.unmount("#webar");
};

}, [isEffectVisible]);

return (



AR TRY ON


<div id=“webar” className={webar-container ${isEffectVisible ? "visible" : ""}}>

Toggle Effect


);
}

export default App;
here is the code where i want to run the effect jewellery.zip

5

i downloaded jewelry.zip folder from here.

6

Thanks for following up Rajadaud,

Regrettably you are looking at our legacy documentation and a legacy effect. These will not work with our Web SDK (react js or not)

For any new jewelry you’d either need to purchase it from the Banuba Asset Store, or to develop your own using the Banuba Web AR Studio

For Asset Atore effects - contact your assigned Account Manager for assistance, or request via the store and they will contact you directly.

Useful links: How to apply physics to an effect

7

sir , can you please give me some necklace effect as a trail so i would able to purschase them from store or can you help me where can i develop some jewellery effect?

8

Regrettably we do not have any jewelry effects that can be shared publicly at the moment.
The only publicly available demo effects are located here

For now I recommend contacting us via Support for Banuba SDKs | Face AR SDK and Video Editor SDK with more details on what kind of necklace effect you need, and we will see what might be possible.

Also, its best to understand that there are some limitation in regards to how a necklace effect can function, as we do not detect a 3D body with which to collide the necklace.