| 1 |
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.howLongUntilLunch=t()}(this,function(){"use strict";var e=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},t=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),r=function e(t,r,n){null===t&&(t=Function.prototype);var i=Object.getOwnPropertyDescriptor(t,r);if(void 0===i){var o=Object.getPrototypeOf(t);return null===o?void 0:e(o,r,n)}if("value"in i)return i.value;var a=i.get;return void 0!==a?a.call(n):void 0},n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},i=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,i=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{!n&&s.return&&s.return()}finally{if(i)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),o=function(){function r(t,n){e(this,r),this.config=t||{},this.headData=n,this.frame=[],this.textureMap={}}return t(r,[{key:"init",value:function(){var e=this;return Promise.resolve().then(function(){return e.initCanvas(),e.parseSrc(e.config)}).then(function(){return e.canvas.parentNode.removeChild(e.canvas),e.frame=e.config.frame||[],e})}},{key:"initCanvas",value:function(){var e=document.createElement("canvas"),t=e.getContext("2d");e.style.display="none",document.body.appendChild(e),this.ctx=t,this.canvas=e}},{key:"loadImg",value:function(e){return new Promise(function(t,r){var n=new Image;n.crossOrigin="anonymous",n.onload=function(){t(this)},n.onerror=function(t){r(new Error("frame 资源加载失败:"+e))},n.src=e})}},{key:"parseSrc",value:function(e){var t=this,r=this.srcData={};return Promise.all((e.src||[]).map(function(e){return Promise.resolve().then(function(){if(e.img=null,t.headData[e.srcTag.slice(1,e.srcTag.length-1)])return Promise.resolve().then(function(){if("txt"===e.srcType)e.textStr=e.srcTag.replace(/\[(.*)\]/,function(e,r){return t.headData[r]}),e.img=t.makeTextImg(e);else if("img"===e.srcType)return e.imgUrl=e.srcTag.replace(/\[(.*)\]/,function(e,r){return t.headData[r]}),Promise.resolve().then(function(){return t.loadImg(e.imgUrl+"?t="+Date.now())}).then(function(t){e.img=t}).catch(function(e){return Promise.resolve()})}).then(function(){e.img&&(r[e.srcId]=e)})}).then(function(){})}))}},{key:"makeTextImg",value:function(e){var t=e.textStr,r=e.w,n=e.h,i=e.color,o=e.style,a=this.ctx;a.canvas.width=r,a.canvas.height=n;var s=[Math.min(parseInt(r/t.length,10),n-8)+"px","Arial"];return"b"===o&&s.unshift("bold"),a.font=s.join(" "),a.textBaseline="middle",a.textAlign="center",a.fillStyle=i,a.clearRect(0,0,a.canvas.width,a.canvas.height),a.fillText(t,r/2,n/2),a.getImageData(0,0,r,n)}},{key:"getFrame",value:function(e){return this.frame.find(function(t){return t.i===e})}}]),r}();function a(e,t,r){var n=e.createShader(t);return e.shaderSource(n,r),e.compileShader(n),n}function s(e,t,r){var n=e.createTexture(),i=e.TEXTURE0+t;return e.activeTexture(i),e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),r&&e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,r),n}var c=function(){function r(t){e(this,r),t.container&&t.src&&(this.options=Object.assign({src:"",loop:!1,fps:20,width:375,height:375,container:null,precache:!1,mute:!1,config:""},t),this.fps=20,this.requestAnim=this.requestAnimFunc(this.fps),this.container=this.options.container,this.options.src&&this.options.config&&this.options.container&&this.initVideo())}return t(r,[{key:"precacheSource",value:function(e){var t=window.webkitURL||window.URL;return new Promise(function(r,n){var i=new XMLHttpRequest;i.open("GET",e,!0),i.responseType="blob",i.onload=function(){if(200===i.status||304===i.status){var e=i.response;if(/iphone|ipad|ipod/i.test(navigator.userAgent)){var o=new FileReader;o.onloadend=function(){for(var e=atob(o.result.slice(o.result.indexOf(",")+1)),n=Array(e.length),i=0;i<e.length;i++)n[i]=e.charCodeAt(i);var a=new Uint8Array(n),s=new Blob([a],{type:"video/mp4"});r(t.createObjectURL(s))},o.readAsDataURL(i.response)}else r(t.createObjectURL(e))}else n(new Error("http response invalid"+i.status))},i.send()})}},{key:"initVideo",value:function(){var e=this,t=this.options,r=this.video=document.createElement("video");r.crossOrigin="anonymous",r.autoplay=!1,r.preload="auto",r.autoload=!0,t.mute&&(r.muted=!0,r.volume=0),r.style.display="none",r.loop=!!t.loop,t.precache?this.precacheSource(t.src).then(function(e){r.src=e,document.body.appendChild(r)}).catch(function(e){}):(r.src=t.src,document.body.appendChild(this.video),r.load()),this.events={},["playing","pause","ended","error"].forEach(function(t){e.on(t,e["on"+t].bind(e))})}},{key:"drawFrame",value:function(){this._drawFrame=this._drawFrame||this.drawFrame.bind(this),this.animId=this.requestAnim(this._drawFrame)}},{key:"play",value:function(){var e=this,t=this.video&&this.video.play();t&&t.then&&t.catch(function(t){e.video&&(e.video.muted=!0,e.video.volume=0,e.video.play().catch(function(t){(e.events.error||[]).forEach(function(e){e(t)})}))})}},{key:"requestAnimFunc",value:function(){var e=this;if(window.requestAnimationFrame){var t=-1;return function(r){return t++,requestAnimationFrame(function(){if(!(t%(60/e.fps)))return r();e.animId=e.requestAnim(r)})}}return function(t){return setTimeout(t,1e3/e.fps)}}},{key:"cancelRequestAnimation",value:function(){window.cancelAnimationFrame&&cancelAnimationFrame(this.animId),clearTimeout(this.animId)}},{key:"destroy",value:function(){this.video&&(this.video.parentNode&&this.video.parentNode.removeChild(this.video),this.video=null),this.cancelRequestAnimation(this.animId)}},{key:"clear",value:function(){this.destroy()}},{key:"on",value:function(e,t){var r=this.events[e]||[];return r.push(t),this.events[e]=r,this.video.addEventListener(e,t),this}},{key:"onplaying",value:function(){this.firstPlaying||(this.firstPlaying=!0,this.drawFrame())}},{key:"onpause",value:function(){}},{key:"onended",value:function(){this.destroy()}},{key:"onerror",value:function(e){this.destroy()}}]),r}(),u=null,l={};function h(e,t,r,n,i,o){return[e/i,(e+r)/i,(o-t-n)/o,(o-t)/o]}var v=function(v){function f(t){e(this,f);var r=n(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,t));return r.insType=r.options.type,l[r.insType]?r.instance=l[r.insType]:r.instance=l[r.insType]={},r.textures=[],r.buffers=[],r.shaders=[],r.init(),r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(f,c),t(f,[{key:"init",value:function(){var e=this;return Promise.resolve().then(function(){if(e.setCanvas(),e.options.config)return Promise.resolve().then(function(){return new o(e.options.config,e.options).init()}).then(function(t){e.vapFrameParser=t,e.resources=e.vapFrameParser.srcData}).catch(function(e){})}).then(function(){e.resources=e.resources||{},e.initWebGL(),e.play()})}},{key:"setCanvas",value:function(){var e=this.instance.canvas,t=this.options,r=t.width,n=t.height;e||(e=this.instance.canvas=document.createElement("canvas")),e.width=r,e.height=n,this.container.appendChild(e)}},{key:"initWebGL",value:function(){var e=this.instance.canvas,t=this.instance,r=t.gl,n=t.vertexShader,i=t.fragmentShader,o=t.program;if(e)return r||(this.instance.gl=r=e.getContext("webgl")||e.getContext("experimental-webgl"),r.enable(r.BLEND),r.blendFuncSeparate(r.SRC_ALPHA,r.ONE_MINUS_SRC_ALPHA,r.ONE,r.ONE_MINUS_SRC_ALPHA),r.pixelStorei(r.UNPACK_FLIP_Y_WEBGL,!0)),r?(r.viewport(0,0,e.width,e.height),n||(n=this.instance.vertexShader=this.initVertexShader()),i||(i=this.instance.fragmentShader=this.initFragmentShader()),o||(o=this.instance.program=function(e,t,r){var n=e.createProgram();return e.attachShader(n,t),e.attachShader(n,r),e.linkProgram(n),e.useProgram(n),n}(r,n,i)),this.program=o,this.initTexture(),this.initVideoTexture(),r):void 0}},{key:"initVertexShader",value:function(){var e=this.instance.gl;return a(e,e.VERTEX_SHADER,"attribute vec2 a_position; // 接受顶点坐标\n attribute vec2 a_texCoord; // 接受纹理坐标\n attribute vec2 a_alpha_texCoord; // 接受纹理坐标\n varying vec2 v_alpha_texCoord; // 接受纹理坐标\n varying vec2 v_texcoord; // 传递纹理坐标给片元着色器\n void main(void){\n gl_Position = vec4(a_position, 0.0, 1.0); // 设置坐标\n v_texcoord = a_texCoord; // 设置纹理坐标\n v_alpha_texCoord = a_alpha_texCoord; // 设置纹理坐标\n }")}},{key:"initFragmentShader",value:function(){var e=this.instance.gl,t=e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS)-1,r="",n="";if(t>0){for(var i=[],o=0;o<t;o++)i.push("if(ndx == "+o+"){\n color = texture2D(textures["+o+"],uv);\n }");n="\n uniform sampler2D u_image["+t+"];\n uniform float image_pos["+9*t+"];\n vec4 getSampleFromArray(sampler2D textures["+t+"], int ndx, vec2 uv) {\n vec4 color;\n "+i.join(" else ")+"\n return color;\n }\n ",r="\n vec4 srcColor,maskColor;\n vec2 srcTexcoord,maskTexcoord;\n int srcIndex;\n float x1,x2,y1,y2,mx1,mx2,my1,my2; //显示的区域\n\n for(int i=0;i<"+9*t+";i+= 9){\n if ((int(image_pos[i]) > 0)) {\n srcIndex = int(image_pos[i]);\n \n x1 = image_pos[i+1];\n x2 = image_pos[i+2];\n y1 = image_pos[i+3];\n y2 = image_pos[i+4];\n \n mx1 = image_pos[i+5];\n mx2 = image_pos[i+6];\n my1 = image_pos[i+7];\n my2 = image_pos[i+8];\n \n \n if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n srcColor = getSampleFromArray(u_image,srcIndex,srcTexcoord);\n maskColor = texture2D(u_image_video, maskTexcoord);\n srcColor.a = srcColor.a*(maskColor.r);\n \n bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n \n } \n }\n }\n "}var s="\n precision lowp float;\n varying vec2 v_texcoord;\n varying vec2 v_alpha_texCoord;\n uniform sampler2D u_image_video;\n "+n+"\n \n void main(void) {\n vec4 bgColor = vec4(texture2D(u_image_video, v_texcoord).rgb, texture2D(u_image_video,v_alpha_texCoord).r);\n "+r+"\n // bgColor = texture2D(u_image[0], v_texcoord);\n gl_FragColor = bgColor;\n }\n ";return a(e,e.FRAGMENT_SHADER,s)}},{key:"initTexture",value:function(){var e=this.instance.gl,t=1;if(this.vapFrameParser&&this.vapFrameParser.srcData){var r=this.vapFrameParser.srcData;for(var n in r){var i=r[n];this.textures.push(s(e,t,i.img));var o=e.getUniformLocation(this.program,"u_image["+t+"]");e.uniform1i(o,t),this.vapFrameParser.textureMap[i.srcId]=t++}var a=e.createTexture();e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,1,1,0,e.RGBA,e.UNSIGNED_BYTE,null),this.videoTexture=s(e,t);var c=e.getUniformLocation(this.program,"u_image_video");e.uniform1i(c,t)}}},{key:"initVideoTexture",value:function(){var e=this.instance.gl,t=e.createBuffer();if(this.buffers.push(t),this.vapFrameParser&&this.vapFrameParser.config&&this.vapFrameParser.config.info){var r=this.vapFrameParser.config.info,n=[],o=r.videoW,a=r.videoH,s=i(r.rgbFrame,4),c=s[0],u=s[1],l=s[2],v=s[3],f=i(r.aFrame,4),d=f[0],m=f[1],p=f[2],g=f[3],y=h(c,u,l,v,o,a),_=h(d,m,p,g,o,a);n.push.apply(n,[-1,1,y[0],y[3],_[0],_[3]]),n.push.apply(n,[1,1,y[1],y[3],_[1],_[3]]),n.push.apply(n,[-1,-1,y[0],y[2],_[0],_[2]]),n.push.apply(n,[1,-1,y[1],y[2],_[1],_[2]]);var x=new Float32Array(n);e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,x,e.STATIC_DRAW),this.aPosition=e.getAttribLocation(this.program,"a_position"),e.enableVertexAttribArray(this.aPosition),this.aTexCoord=e.getAttribLocation(this.program,"a_texCoord"),e.enableVertexAttribArray(this.aTexCoord),this.aAlphaTexCoord=e.getAttribLocation(this.program,"a_alpha_texCoord"),e.enableVertexAttribArray(this.aAlphaTexCoord);var T=x.BYTES_PER_ELEMENT;e.vertexAttribPointer(this.aPosition,2,e.FLOAT,!1,6*T,0),e.vertexAttribPointer(this.aTexCoord,2,e.FLOAT,!1,6*T,2*T),e.vertexAttribPointer(this.aAlphaTexCoord,2,e.FLOAT,!1,6*T,4*T)}}},{key:"drawFrame",value:function(){var e=this,t=this.instance.gl;if(t){if(t.clear(t.COLOR_BUFFER_BIT),this.vapFrameParser){var n=Math.floor(this.video.currentTime*this.options.fps),o=this.vapFrameParser.getFrame(n),a=[];o&&o.obj&&o.obj.forEach(function(t,r){a[a.length]=+e.vapFrameParser.textureMap[t.srcId];var n=e.vapFrameParser.config.info,o=n.videoW,s=n.videoH,c=i(t.frame,4),u=c[0],l=c[1],v=c[2],f=c[3],d=i(t.mFrame,4),m=d[0],p=d[1],g=d[2],y=d[3],_=h(u,l,v,f,o,s),x=h(m,p,g,y,o,s);a=a.concat(_).concat(x)});var s=9*(t.getParameter(t.MAX_TEXTURE_IMAGE_UNITS)-1);a=a.concat(new Array(s-a.length).fill(0)),this._imagePos=this._imagePos||t.getUniformLocation(this.program,"image_pos"),t.uniform1fv(this._imagePos,new Float32Array(a))}t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,this.video),t.drawArrays(t.TRIANGLE_STRIP,0,4),r(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"drawFrame",this).call(this)}else r(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"drawFrame",this).call(this)}},{key:"destroy",value:function(){var e=this.instance,t=e.canvas,n=e.gl;if(this.textures&&this.textures.length)for(var i=0;i<this.textures.length;i++)n.deleteTexture(this.textures[i]);t&&t.parentNode&&t.parentNode.removeChild(t),r(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"destroy",this).call(this),this.clearMemoryCache()}},{key:"clearMemoryCache",value:function(){u&&clearTimeout(u),u=setTimeout(function(){l={}},18e5)}}]),f}(),f=void 0;return function(e){if(function(){if(void 0!==f)return f;try{if(!window.WebGLRenderingContext)return!1;var e=document.createElement("canvas"),t=e.getContext("webgl")||e.getContext("experimental-webgl");f=!!t,t=null}catch(e){f=!1}return f}())return new v(Object.assign({},e));throw new Error("your browser not support webgl")}});
|
