Merge pull request #20 from rodrigocam/video_support

Add minimal video support
rodrigocam · Jan 30, 2020 · 13b5d63 · 13b5d63
2 parents fdef122 + 6b1ca69
commit 13b5d63
Show file tree

Hide file tree

Showing 7 changed files with 1,058 additions and 396 deletions.
diff --git a/build/ar-gif.min.js b/build/ar-gif.min.js
diff --git a/example/ar-gif.min.js b/example/ar-gif.min.js
diff --git a/example/gifs/video.mp4 b/example/gifs/video.mp4
diff --git a/example/index.html b/example/index.html
@@ -9,7 +9,8 @@
 
 <body style="overflow: hidden; margin:0;">
     <ar-scene>
-        <ar-marker patt="patts/temaki.patt" content="gifs/temaki.gif"></ar-marker>
+        <ar-marker patt="patts/temaki.patt" content="gifs/video.mp4"></ar-marker>
+        <!--<ar-marker patt="patts/temaki.patt" content="gifs/temaki.gif"></ar-marker>-->
         <ar-marker patt="patts/peixe.patt">
             <ar-content src="gifs/peixe.gif" scale="1.5 1.5" position="0 0 0" rotation="0 0 0">
             </ar-content>
@@ -18,4 +19,4 @@
     </ar-scene>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,6 @@
   "name": "ar-gif",
   "version": "1.0.0",
   "description": "",
-  "type": "module",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -17,6 +16,7 @@
     "babel-loader": "^8.0.5",
     "babel-polyfill": "^6.26.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.29.5"
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
   }
 }
diff --git a/src/ARMarker.js b/src/ARMarker.js
@@ -38,18 +38,39 @@ class ARMarker extends HTMLElement {
 
         let threeMarker = this.create3DMarker(markerId, arController)
         arScene.scene.add(threeMarker)
+
+        if(this.contentProps.src.split(".")[1] == "gif"){
+            this.contentIsGif = true;
+        }else{
+            this.video = document.createElement("video");
+            this.video.src = this.contentProps.src;
+            this.video.loop = true;
+            this.video.muted = true;
+        }
+
         const self = this
 
         arController.addEventListener('getMarker', (ev) => {
             // supress wanings
             console.warn = function(){}
-            if(ev.data.marker.id == markerId) {
+            if(ev.data.marker.id == markerId && self.contentIsGif) {
                 if(!self.gifLoaded) {
                     self.gif = gifler(self.contentProps.src).animate(self.textureCanvas)
                     self.gifLoaded = true;
                 }
                 self.gifPlaying = true
                 texture.needsUpdate = true
+            } else if(ev.data.marker.id == markerId) {
+                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.drawImage(self.video, 0, 0, self.textureCanvas.width, self.textureCanvas.height);
+                        texture.needsUpdate = true;
+                        setTimeout(loop, 1000 / 30); // drawing at 30fps
+                    }
+                })();
             }
         })
         console.log("Initialized marker ", markerId, this.textureCanvas)