Load NFT doesn't work / can't open the camera.

[muntasirhossain1]

import { useEffect, useState } from "react";
import "./ARScene.css";
import { ASSETS_BASE_URL } from "../../constants";
import {
useFetchNFTListQuery,
useUpdateScanCountMutation,
} from "@/services/generate-nft/generate-nft.service";
import { NftItem } from "@/services/generate-nft/types";
import ARnft from "@webarkit/ar-nft";

const ARnftScene = () => {
const { data } = useFetchNFTListQuery();
const [updateScanCount] = useUpdateScanCountMutation();
const [nftList, setNftList] = useState<NftItem[]>([]);

useEffect(() => {
if (data) {
setNftList(data.data);
console.log(nftList);
}
}, [data, nftList]);

useEffect(() => {
if (nftList.length > 0) {
// nftList.map((nftItem) => {
// console.log(
// ${ASSETS_BASE_URL}/${nftItem.nft_file_path.replace(/\\/g, "/")}/nft
// );
// });
const width = 640;
const height = 480;
ARnft.ARnft.init(
width,
height,
[
nftList.map(
(nft) =>
${ASSETS_BASE_URL}/${nft.nft_file_path.replace(/\\/g, "/")}/nft
),
],
[], // Since you don't need tracker IDs, this can be an empty array
"config.json",
true
)
.then((nft) => {
// Start a polling loop to check for found markers
const checkMarkerFound = () => {
// Example: Assuming controller has a method or property to check the current marker
console.log("Controller", nft);
// const currentMarkerId = controller.getCurrentMarkerId?.();
// if (currentMarkerId) {
// const foundNft = nftList.find(
// (nft) => nft.tracker_id === currentMarkerId
// );
// if (foundNft) {
// window.location.href = /nft-scan-details?order_id=${foundNft.order_id};
// // Optionally, call updateScanCount mutation here
// }
// }
};

      const intervalId = setInterval(checkMarkerFound, 1000); // Check every second

      return () => clearInterval(intervalId); // Cleanup on component unmount
    })
    .catch((error) => {
      console.error("ARnft initialization failed:", error);
    });
}

}, [nftList, updateScanCount]);

return

{/* Your AR scene container here */}

;
};

export default ARnftScene;

I have multiple nft. i want make this dynamic(Load nft).
can anyone please guide me how to do that.
my main feature will be load multiple nft dynamically and once marker found it will redirect to new URL with a id

[neiltron]

This looks like it could be a dev server issue. the Uncaught (in promise) [...] is not valid JSON message implies that a JSON file is being served as html (probably a 404) instead of proper JSON.

[muntasirhossain1]

but this error appear when i init

[neiltron]

I might be wrong but it looks like it's trying to load config.json when you call init. That is, if you call init and the browser can't find config.json, then it might throw that error.

[muntasirhossain1]

Can you please help me to provide a example/instruction of
how to load multiple nft using react typescript.