Wikitude

AR help with javascript

If you suspect any js errors you should include the ade.js that comes with the SDK. It allows to test an AR experience inside the desktop browser and debugging with the built in developer tools.

Additionally on device debugging is possible on iOS and Android (4.4+), please have a look inside the SDK documentation on how to set it up.

Hi all,

I am currently busy with an Augmented Reality for my exams using javascript. But i got stuck on a certain point, and can't figure it out. So i was wondering if someone could help me out. The mission is to scan a picture which has to display a video then. After doing some research i ended up with this code structure:

var World = {
    loaded: false,
    rotating: false,

    init: function initFn() {
        /* Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.*/
        AR.context.services.sensors = false;
        this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {
        // Initialize Tracker
        var tracker = new AR.Tracker("res/screen/Target.wtc", {
            onLoaded: this.loadingStep
        });
        
        var video = new AR.VideoDrawable("res/screen/thaepicbattle3.mp4", {
            offsetX: 0.2,
            offsetY: 0.2,
                
                onLoaded: this.loadingStep,
                onLoaded: function videoLoaded() {
                playButton.enabled = true;
            },


            onPlaybackstarted: function videoPlaying () {
                playButton.enabled = false;
                video.enabled = true;
            },


            onFinishedPlaying: function videoFinished () {
                playButton.enabled = true;
                video.playing = false;
                video.enabled = true;
            },


            onClick: function videoClicked () {
                if (video.playing) {
                    video.pause ();
                    video.playing = false;
                    playButton.enabled = true;
                } else {
                    video.resume();
                    video.playing = true;
                    playButton.enabled = true;
                }
            },
        });

    var playButtonImg = new AR.ImageResource("img/playbutton.png");
    var playButton = new AR.ImageDraweble(playbuttonImg, 0.2, {
            enabled: false,
            onClick: function playButtonClicked() {
                video.play(1);
                video.playing = true;
            },


            OffsetX: video.offsetX,
            offsetY: video.offsetY
               
        });

        var trackable = new AR.Trackable2DObject(this.tracker, "3D-Wallpaper-HD", {
            drawables: {
                cam:
            },
            
            onClick: function() {
                World.video.start(-1);
            },


                onEnterFieldOfVision: function onEnterFieldOfViewFn () {
                    if (video.playing) {
                        video.pause ();
                    }
                },


                onExitFieldofVision: function onExitFieldofVieuw () {
                    if (video.playing) {
                        video.resume ();
                    }
    }

           
        });

    },


    loadingStep: function loadingStepFn() {
        if (!World.loaded && World.tracker.isLoaded() && World.video.isLoaded()) {
            World.loaded = true;
            var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
            var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
            document.getElementById('loadingMessage').innerHTML =
                "<div" + cssDivLeft + "></div>" +
                "<div" + cssDivRight + "></div>";
        }
    }
};

World.init();

Dreamweaver doesn't show any erros, but when i launch it on my phone, the app get's stuck on "loading screen...."

I would really appreciate if some could help me out.

 

Kind regards,

M.Ozcetin