Error in the tutorial Project

CoderSilas commented 3 days ago

Hello i tested the tutorial project and after the step of activating the webcam to track something i got this error: AR.Tracker.Image is not a function.

HTML code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>encantar.js WebAR demo</title>
        <script src="encantar.js"></script>
        <script src="ar-demo.js"></script>
        <style>body { background-color: #3d5afe; }</style>
    </head>
    <body>
        <div id="ar-viewport"></div>
        <img id="my-reference-image" src="Vorderseite_Bild.png" hidden>
    </body>
</html>

ar-demo.js code:

window.onload = async function()
{
    try {
            const session = await startARSession(); 

            function animate(time, frame)
            {
                session.requestAnimationFrame(animate);
            }

            session.requestAnimationFrame(animate);
        }
        catch(error) {
            alert(error.message);
        }

    };

    async function startARSession()
    {
        if(!AR.isSupported()) {
            throw new Error(
                'This device is not compatible with this AR experience.\n\n' +
                'User agent: ' + navigator.userAgent
            );
        }

        const tracker = AR.Tracker.Image();
        await tracker.database.add([{
            name: 'my-reference-image',
            image: document.getElementById('my-reference-image')
        }]);

        const viewport = AR.Viewport({
            container: document.getElementById('ar-viewport')
        });

        //const video = document.getElementById('my-video'); // comment this line
        //const source = AR.Source.Video(video); // comment this line
        const source = AR.Source.Camera();

        const session = await AR.startSession({
            mode: 'immersive',
            viewport: viewport,
            trackers: [ tracker ],
            sources: [ source ],
            stats: true,
            gizmos: true,
        });

        return session;
    }

CoderSilas commented 3 days ago

Ah i fixed it, its not const tracker = AR.Tracker.Image(); its const tracker = AR.Tracker.ImageTracker().

Its a misspell in the tutorial.

alemart commented 3 days ago

Whoooops, I just changed that! AR.Tracker.Image() is valid from version 0.4.0 onwards.

I've temporarily reverted the tutorial. Thanks for reporting!

CoderSilas commented 3 days ago

Oh? Version 0.4? What will be improved?

Also saying how cool this project is and how its the only one that free and working!

alemart commented 3 days ago

Thanks!

So far the tracking has been improved, transforms can be decomposed, there is support for Quaternions and for Raycasting, it includes a new Pointer Tracker that lets you capture touch/mouse/pen input with an easy-to-use API, and there are some more things. I expect to release the new version in the coming days.

alemart / encantar-js

Error in the tutorial Project #10