Start a new topic
Solved

App crash with multiple videos

Hi,

i'm using the iOS Javascript SDK to play 20 videos when you scanned the corresponding image , and my app crashes after track 3-4 images.

How can I prevent memory leaks? destroying the video after each view?

i'm sure I'm doing something wrong.


I would appreciate a small example of how to clean my code:

Thanks in advance!


  

var World = {
loaded: false,
trackableVisible: false,
resourcesLoaded: false,
hasVideoStarted: false,
    
init: function initFn() {
    this.createOverlays();
},
    
createOverlays: function createOverlaysFn() {
    
    this.targetCollectionResource = new AR.TargetCollectionResource("assets/tracker.wtc", {
                                                                    onLoaded: function() {
                                                                    World.resourcesLoaded = true;
                                                                    this.loadingStep;
                                                                    },
                                                                    onError: function(errorMessage) {
                                                                    alert(errorMessage);
                                                                    }
                                                                    });
    
    this.tracker = new AR.ImageTracker(this.targetCollectionResource, {
                                       onTargetsLoaded: this.loadingStep,
                                       onError: function(errorMessage) {
                                       alert(errorMessage);
                                       }
                                       });
    
    
    
    /* VIDEO 1 */
    var fullButtonImg1 = new AR.ImageResource("assets/fullButton.jpg");
    var fullButton1 = new AR.ImageDrawable(fullButtonImg1, 0.2, {
                                           enabled: false,
                                           clicked: false,
                                           zOrder: 3,
                                           onClick: function fullButtonClicked() {
                                           video1.stop();
                                           video1.playing = false;
                                           video1.enabled = false;
                                           fullButton1.clicked = true;
                                           fullButton1.enabled = false;
                                           var url = "assets/video1.mp4";
                                           AR.context.startVideoPlayer(url);
                                           },
                                           translate: {
                                           y: 0.4,
                                           x: 0.76
                                           }
                                           });
    
    var video1 = new AR.VideoDrawable("assets/video1.mp4", 1, {
                                      zOrder: 2,
                                      onLoaded: function videoLoaded() {
                                      fullButton1.enabled = true;
                                      },
                                      onPlaybackStarted: function videoPlaying() {
                                      fullButton1.enabled = true;
                                      video1.enabled = true;
                                      },
                                      onFinishedPlaying: function videoFinished() {
                                      video1.stop();
                                      },
                                      onClick: function videoClicked() {
                                      if (video1.playing) {
                                      video1.stop();
                                      video1.playing = false;
                                      video1.enabled = false;
                                      fullButton1.clicked = true;
                                      fullButton1.enabled = false;
                                      var url = "assets/video1.mp4";
                                      // Start fullscreen playback of video at the supplied URL
                                      AR.context.startVideoPlayer(url);
                                      }
                                      }
                                      });
    
    var video_1 = new AR.ImageTrackable(this.tracker, "pag_09", {
                                        drawables: {
                                        cam: [video1, fullButton1]
                                        },
                                        onImageRecognized: function onImageRecognizedFn() {
                                        if (this.hasVideoStarted) {
                                        video1.resume();
                                        } else {
                                        this.hasVideoStarted = true;
                                        video1.play();
                                        }
                                        World.removeLoadingBar();
                                        fullButton1.enabled = true;
                                        },
                                        onImageLost: function onImageLostFn() {
                                        video1.pause();
                                        },
                                        onError: function(errorMessage) {
                                        alert(errorMessage);
                                        }
                                        });
    
    
    /* VIDEO 2 */
    var fullButtonImg2 = new AR.ImageResource("assets/fullButton.jpg");
    var fullButton2 = new AR.ImageDrawable(fullButtonImg2, 0.2, {
                                           enabled: false,
                                           clicked: false,
                                           zOrder: 3,
                                           onClick: function fullButtonClicked() {
                                           video2.stop();
                                           video2.playing = false;
                                           video2.enabled = false;
                                           fullButton2.clicked = true;
                                           fullButton2.enabled = false;
                                           var url2 = "assets/video2.mp4";
                                           AR.context.startVideoPlayer(url2);
                                           },
                                           translate: {
                                           y: 0.4,
                                           x: 0.76
                                           }
                                           });
    
    var video2 = new AR.VideoDrawable("assets/video2", 1, {
                                      zOrder: 2,
                                      onLoaded: function videoLoaded() {
                                      fullButton2.enabled = true;
                                      },
                                      onPlaybackStarted: function videoPlaying() {
                                      fullButton2.enabled = true;
                                      video2.enabled = true;
                                      },
                                      onFinishedPlaying: function videoFinished() {
                                       video2.stop();
                                      },
                                      onClick: function videoClicked() {
                                      if (video2.playing) {
                                      video2.stop();
                                      video2.playing = false;
                                      video2.enabled = false;
                                      fullButton2.clicked = true;
                                      fullButton2.enabled = false;
                                      var url2 = "assets/video2.mp4";
                                      // Start fullscreen playback of video at the supplied URL
                                      AR.context.startVideoPlayer(url2);
                                      }
                                      }
                                      });
    
    var video_2 = new AR.ImageTrackable(this.tracker, "pag_11", {
                                        drawables: {
                                        cam: [video2, fullButton2]
                                        },
                                        onImageRecognized: function onImageRecognizedFn() {
                                        if (this.hasVideoStarted) {
                                        video2.resume();
                                        } else {
                                        this.hasVideoStarted = true;
                                        video2.play();
                                        }
                                        World.removeLoadingBar();
                                        fullButton2.enabled = true;
                                        },
                                        onImageLost: function onImageLostFn() {
                                        video2.pause();
                                        },
                                        onError: function(errorMessage) {
                                        alert(errorMessage);
                                        }
                                        });
    
    /* 18 VIDEOS MORE ...... */
 

  



Hi Daniel,


What you need to do is call the destroy method in order to make sure that you are not loading all the 20 videos. You can find more information regarding this method here.


You need to keep a reference to any created video drawable as e.g. member of the World object and then call destroy on the video object that is currently stored in the World object.


You can also have a look at this forum post describing a similar issue.


Thanks

Eva

I change the code like the example reference that you provided me, but I can't get it work.

Could you give me a small example/snippet how to get this work with my code? Or even a easier one.

Thanks a lot

Hi Daniel,



did I understand correctly, that the app is able to load the video drawables, but crashes later when you are actually recognising your targets? If so, does it crash when recognising the same image multiple times, or only when recognising different images?


What I'd like you to try is call stop rather than pause in onImageLost and check whether that makes any difference.



- Daniel

Login or Signup to post a comment