Merge pull request #1047 from wpdildine/master

Refactored VideoTexture.TS for Streaming Support

src/Materials/Textures/babylon.videoTexture.ts

@@ -1,4 +1,4 @@
-module BABYLON {
+module BABYLON {
     export class VideoTexture extends Texture {
         public video: HTMLVideoElement;
 
@@ -6,14 +6,14 @@
         private _lastUpdate: number;
 
         /**
-        * Creates a video texture.  
-        * Sample : https://doc.babylonjs.com/tutorials/01._Advanced_Texturing  
-        * @param {Array} urlsOrVideo can be used to provide an array of urls or an already setup HTML video element.
-        * @param {BABYLON.Scene} scene is obviously the current scene.   
-        * @param {boolean} generateMipMaps can be used to turn on mipmaps (Can be expensive for videoTextures because they are often updated).
-        * @param {boolean} invertY is false by default but can be used to invert video on Y axis
-        * @param {number} samplingMode controls the sampling method and is set to TRILINEAR_SAMPLINGMODE by default
-        */
+         * Creates a video texture.
+         * Sample : https://doc.babylonjs.com/tutorials/01._Advanced_Texturing
+         * @param {Array} urlsOrVideo can be used to provide an array of urls or an already setup HTML video element.
+         * @param {BABYLON.Scene} scene is obviously the current scene.
+         * @param {boolean} generateMipMaps can be used to turn on mipmaps (Can be expensive for videoTextures because they are often updated).
+         * @param {boolean} invertY is false by default but can be used to invert video on Y axis
+         * @param {number} samplingMode controls the sampling method and is set to TRILINEAR_SAMPLINGMODE by default
+         */
         constructor(name: string, urlsOrVideo: string[] | HTMLVideoElement, scene: Scene, generateMipMaps = false, invertY = false, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE) {
             super(null, scene, !generateMipMaps, invertY);
 
@@ -30,29 +30,33 @@
                 this.video.loop = true;
             }
 
-            this.video.addEventListener("canplaythrough", () => {
-                if (Tools.IsExponentOfTwo(this.video.videoWidth) && Tools.IsExponentOfTwo(this.video.videoHeight)) {
-                    this.wrapU = Texture.WRAP_ADDRESSMODE;
-                    this.wrapV = Texture.WRAP_ADDRESSMODE;
-                } else {
-                    this.wrapU = Texture.CLAMP_ADDRESSMODE;
-                    this.wrapV = Texture.CLAMP_ADDRESSMODE;
-                    generateMipMaps = false;
-                }
-
-                this._texture = scene.getEngine().createDynamicTexture(this.video.videoWidth, this.video.videoHeight, generateMipMaps, samplingMode, false);
-                this._texture.isReady = true;
-            });
+            if (Tools.IsExponentOfTwo(this.video.videoWidth) && Tools.IsExponentOfTwo(this.video.videoHeight)) {
+                this.wrapU = Texture.WRAP_ADDRESSMODE;
+                this.wrapV = Texture.WRAP_ADDRESSMODE;
+            } else {
+                this.wrapU = Texture.CLAMP_ADDRESSMODE;
+                this.wrapV = Texture.CLAMP_ADDRESSMODE;
+                generateMipMaps = false;
+            }
 
             if (urls) {
+                this.video.addEventListener("canplaythrough", () => {
+                    this._texture = scene.getEngine().createDynamicTexture(this.video.videoWidth, this.video.videoHeight, generateMipMaps, samplingMode, false);
+                    this._texture.isReady = true;
+                });
                 urls.forEach(url => {
                     var source = document.createElement("source");
                     source.src = url;
                     this.video.appendChild(source);
                 });
+            } else {
+
+                this._texture = scene.getEngine().createDynamicTexture(this.video.videoWidth, this.video.videoHeight, generateMipMaps, samplingMode, false);
+                this._texture.isReady = true;
             }
 
             this._lastUpdate = Tools.Now;
+
         }
 
         public update(): boolean {
@@ -64,7 +68,7 @@
             var now = Tools.Now;
 
             if (now - this._lastUpdate < 15 || this.video.readyState !== this.video.HAVE_ENOUGH_DATA) {
-               return false;
+                return false;
             }
 
             this._lastUpdate = now;
@@ -72,4 +76,4 @@
             return true;
         }
     }
-} 
+}