Video is not rendered when tried to implement "examples/arNFT_video_example.html" #334

subramani01 · 2024-12-16T12:24:54Z

I downloaded the project zip file and running the examples from there, its working, but when i tried to implement the example on my own its not working.
Can anyone help to render/display the video when the target image is shown to the camera feed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARnft example showing a video</title>
    <link rel="stylesheet" href="css/nft-style.css" />
</head>
<body>
    <a
        href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
        class="ui marker"
        target="_blank"
    >
        🖼 Marker Image
    </a>
    <video loop autoplay muted webkit-playsinline playsinline crossorigin="anonymous" id="arvideo">
        <source src="https://avo-content-dev.s3.amazonaws.com/videos/bg_1588085276090.mp4" type="video/mp4" />
    </video>
    <script type="importmap">
        {
            "imports": {
                "three": "/js/third_party/three.js/three.module.min.js",
                "arnft-threejs": "/js/ARnftThreejs.module.js",
                "arnft": "/dist/ARnft.module.js"
            }
        }
    </script>
    <script type="module">
        import * as THREE from "three";
        import arnft from "arnft";
        import ARnftThreejs from "arnft-threejs";
        
        const { ARnft } = arnft;
        const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

        let width = 640;
        let height = 480;
        ARnft.init(width, height, [["src/DataNFT/pinball"]], ["pinball"], "config.json", true).then((nft) => {
            console.log('ARnft initialized:', nft);
            let mat = new THREE.MeshLambertMaterial({
                        color: 0xff0000,
            });
            let boxGeom = new THREE.BoxGeometry(1, 1, 1);
            let cube = new THREE.Mesh(boxGeom, mat);
            cube.position.z = 90;
            cube.scale.set(180, 180, 180);
            document.addEventListener("containerEvent", (ev) => {
                console.log("Container event received:", ev);
                let canvas = document.getElementById("canvas");
                let fov = (0.8 * 180) / Math.PI;
                let ratio = width / height;
                let config = {
                    renderer:{
                        alpha: true,
                        antialias: true,
                        context: null,
                        precision: "mediump",
                        premultipliedAlpha: true,
                        stencil: true,
                        depth: true,
                        logarithmicDepthBuffer: true,
                    },
                    camera: {
                        fov:fov,
                        ratio:ratio,
                        near:0.01,
                        far:1000,
                    }
                }

                let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
                sceneThreejs.initRenderer();
                console.log("SceneRendererTJS initialized");

                let nftAddTJS = new NFTaddTJS(nft.uuid);
                // Set width, height and width and height number of segments of the PlaneGeometry.
                let imgConfig = {w:1, h:1, ws:1, hs:1 }
                nftAddTJS.addVideo("arvideo","pinball", 180, imgConfig, false)
                // console.log("Video added to NFT:", nftAddTJS);

                const tick = () => {
                    sceneThreejs.draw();
                    window.requestAnimationFrame(tick);
                }
                tick();
            })
        }).catch((error) => {
            console.log("Error initializing ARnft:", error);
        });
    </script>
</body>
</html>

kalwalt · 2024-12-16T13:41:45Z

I downloaded the project zip file and running the examples from there, its working, but when i tried to implement the example on my own its now working. Can anyone help to render/display the video when the target image is shown to the camera feed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARnft example showing a video</title>
    <link rel="stylesheet" href="css/nft-style.css" />
</head>
<body>
    <a
        href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
        class="ui marker"
        target="_blank"
    >
        🖼 Marker Image
    </a>
    <video loop autoplay muted webkit-playsinline playsinline crossorigin="anonymous" id="arvideo">
        <source src="https://avo-content-dev.s3.amazonaws.com/videos/bg_1588085276090.mp4" type="video/mp4" />
    </video>
    <script type="importmap">
        {
            "imports": {
                "three": "/js/third_party/three.js/three.module.min.js",
                "arnft-threejs": "/js/ARnftThreejs.module.js",
                "arnft": "/dist/ARnft.module.js"
            }
        }
    </script>
    <script type="module">
        import * as THREE from "three";
        import arnft from "arnft";
        import ARnftThreejs from "arnft-threejs";
        
        const { ARnft } = arnft;
        const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

        let width = 640;
        let height = 480;
        ARnft.init(width, height, [["src/DataNFT/pinball"]], ["pinball"], "config.json", true).then((nft) => {
            console.log('ARnft initialized:', nft);
            let mat = new THREE.MeshLambertMaterial({
                        color: 0xff0000,
            });
            let boxGeom = new THREE.BoxGeometry(1, 1, 1);
            let cube = new THREE.Mesh(boxGeom, mat);
            cube.position.z = 90;
            cube.scale.set(180, 180, 180);
            document.addEventListener("containerEvent", (ev) => {
                console.log("Container event received:", ev);
                let canvas = document.getElementById("canvas");
                let fov = (0.8 * 180) / Math.PI;
                let ratio = width / height;
                let config = {
                    renderer:{
                        alpha: true,
                        antialias: true,
                        context: null,
                        precision: "mediump",
                        premultipliedAlpha: true,
                        stencil: true,
                        depth: true,
                        logarithmicDepthBuffer: true,
                    },
                    camera: {
                        fov:fov,
                        ratio:ratio,
                        near:0.01,
                        far:1000,
                    }
                }

                let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
                sceneThreejs.initRenderer();
                console.log("SceneRendererTJS initialized");

                let nftAddTJS = new NFTaddTJS(nft.uuid);
                // Set width, height and width and height number of segments of the PlaneGeometry.
                let imgConfig = {w:1, h:1, ws:1, hs:1 }
                nftAddTJS.addVideo("arvideo","pinball", 180, imgConfig, false)
                // console.log("Video added to NFT:", nftAddTJS);

                const tick = () => {
                    sceneThreejs.draw();
                    window.requestAnimationFrame(tick);
                }
                tick();
            })
        }).catch((error) => {
            console.log("Error initializing ARnft:", error);
        });
    </script>
</body>
</html>

Hi @subramani01 thanks to report this. Please add more infos: Are you running in localhost the repository? Which OS and Browser are you using? What do you see when the marker is tracked?

subramani01 · 2024-12-16T17:16:29Z

@kalwalt Thanks for the quick reply.

Yes im running in the localhost, and shared the url to the mobile using ngrok.
OS - Ios.
Browser - Safari & Chrome (Checked on both)
I see nothing when the marker is tracked.

I wanted this to work badly cause i saw the demo, its works perfect, the rendered video is not jittering when the target image is detected as compared to all the open source packages i tried so far in the past few days.

Can you help me with this issue.

kalwalt · 2024-12-16T17:46:14Z

Ok so you are using ngrock that is a bit different i think than running simply a python or node server on your local machine. I have no experience with ngrock, but try to debug if possible and check if if the video stream is interrupted for some reason or maybe a proxy? i don't know.... It's hard to me to help in this sense with so few infos with your set up.

kalwalt · 2024-12-16T18:01:49Z

Have you a link of your app to share?

subramani01 · 2024-12-17T04:46:24Z

Can i share the app link that is running on ngrok, you take a look and let me know

subramani01 · 2024-12-17T05:56:10Z

        import * as THREE from "three";
        import arnft from "arnft";
        import ARnftThreejs from "arnft-threejs";
        
        const { ARnft } = arnft;
        const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

        let width = 640;
        let height = 480;
        ARnft.init(width, height, [["src/DataNFT/pinball"]], ["pinball"], "config.json", true).then((nft) => {
            console.log('ARnft initialized:', nft);
            document.addEventListener("containerEvent", (ev) => {
                console.log("Container event received:", ev);
                let canvas = document.getElementById("canvas");
                let fov = (0.8 * 180) / Math.PI;
                let ratio = width / height;
                let config = {
                    renderer:{
                        alpha: true,
                        antialias: true,
                        context: null,
                        precision: "mediump",
                        premultipliedAlpha: true,
                        stencil: true,
                        depth: true,
                        logarithmicDepthBuffer: true,
                    },
                    camera: {
                        fov:fov,
                        ratio:ratio,
                        near:0.01,
                        far:1000,
                    }
                }

                let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
                sceneThreejs.initRenderer();
                console.log("SceneRendererTJS initialized");

                let nftAddTJS = new NFTaddTJS(nft.uuid);
                // Set width, height and width and height number of segments of the PlaneGeometry.
                let imgConfig = {w:1, h:1, ws:1, hs:1 }
                nftAddTJS.addVideo("arvideo","pinball", 180, imgConfig, false)
                // console.log("Video added to NFT:", nftAddTJS);

                const tick = () => {
                    sceneThreejs.draw();
                    window.requestAnimationFrame(tick);
                }
                tick();
            })

            window.addEventListener("nftTrackingLost-" + nft.uuid + "-" + "pinball", function (ev) {
                console.log("lost marker");
            });

            window.addEventListener("getMatrixGL_RH-" + nft.uuid + "-" + "pinball", function (ev) {
                console.log("getMatrixGL_RH",ev);
            });
        }).catch((error) => {
            console.log("Error initializing ARnft:", error);
        });

I tried to add eventlisteners to my implementation of the example, its not working, but when i use these two events on your extracted project file its working. let me share two screenshots of console.log, one is from my implementation, other yours.

My implementation console.log:

Your implementation console.log:

kalwalt · 2024-12-17T19:23:46Z

Can i share the app link that is running on ngrok, you take a look and let me know

yes if possible share it please.

subramani01 · 2024-12-19T06:03:00Z

I made it work, what i did is instead of adding a new file and trying to implement the example on top of the downloaded source code. i made a new project and used the only files that are necessary to run the example.

kalwalt added the question Further information is requested label Dec 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Video is not rendered when tried to implement "examples/arNFT_video_example.html" #334

Video is not rendered when tried to implement "examples/arNFT_video_example.html" #334

subramani01 commented Dec 16, 2024 •

edited

Loading

kalwalt commented Dec 16, 2024

subramani01 commented Dec 16, 2024 •

edited

Loading

kalwalt commented Dec 16, 2024

kalwalt commented Dec 16, 2024

subramani01 commented Dec 17, 2024

subramani01 commented Dec 17, 2024 •

edited

Loading

kalwalt commented Dec 17, 2024

subramani01 commented Dec 19, 2024

Video is not rendered when tried to implement "examples/arNFT_video_example.html" #334

Video is not rendered when tried to implement "examples/arNFT_video_example.html" #334

Comments

subramani01 commented Dec 16, 2024 • edited Loading

kalwalt commented Dec 16, 2024

subramani01 commented Dec 16, 2024 • edited Loading

kalwalt commented Dec 16, 2024

kalwalt commented Dec 16, 2024

subramani01 commented Dec 17, 2024

subramani01 commented Dec 17, 2024 • edited Loading

kalwalt commented Dec 17, 2024

subramani01 commented Dec 19, 2024

subramani01 commented Dec 16, 2024 •

edited

Loading

subramani01 commented Dec 16, 2024 •

edited

Loading

subramani01 commented Dec 17, 2024 •

edited

Loading