Merge pull request #21 from rodrigocam/video_support

Add support for static images
rodrigocam · Feb 22, 2020 · dffbcf8 · dffbcf8
2 parents 13b5d63 + 86a4ad4
commit dffbcf8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/build/ar-gif.min.js b/build/ar-gif.min.js
diff --git a/src/ARMarker.js b/src/ARMarker.js
@@ -36,11 +36,17 @@ class ARMarker extends HTMLElement {
         let texture = new THREE.CanvasTexture(this.textureCanvas)
         this.material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
 
-        let threeMarker = this.create3DMarker(markerId, arController)
-        arScene.scene.add(threeMarker)
+        let threeMarker = this.create3DMarker(markerId, arController);
+        arScene.scene.add(threeMarker);
 
-        if(this.contentProps.src.split(".")[1] == "gif"){
+        let content_ext = this.contentProps.src.split(".")[1];
+
+        if(content_ext == "gif"){
             this.contentIsGif = true;
+        }else if(content_ext == "png" || content_ext == "jpg" || content_ext == "jpeg"){
+            this.contentIsImage = true;
+            this.image = document.createElement("img");
+            this.image.src = this.contentProps.src;
         }else{
             this.video = document.createElement("video");
             this.video.src = this.contentProps.src;
@@ -60,6 +66,11 @@ class ARMarker extends HTMLElement {
                 }
                 self.gifPlaying = true
                 texture.needsUpdate = true
+            } else if (self.contentIsImage){
+                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) {
                 self.video.play();
                 (function loop() {

diff --git a/src/ARScene.js b/src/ARScene.js
@@ -23,7 +23,7 @@ class ARScene extends HTMLElement {
     }
 
     init() {
-        console.log('AR-GIF version 0.0.4')
+        console.log('AR-GIF version 0.0.5')
 
         window.ARThreeOnLoad = () => {
             ARController.getUserMediaThreeScene({
@@ -190,4 +190,4 @@ var crop = {
     h: 480
 }
 
-customElements.define("ar-scene", ARScene)
+customElements.define("ar-scene", ARScene)