Video not rendered initially if not cached

[dedurus]

Loading a page for the first time which means the video is not being cached at all returns the following error:

WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty.

My hacky solution for this is adding a check for decoded video frames in updateTexture() method:

VideoContext/src/utils.js

Lines 75 to 82 in b59c997

	export function updateTexture(gl, texture, element) {
	if (element.readyState !== undefined && element.readyState === 0) return;
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);
	texture._isTextureCleared = false;
	}

Changes below:

function updateTexture(gl, texture, element) {
    if (element.readyState !== undefined && element.readyState === 0) return;

    if(element.readyState === 4 && (element.webkitDecodedFrameCount || element.mozDecodedFrames)){

        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);

        texture._isTextureCleared = false;
    }
}

My guess is that having at least one frame decoded is enough for calculating the so called "video visible size" in the last parameter of WebGL1 texImage2D.

A note: if the page is loaded without errors, the browser has probably cached the first video frame, and the error will not be shown. To reproduce the error, please clean the browser cache first