I am using A-Frame. I am trying to augment a Video (mp4) when the pattern or marker (HIRO) is hovered in front of my webcam, the video should be loaded or played on the marker. Now The issue with this code is when the page gets loaded the video gets played automatically without any marker or pattern (HIRO). The video is displayed on the marker.
I just want to load the video whenever the pattern or marker is shown. Without patter, it should not load. Please help me with this Eg: Video playBack in AR ;vl=en Video Augmentation on Marker
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
<script src=".8.0/aframe.min.js"></script>
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<!-- include for artoolkit trackingBackend -->
<script src='aframe_lib/artoolkit.min.js'></script>
<script src='aframe_lib/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='aframe_lib/svd.js'></script>
<script src='aframe_lib/posit1.js'></script>
<script src='aframe_lib/cv.js'></script>
<script src='aframe_lib/aruco.js'></script>
<script src='aframe_lib/threex-arucocontext.js'></script>
<script src='aframe_lib/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='aframe_lib/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='aframe_lib/signals.min.js'></script>
<script src='aframe_lib/threex-artoolkitprofile.js'></script>
<script src='aframe_lib/threex-artoolkitsource.js'></script>
<script src='aframe_lib/threex-artoolkitcontext.js'></script>
<script src='aframe_lib/threex-arbasecontrols.js'></script>
<script src='aframe_lib/threex-armarkercontrols.js'></script>
<script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
<script src='aframe_lib/threex-hittesting-plane.js'></script>
<script src='aframe_lib/threex-hittesting-tango.js'></script>
<script src='aframe_lib/threex-armarkerhelper.js'></script>
<script src='aframe_lib/arjs-utils.js'></script>
<script src='aframe_lib/arjs-session.js'></script>
<script src='aframe_lib/arjs-anchor.js'></script>
<script src='aframe_lib/arjs-hittesting.js'></script>
<script src='aframe_lib/arjs-tangovideomesh.js'></script>
<script src='aframe_lib/arjs-tangopointcloud.js'></script>
<script src='aframe_lib/arjs-debugui.js'></script>
<script src='aframe_lib/threex-armultimarkerutils.js'></script>
<script src='aframe_lib/threex-armultimarkercontrols.js'></script>
<script src='aframe_lib/threex-armultimarkerlearning.js'></script>
<!-- include aframe-ar.js -->
<script src="aframe_lib/system-arjs.js"></script>
<script src="aframe_lib/ponent-anchor.js"></script>
<script src="aframe_lib/ponent-hit-testing.js"></script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-entity>
<video type="video/mp4" id="penguin-sledding" autoplay="true" loop="false" src="resources/video.mp4" webkit-playsinline>
</a-entity>
<a-video position="0 0.2 0" src="#penguin-sledding" rotation="90 180 0"></a-video>
</a-anchor>
<a-camera-static preset='hiro'/>
<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible="">
</a-entity>
</a-scene>
</body>I am using A-Frame. I am trying to augment a Video (mp4) when the pattern or marker (HIRO) is hovered in front of my webcam, the video should be loaded or played on the marker. Now The issue with this code is when the page gets loaded the video gets played automatically without any marker or pattern (HIRO). The video is displayed on the marker.
I just want to load the video whenever the pattern or marker is shown. Without patter, it should not load. Please help me with this Eg: Video playBack in AR https://www.youtube./watch?v=jkcvfygpKiM&vl=en Video Augmentation on Marker
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<!-- include for artoolkit trackingBackend -->
<script src='aframe_lib/artoolkit.min.js'></script>
<script src='aframe_lib/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='aframe_lib/svd.js'></script>
<script src='aframe_lib/posit1.js'></script>
<script src='aframe_lib/cv.js'></script>
<script src='aframe_lib/aruco.js'></script>
<script src='aframe_lib/threex-arucocontext.js'></script>
<script src='aframe_lib/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='aframe_lib/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='aframe_lib/signals.min.js'></script>
<script src='aframe_lib/threex-artoolkitprofile.js'></script>
<script src='aframe_lib/threex-artoolkitsource.js'></script>
<script src='aframe_lib/threex-artoolkitcontext.js'></script>
<script src='aframe_lib/threex-arbasecontrols.js'></script>
<script src='aframe_lib/threex-armarkercontrols.js'></script>
<script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
<script src='aframe_lib/threex-hittesting-plane.js'></script>
<script src='aframe_lib/threex-hittesting-tango.js'></script>
<script src='aframe_lib/threex-armarkerhelper.js'></script>
<script src='aframe_lib/arjs-utils.js'></script>
<script src='aframe_lib/arjs-session.js'></script>
<script src='aframe_lib/arjs-anchor.js'></script>
<script src='aframe_lib/arjs-hittesting.js'></script>
<script src='aframe_lib/arjs-tangovideomesh.js'></script>
<script src='aframe_lib/arjs-tangopointcloud.js'></script>
<script src='aframe_lib/arjs-debugui.js'></script>
<script src='aframe_lib/threex-armultimarkerutils.js'></script>
<script src='aframe_lib/threex-armultimarkercontrols.js'></script>
<script src='aframe_lib/threex-armultimarkerlearning.js'></script>
<!-- include aframe-ar.js -->
<script src="aframe_lib/system-arjs.js"></script>
<script src="aframe_lib/ponent-anchor.js"></script>
<script src="aframe_lib/ponent-hit-testing.js"></script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-entity>
<video type="video/mp4" id="penguin-sledding" autoplay="true" loop="false" src="resources/video.mp4" webkit-playsinline>
</a-entity>
<a-video position="0 0.2 0" src="#penguin-sledding" rotation="90 180 0"></a-video>
</a-anchor>
<a-camera-static preset='hiro'/>
<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible="">
</a-entity>
</a-scene>
</body>- 1 Possible duplicate of How to detect when marker is found in AR.js – Piotr Adam Milewski Commented Jul 16, 2018 at 15:11
- 1 No, Actually the issue is while augmenting video, I am not able to play the video on marker – Aryan Commented Jul 18, 2018 at 13:00
1 Answer
Reset to default 2Its playing when its loaded because of the autoplay attribute. Also you should throw the video to the assets.
To play the video when the marker is visible , make sure you have the video inside a
<a-marker> node like here.
<a-marker>
<a-video vidhandler></a-video>
</a-marker>
When you see the marker - play the video.
Once you lose the marker - pause the video
AFRAME.registerComponent('vidhandler', {
init: function () {
this.toggle = false;
document.querySelector("#vid").pause(); //reference to the video
},
tick:function(){
if(document.querySelector("a-marker").object3D.visible == true){
if(!this.toggle){
this.toggle = true;
document.querySelector("#vid").play();
}
}else{
this.toggle = false;
document.querySelector("#vid").pause();
}
}
});