You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
8.6 KiB
1 lines
8.6 KiB
!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.YUVCanvas=e()}(this,function(){function t(t){t=t||{},this.canvasElement=t.canvas||document.createElement("canvas"),this.contextOptions=t.contextOptions,this.type=t.type||"yuv420",this.customYUV444=t.customYUV444,this.conversionType=t.conversionType||"rec601",this.width=t.width||640,this.height=t.height||320,this.animationTime=t.animationTime||0,this.canvasElement.width=this.width,this.canvasElement.height=this.height,this.initContextGL(),this.contextGL&&(this.initProgram(),this.initBuffers(),this.initTextures()),"yuv420"===this.type?this.drawNextOuptutPictureGL=function(t){var e=this.contextGL,r=this.texturePosBuffer,i=this.uTexturePosBuffer,o=this.vTexturePosBuffer,a=this.yTextureRef,n=this.uTextureRef,u=this.vTextureRef,s=t.yData,h=t.uData,x=t.vData,f=this.width,T=this.height,v=t.yDataPerRow||f,R=t.yRowCnt||T,c=t.uDataPerRow||f/2,A=t.uRowCnt||T/2,l=t.vDataPerRow||c,E=t.vRowCnt||A;if(e.viewport(0,0,this.canvasElement.width,this.canvasElement.height),1==v)return e.clearColor(0,0,0,1),void e.clear(e.COLOR_BUFFER_BIT);var m=0,g=0,p=1,d=1,P=new Float32Array([d,m,g,m,d,p,g,p]);e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,P,e.DYNAMIC_DRAW),this.customYUV444?(p=T/A,d=f/c):(p=1,d=1);var y=new Float32Array([d,m,g,m,d,p,g,p]);e.bindBuffer(e.ARRAY_BUFFER,i),e.bufferData(e.ARRAY_BUFFER,y,e.DYNAMIC_DRAW),this.customYUV444?(p=T/E,d=f/l):(p=1,d=1);var U=new Float32Array([d,m,g,m,d,p,g,p]);e.bindBuffer(e.ARRAY_BUFFER,o),e.bufferData(e.ARRAY_BUFFER,U,e.DYNAMIC_DRAW),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.LUMINANCE,v,R,0,e.LUMINANCE,e.UNSIGNED_BYTE,s),e.activeTexture(e.TEXTURE1),e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.LUMINANCE,c,A,0,e.LUMINANCE,e.UNSIGNED_BYTE,h),e.activeTexture(e.TEXTURE2),e.bindTexture(e.TEXTURE_2D,u),e.texImage2D(e.TEXTURE_2D,0,e.LUMINANCE,l,E,0,e.LUMINANCE,e.UNSIGNED_BYTE,x),e.drawArrays(e.TRIANGLE_STRIP,0,4)}:"yuv422"===this.type&&(this.drawNextOuptutPictureGL=function(t){var e=this.contextGL,r=this.texturePosBuffer,i=this.textureRef,o=t.data,a=this.width,n=this.height,u=t.dataPerRow||2*a,s=t.rowCnt||n;e.viewport(0,0,a,n);var h=0,x=0,f=n/s,T=a/(u/2),v=new Float32Array([T,h,x,h,T,f,x,f]);e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,v,e.DYNAMIC_DRAW),e.uniform2f(e.getUniformLocation(this.shaderProgram,"resolution"),u,n),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,i),e.texImage2D(e.TEXTURE_2D,0,e.LUMINANCE,u,s,0,e.LUMINANCE,e.UNSIGNED_BYTE,o),e.drawArrays(e.TRIANGLE_STRIP,0,4)})}return t.prototype.isWebGL=function(){return this.contextGL},t.prototype.initContextGL=function(){for(var t=this.canvasElement,e=null,r=["webgl","experimental-webgl","moz-webgl","webkit-3d"],i=0;!e&&i<r.length;){var o=r[i];try{e=this.contextOptions?t.getContext(o,this.contextOptions):t.getContext(o)}catch(a){e=null}e&&"function"==typeof e.getParameter||(e=null),++i}this.contextGL=e},t.prototype.initProgram=function(){var t,e,r=this.contextGL;"yuv420"===this.type?(t=["attribute vec4 vertexPos;","attribute vec4 texturePos;","attribute vec4 uTexturePos;","attribute vec4 vTexturePos;","varying vec2 textureCoord;","varying vec2 uTextureCoord;","varying vec2 vTextureCoord;","void main()","{"," gl_Position = vertexPos;"," textureCoord = texturePos.xy;"," uTextureCoord = uTexturePos.xy;"," vTextureCoord = vTexturePos.xy;","}"].join("\n"),e=["precision highp float;","varying highp vec2 textureCoord;","varying highp vec2 uTextureCoord;","varying highp vec2 vTextureCoord;","uniform sampler2D ySampler;","uniform sampler2D uSampler;","uniform sampler2D vSampler;","uniform mat4 YUV2RGB;","void main(void) {"," highp float y = texture2D(ySampler, textureCoord).r;"," highp float u = texture2D(uSampler, uTextureCoord).r;"," highp float v = texture2D(vSampler, vTextureCoord).r;"," gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;","}"].join("\n")):"yuv422"===this.type&&(t=["attribute vec4 vertexPos;","attribute vec4 texturePos;","varying vec2 textureCoord;","void main()","{"," gl_Position = vertexPos;"," textureCoord = texturePos.xy;","}"].join("\n"),e=["precision highp float;","varying highp vec2 textureCoord;","uniform sampler2D sampler;","uniform highp vec2 resolution;","uniform mat4 YUV2RGB;","void main(void) {"," highp float texPixX = 1.0 / resolution.x;"," highp float logPixX = 2.0 / resolution.x;"," highp float logHalfPixX = 4.0 / resolution.x;"," highp float steps = floor(textureCoord.x / logPixX);"," highp float uvSteps = floor(textureCoord.x / logHalfPixX);"," highp float y = texture2D(sampler, vec2((logPixX * steps) + texPixX, textureCoord.y)).r;"," highp float u = texture2D(sampler, vec2((logHalfPixX * uvSteps), textureCoord.y)).r;"," highp float v = texture2D(sampler, vec2((logHalfPixX * uvSteps) + texPixX + texPixX, textureCoord.y)).r;"," gl_FragColor = vec4(y, u, v, 1.0) * YUV2RGB;","}"].join("\n"));var i=[];i="rec709"==this.conversionType?[1.16438,0,1.79274,-.97295,1.16438,-.21325,-.53291,.30148,1.16438,2.1124,0,-1.1334,0,0,0,1]:[1.16438,0,1.59603,-.87079,1.16438,-.39176,-.81297,.52959,1.16438,2.01723,0,-1.08139,0,0,0,1];var o=r.createShader(r.VERTEX_SHADER);r.shaderSource(o,t),r.compileShader(o),r.getShaderParameter(o,r.COMPILE_STATUS)||console.log("Vertex shader failed to compile: "+r.getShaderInfoLog(o));var a=r.createShader(r.FRAGMENT_SHADER);r.shaderSource(a,e),r.compileShader(a),r.getShaderParameter(a,r.COMPILE_STATUS)||console.log("Fragment shader failed to compile: "+r.getShaderInfoLog(a));var n=r.createProgram();r.attachShader(n,o),r.attachShader(n,a),r.linkProgram(n),r.getProgramParameter(n,r.LINK_STATUS)||console.log("Program failed to compile: "+r.getProgramInfoLog(n)),r.useProgram(n);var u=r.getUniformLocation(n,"YUV2RGB");r.uniformMatrix4fv(u,!1,i),this.shaderProgram=n},t.prototype.initBuffers=function(){var t=this.contextGL,e=this.shaderProgram,r=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,r),t.bufferData(t.ARRAY_BUFFER,new Float32Array([1,1,-1,1,1,-1,-1,-1]),t.STATIC_DRAW);var i=t.getAttribLocation(e,"vertexPos");if(t.enableVertexAttribArray(i),t.vertexAttribPointer(i,2,t.FLOAT,!1,0,0),this.animationTime){var o=this.animationTime,a=0,n=15,u=function(){a+=n;var r=1*a/o;a>=o?r=1:setTimeout(u,n);var i=-1*r,s=1*r,h=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,new Float32Array([s,s,i,s,s,i,i,i]),t.STATIC_DRAW);var x=t.getAttribLocation(e,"vertexPos");t.enableVertexAttribArray(x),t.vertexAttribPointer(x,2,t.FLOAT,!1,0,0);try{t.drawArrays(t.TRIANGLE_STRIP,0,4)}catch(f){}};u()}var s=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,s),t.bufferData(t.ARRAY_BUFFER,new Float32Array([1,0,0,0,1,1,0,1]),t.STATIC_DRAW);var h=t.getAttribLocation(e,"texturePos");if(t.enableVertexAttribArray(h),t.vertexAttribPointer(h,2,t.FLOAT,!1,0,0),this.texturePosBuffer=s,"yuv420"===this.type){var x=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,x),t.bufferData(t.ARRAY_BUFFER,new Float32Array([1,0,0,0,1,1,0,1]),t.STATIC_DRAW);var f=t.getAttribLocation(e,"uTexturePos");t.enableVertexAttribArray(f),t.vertexAttribPointer(f,2,t.FLOAT,!1,0,0),this.uTexturePosBuffer=x;var T=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,T),t.bufferData(t.ARRAY_BUFFER,new Float32Array([1,0,0,0,1,1,0,1]),t.STATIC_DRAW);var v=t.getAttribLocation(e,"vTexturePos");t.enableVertexAttribArray(v),t.vertexAttribPointer(v,2,t.FLOAT,!1,0,0),this.vTexturePosBuffer=T}},t.prototype.initTextures=function(){var t=this.contextGL,e=this.shaderProgram;if("yuv420"===this.type){var r=this.initTexture(),i=t.getUniformLocation(e,"ySampler");t.uniform1i(i,0),this.yTextureRef=r;var o=this.initTexture(),a=t.getUniformLocation(e,"uSampler");t.uniform1i(a,1),this.uTextureRef=o;var n=this.initTexture(),u=t.getUniformLocation(e,"vSampler");t.uniform1i(u,2),this.vTextureRef=n}else if("yuv422"===this.type){var s=this.initTexture(),h=t.getUniformLocation(e,"sampler");t.uniform1i(h,0),this.textureRef=s}},t.prototype.initTexture=function(){var t=this.contextGL,e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.bindTexture(t.TEXTURE_2D,null),e},t.prototype.drawNextOutputPicture=function(t,e,r,i){var o=this.contextGL;o?this.drawNextOuptutPictureGL(t,e,r,i):this.drawNextOuptutPictureRGBA(t,e,r,i)},t.prototype.drawNextOuptutPictureRGBA=function(t,e,r,i){var o=this.canvasElement,r=null,a=i,n=o.getContext("2d"),u=n.getImageData(0,0,t,e);u.data.set(a),null===r?n.putImageData(u,0,0):n.putImageData(u,-r.left,-r.top,0,0,r.width,r.height)},t}); |