Wikitude
How can we help you today?
Multiple Video Error
8 CommentsSorted by Oldest First
Hi...
I try to make mulitle video with multiple marker.
But seem it error. It start very slow, and then stop.
The screen is freeze.
var World = {
loaded: false,
init: function initFn() {
this.createOverlays();
},
createOverlays: function createOverlaysFn() {
// Initialize ClientTracker
this.tracker = new AR.ClientTracker("assets/luar.wtc", {
onLoaded: this.worldLoaded
});
var imgAnak001 = new AR.ImageResource("assets/nama/t-anak1-001.png");
var overlay001 = new AR.ImageDrawable(imgAnak001, 1, {
offsetX: 0,
offsetY: 0
});
var videoTAnak1 = new AR.VideoDrawable("assets/template/tps-anak1.mp4", 3.1, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTAnak2 = new AR.VideoDrawable("assets/template/tps-anak2.mp4", 2, {
offsetX: 0,
offsetY: -0.3,
zOrder:1,
isTransparent: true
});
var videoTBayi1 = new AR.VideoDrawable("assets/template/tps-bayi1.mp4", 1.8, {
offsetX: 0.1,
offsetY: 0.1,
zOrder:1,
isTransparent: true
});
var videoTBayi2 = new AR.VideoDrawable("assets/template/tps-bayi2.mp4", 1.8, {
offsetX: 0.1,
offsetY: 0.1,
zOrder:1,
isTransparent: true
});
var videoTFamily1 = new AR.VideoDrawable("assets/template/tps-family1.mp4", 2.3, {
offsetX: 0.3,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTFamily2 = new AR.VideoDrawable("assets/template/tps-family2.mp4", 2, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTRemaja1 = new AR.VideoDrawable("assets/template/tps-remaja1.mp4", 2, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTRemaja2 = new AR.VideoDrawable("assets/template/tps-remaja2.mp4", 2, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTWedding1 = new AR.VideoDrawable("assets/template/tps-wedding1.mp4", 2, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTWedding2 = new AR.VideoDrawable("assets/template/tps-wedding2.mp4", 2, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var videoTWisuda1 = new AR.VideoDrawable("assets/template/tps-wisuda1.mp4", 2, {
offsetX: 0,
offsetY: 0,
zOrder:1,
isTransparent: true
});
var video001 = new AR.VideoDrawable("assets/video/anak1-001.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video002 = new AR.VideoDrawable("assets/video/anak2-002.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video003 = new AR.VideoDrawable("assets/video/bayi1-003.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video004 = new AR.VideoDrawable("assets/video/bayi2-004mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video005 = new AR.VideoDrawable("assets/video/family1-005.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video006 = new AR.VideoDrawable("assets/video/family2-006.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video007 = new AR.VideoDrawable("assets/video/remaja1-007.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video008 = new AR.VideoDrawable("assets/video/remaja2-008.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video009 = new AR.VideoDrawable("assets/video/wedding1-009.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video010 = new AR.VideoDrawable("assets/video/wedding2-010.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var video011 = new AR.VideoDrawable("assets/video/wisuda1-011.mp4", 1, {
offsetX: 0,
offsetY: 0,
});
var page001 = new AR.Trackable2DObject(this.tracker, "anak1-001", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTAnak1.play(-1), video001.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTAnak1.pause(), video001.pause();
}
});
var page002 = new AR.Trackable2DObject(this.tracker, "anak2-002", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTAnak2.play(-1), video002.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTAnak2.pause(), video002.pause();
}
});
var page003 = new AR.Trackable2DObject(this.tracker, "bayi1-003", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTBayi1.play(-1), video003.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTBayi1.pause(), video003.pause();
}
});
var page004 = new AR.Trackable2DObject(this.tracker, "bayi2-004", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTBayi2.play(-1), video004.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTBayi2.pause(), video004.pause();
}
});
var page005 = new AR.Trackable2DObject(this.tracker, "family1-005", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTFamily1.play(-1), video005.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTFamily1.pause(), video005.pause();
}
});
var page006 = new AR.Trackable2DObject(this.tracker, "family2-006", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTFamily2.play(-1), video006.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTFamily2.pause(), video006.pause();
}
});
var page007 = new AR.Trackable2DObject(this.tracker, "remaja1-007", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTRemaja1.play(-1), video007.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTRemaja1.pause(), video007.pause();
}
});
var page008 = new AR.Trackable2DObject(this.tracker, "remaja2-008", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTRemaja2.play(-1), video008.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTRemaja2.pause(), video008.pause();
}
});
var page009 = new AR.Trackable2DObject(this.tracker, "wedding1-009", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTWedding1.play(-1), video009.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTWedding1.pause(), video009.pause();
}
});
var page010 = new AR.Trackable2DObject(this.tracker, "wedding2-010", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTWedding2.play(-1), video009.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTWedding2.pause(), video009.pause();
}
});
var page011 = new AR.Trackable2DObject(this.tracker, "wisuda1-011", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
videoTWisuda1.play(-1), video009.play(-1);
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
videoTWisuda1.pause(), video009.pause();
}
});
},
worldLoaded: function worldLoadedFn() {
var cssDivInstructions = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
var cssDivSurfer = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";
var cssDivBiker = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px;'";
document.getElementById('loadingMessage').innerHTML =
"<div" + cssDivInstructions + ">Scan Target ";
// Remove Scan target message after 10 sec.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 10000);
}
};
World.init();
Hi,
Please check your the implemenation of the sample attached here - this loads the videos dynamically and should help in improving your experience.
Greetings
Nicola
var World = {
targetName2Augmentations :
{
"sample01" : ,
"sample02" : ,
"sample03" : ,
"sample04" : ,
"sample05" : ,
"sample06" : ,
"sample07" : ,
"sample08" : ,
"sample09" :
},
init: function() {
this.tracker = new AR.ClientTracker("assets/luar.wtc", {
onLoaded: function() {
console.info("tracker loaded");
}
});
this.lastCamDrawables = ;
this.trackable = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {
cam:
},
onEnterFieldOfVision: function (targetName) {
if (this.lastTargetName!==targetName) {
this.lastTargetName=targetName;
// destroy old augmentations
for (var i=World.trackable.drawables.cam.length-1; i>=0; i--) {
World.trackable.drawables.cam.enabled = false;
World.trackable.drawables.cam.destroy();
World.trackable.drawables.removeCamDrawable(i);
}
// create new augmentations
var augmentationsToCreate = World.targetName2Augmentations;
for (var i=0; i<augmentationsToCreate.length; i++) {
var drawableCreated;
switch(augmentationsToCreate.type) {
case "video":
drawableCreated = new AR.VideoDrawable(augmentationsToCreate.uri, augmentationsToCreate.scale,
{
offsetX: augmentationsToCreate.offsetX,
offsetY: augmentationsToCreate.offsetY
isTransparent: augmentationsToCreate.isTransparent
});
if (augmentationsToCreate.autoplay) {
drawableCreated.play(-1);
}
break;
default:
break;
}
if (drawableCreated) {
World.trackable.drawables.addCamDrawable(drawableCreated);
}
}
} else {
for (var i=World.trackable.drawables.cam.length-1; i>=0; i--) {
World.trackable.drawables.cam.enabled = true;
if (World.trackable.drawables.cam.resume) {
World.trackable.drawables.cam.resume();
}
}
}
},
onExitFieldOfVision: function onExitFieldOfVisionFn() {
for (var i=World.trackable.drawables.cam.length-1; i>=0; i--) {
World.trackable.drawables.cam.enabled = false;
if (World.trackable.drawables.cam.pause) {
World.trackable.drawables.cam.pause();
}
}
}
});
}
};
World.init();
Hello. Can you please clarify your issue?
Hi Eva..
The sample dynamic video.js from Nicola is for video.
But how if want to implement for transparant video?
I try to put isTranparant : true in the js, but it doesn't work.
Actually I want to put 2 video (combine with video transparan) in every target.
thanks
Hi. Did you check the syntax of your code because it looks like there is a comma measing here:
offsetY: augmentationsToCreate.offsetY,
isTransparent: augmentationsToCreate.isTransparent
It solved now. Thank you Eva.
If I want to put snap screen button, how to do it?
can you give me a clue...
thanks
Hello Budi,
You can refer to the documentation here to see how you can snap the video onto the screen.
© 2021 Wikitude, a Qualcomm company
kurniawan chandra