Add audio support and single playback in attributes. Readme update.

README.md

@@ -8,14 +8,43 @@ ar-gif is an effort to bring augmented reality with web components in a easy way
 This web-component is used in [Jandig](https://github.com/memeLab/Jandig), a project the aims to bring AR and Art for everyone.
 
 ### Usage
-ar-gif has a simple API, we have an ar-scene and one or more ar-markers. 
+ar-gif has a simple API, we have an ar-scene and one or more ar-markers.
 ```html
 <ar-scene>
   <ar-marker patt="hiro.patt" content="hiro.gif"></ar-marker>
-  <ar-marker patt="cat.patt" content="cat.mp4"></ar-marker>  
+  <ar-marker patt="cat.patt" content="cat.mp4"></ar-marker>
+</ar-scene>
+```
+
+You can use also use some simple attributes to control the appeareance.
+
+- scale : as a two dimensional vector
+- position : as a three dimensional vector
+- rotation : as a three dimensional vector
+- audio : [0|1] If your mp4 supports audio. The default behavior is muted playback.
+- loop : [0|1] Stop a mp4 video at the end. The default behavior is looped playback.
+
+
+```html
+<ar-scene>
+  <ar-marker patt="hiro.patt" content="hiro.gif" scale="1 1" position="0 0 0" rotation="0 0 0"></ar-marker>
+  <ar-marker patt="cat.patt" content="cat.mp4" audio="1" loop="0"></ar-marker>
 </ar-scene>
 ```
 Each ar-scene is responsible to detect every marker inside it and each marker is reponsible to show his content.
 The "patt" attribute indicates which pattern will be registered for that marker and the content is the gif, image or video that will be played.
 
 For more information about how to use, check [index.html](https://github.com/rodrigocam/ar-gif/blob/master/example/index.html) int [example](https://github.com/rodrigocam/ar-gif/blob/master/example) folder.
+
+# Build the Repo
+
+This is only needed if you want to modify ar-gif!
+Normaly you can just take the build/qr-gif.min.js and use it in your project.
+
+For Windows and Linux:
+1) clone the repo
+1) install nodejs
+1) change into directory
+1) run $ npm install
+1) run $ npx webpack
+1) use build/qr-gif.min.js in your project

src/ARMarker.js

@@ -15,7 +15,9 @@ class ARMarker extends HTMLElement {
                 src: this.content,
                 scale: {x: 1, y: 1, z: 1},
                 position: {x: 0, y: 0, z: 0},
-                rotation: {x: 0, y: 0, z: 0}
+                rotation: {x: 0, y: 0, z: 0},
+                loop: 0,
+                audio: 0,
             }
         }else {
             // case where the content was specified as ar-content
@@ -24,7 +26,9 @@ class ARMarker extends HTMLElement {
                 src: arContent.getAttribute('src'),
                 scale: this.stringToVec3(arContent.getAttribute('scale')),
                 position: this.stringToVec3(arContent.getAttribute('position')),
-                rotation: this.stringToVec3(arContent.getAttribute('rotation'))
+                rotation: this.stringToVec3(arContent.getAttribute('rotation')),
+                loop: arContent.getAttribute('loop'),
+                audio: arContent.getAttribute('audio')
             }
         }
     }
@@ -50,12 +54,22 @@ class ARMarker extends HTMLElement {
         }else{
             this.video = document.createElement("video");
             this.video.src = this.contentProps.src;
+
             this.video.loop = true;
+            if(this.contentProps.loop == 0)
+            {
+                this.video.loop = false;
+            }
+
             this.video.muted = true;
+            if(this.contentProps.audio == 1)
+            {
+                this.video.muted = false;
+            }
         }
 
         const self = this
-        
+
         arController.addEventListener('getMarker', (ev) => {
             // supress wanings
             console.warn = function(){}
@@ -70,13 +84,17 @@ class ARMarker extends HTMLElement {
                 let ctx = self.textureCanvas.getContext('2d');
                 ctx.clearRect(0, 0, self.textureCanvas.width, self.textureCanvas.height);
                 ctx.drawImage(self.image, 0, 0, self.textureCanvas.width, self.textureCanvas.height);
-        
+
             } else if(ev.data.marker.id == markerId) {
+                if(self.video.ended != 0 && self.contentProps.loop == 0)
+                {
+                    return;
+                }
                 self.video.play();
                 (function loop() {
                     let ctx = self.textureCanvas.getContext('2d');
                     if (!self.video.paused && !self.video.ended) {
-                        ctx.clearRect(0,0, self.textureCanvas.width, self.textureCanvas.height); 
+                        ctx.clearRect(0,0, self.textureCanvas.width, self.textureCanvas.height);
                         ctx.drawImage(self.video, 0, 0, self.textureCanvas.width, self.textureCanvas.height);
                         texture.needsUpdate = true;
                         setTimeout(loop, 1000 / 30); // drawing at 30fps
@@ -116,7 +134,7 @@ class ARMarker extends HTMLElement {
     // converts a string in the format "1 1 1" to an object like {x: 1, y: 1, z: 1}
     stringToVec3(str) {
         let split = str.split(" ")
-        
+
         return {
             x: split[0] || 0,
             y: split[1] || 0,