Using a video as a WebGL Texture

webgl_video_texture.js

// using webgl-utils.js for *everything*
// and assuming you have a global called gl
// that's pointed to the webgl canvas context
// based on learningwebgl.com <3

function initTextureWith(videoUrl) {
       var vidElement = document.createElement('video');

       vidElement.onload = function () {
          var texture = makeTextureFrom(this);
          textureLoaded(texture);
       }

       vidElement.src = videoUrl;
       // TODO - confirm its necessary to add to DOM
       vidElement.style.display = 'none';
       document.body.appendChild(vidElement);
}

function makeTextureFrom(imgElement) {
   var texture = this.gl.createTexture();

   gl.bindTexture(this.gl.TEXTURE_2D, texture);
   gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, true);
   gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, gl.UNSIGNED_BYTE, imgElement);
   gl.texParameteri(this.gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
   gl.texParameteri(this.gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

   // tidy up
   this.gl.bindTexture(this.gl.TEXTURE_2D, null);

   return texture;
}


function textureLoaded(texture){
   console.log('yay my texture ' + texture + ' has loaded';
}