Any ZAPPAR + A-FRAME + VIDEO/CHROMA VIDEO EXAMPLES?

Universal AR A-Frame
#1

Hi,

There’s any example with zappar+a-frame with videos? If it’s possible with multitracking images.

Thanks

#2

I’m working with this code but it’s not working…

<script>
			window.onload = function() {
				AFRAME.registerComponent('videohandler', {
					init: function () {
						var marker = this.el;

						this.vid = document.querySelector("#vid1");

						marker.addEventListener('markerFound', function () {
							
							this.vid.play();
						}.bind(this));

				marker.addEventListener('markerLost', function() {
					this.vid.pause();
					this.vid.currentTime = 0;
				}.bind(this));
					}
				});
</script>
<a-scene>
			<a-assets>
				<a-asset-item id="target-file" src="myTarget.zpt"/>
				<a-asset-item id="target-file2" src="myTarget.zpt"/>
				<a-asset-item id="target-file3" src="myTarget.zpt"/>
				
				<video src="CAM_03_640.mp4"
					preload="auto" id="vid1" response-type="arraybuffer" loop
					crossorigin webkit-playsinline autoplay muted playsinline>
				</video>
			</a-assets>
			
			<a-entity zappar-image="#target-file">
				videohandler
				<!-- PLACE CONTENT TO APPEAR ON THE IMAGE HERE -->
				<a-video
					src="#vid1"
					position='400 0 -450'
					rotation='90 0 180'
					width='640'
					height='480'
					>
				</a-video>
			</a-entity>
			
			<a-entity zappar-image="#target-file2">
				videohandler
				<!-- PLACE CONTENT TO APPEAR ON THE IMAGE HERE -->
			  	<a-video
					src="#vid1"
					position='400 0 -450'
					rotation='90 0 180'
					width='640'
					height='480'
					>
				</a-video>
			</a-entity>
			
			<a-entity zappar-image="#target-file3">
				videohandler
				<!-- PLACE CONTENT TO APPEAR ON THE IMAGE HERE -->
				<a-video
					src="#vid1"
					position='400 0 -450'
					rotation='90 0 180'
					width='640'
					height='480'
					>
				</a-video>
			</a-entity>
			
			
			<a-entity camera zappar-camera></a-entity>
		</a-scene>

This is correct?

#3

For chromakey videos add this in your head tag:
<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

Try this: Playing video with chromakeys

#4

You need not put window.onload function when u already have register component
try without the onload function also you should use the Zappar visible and non-visible component that actually track the image refer documentation : https://docs.zap.works/universal-ar/web-libraries/a-frame/image-tracking/

#5

onload function is for play/stop video when image is tracked/detected. Is not needed? Zappar do the play button action automatically?

#6

Yes you can do the .play() function inside the zappar visible function.
Here is a small glitch to refer, image target is inside the project : https://glitch.com/edit/#!/transformx-card