Wikitude

Can hear video but cannot see

Hello! 

I need video drawable to appear only after the target image is recognized. So I have moved code that creates video drawable inside of onEnterFieldOfVision. And because I did that Video drawable now plays but is not visible on the screen. I can hear it playing but I cannot see it. If I create video drawable just before creating Trackable2DObject(which makes is start loading as soon as architect world is loaded) then everything works well. I see the video drawable playing on the screen. This is on iPhone 5. Can you advise me what am I doing wrong that my video drawable is not visible on the screen but is actually playing? Below is my code:

 

 

 

var myco_video_loaded = false;

  var myco_video = new AR.VideoDrawable("",0.9,{});

  

  function worldInit()

  {

AR.context.services.sensors = false;

createOverlays();

  }

  

  function createOverlays()

  {

      var tracker = new AR.Tracker("http://www.myco.com/com/data/assets/myassets.wtc", {

       onLoaded: worldLoaded()

     });

 

 

 

 var myco = new AR.Trackable2DObject(tracker, "myco", {

   drawables: {

   cam: myco_video

  },

   onEnterFieldOfVision: function onEnterFieldOfViewFn () {

      loadMyVideoDrawable("<MY VIDEO HERE >");

         },

   onExitFieldOfVision: function onExitFieldOfView() {

 

                       if (myco_video.playing) {

                               myco_video.stop();

                               myco_video.playing = false;

                          }

 

                      }

                   });

  

  

  

 

  

 

 

  }

  

  

  function loadMyVideoDrawable(urlToLoad)

  {

  myco_video = new AR.VideoDrawable(urlToLoad, 0.9, {

                                                 offsetX: 0,

                                                 offsetY: 0,

                                                 onLoaded: function videoLoaded() {

                                                    myco_video_loaded = true;

                                                  },

                                                  onPlaybackStarted: function videoPlaying () {

                                                  myco_video.enabled = true;

                                                  myco_video.playing = true;

                                                 },

                                                 onFinishedPlaying: function videoFinished () {

                                                  myco_video.playing = false;

                                                  myco_video.enabled = false;

                                                  }

                                                }

                                                );

 

 


 if(myco_video_loaded)

{

  myco_video.play(1);

  myco_video.playing = true;

}


 

 

 

  }

  

   

  function worldLoaded() {

 

  }

  

  worldInit();

 

 

 

Hi Sergey,
When I understand your code correctly your described behaviour is expected. I'll explain to you why:
Here is your problem:

 var myco = new AR.Trackable2DObject(tracker, "myco", {

   drawables: {

   cam: myco_video

  },

You add a drawable to the cam drawables that is null to that point in time because you are creating it in the onEnterFieldOfVision trigger. So you can't see it because we can't add a null drawable when you create the Trackable2DObject. What you need to do is to add the myco_video to the cam drawables in the onEnterFieldOfVision trigger. The API for that is described in the ARObject documentation.

 


drawables.addCamDrawable
 

(

 

drawable
 

position

)


 



Adds Drawables to the ARObject in the camera.



Parameters:


drawable Drawable | Drawable


The drawable(s) that should be added to the camera. Can either be a single Drawable, or an Array of Drawables.



position Number optional


The position where the Drawable should be added in the array. If not specified, the Drawable will be added at the end of the array. Must be a whole number.
 

 

I have an ARchitect World attached which demonstrates the usage of the API for this particular use case. You just have to fill in a valid tracker, trackerId and video path.

Hopefully this helps you developing your AR experience.

Best regards

Andreas

Andreas, thank you very much for your response! 

It worked! :)

Thats good to hear!
Have fun continue working with our SDK.

Best regards

Andreas

hello i have the same problem. 

I'm new in developing apps and i want to know what i need to do.

Could do you help me?

this is my code:

var World = {

loaded: false,

 

init: function initFn() {

AR.context.services.sensors = false;

this.createOverlays();

},

 

createOverlays: function createOverlaysFn() {

this.tracker = new AR.Tracker("assets/magazine.wtc", {

onLoaded: this.worldLoaded

});

 

// Create video drawable

var video = new AR.VideoDrawable("assets/padilla6.mp4", 0.40, {

offsetX: -0.3,

});

 

 

var prd6 = new AR.Trackable2DObject(this.tracker, "prd6", {

drawables: {

cam:

},

    onEnterFieldOfVision: function onEnterFieldOfViewFn () {

         video.play(-1);

    },

    onExitFieldOfVision: function onExitFieldOfView () {

            video.resume();

    }

});

},

 

worldLoaded: function worldLoadedFn() {

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;'";

}

};

 

World.init();