1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
;(()=>{!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).MSP_PLAYER=t()}(this,(function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function t(t){for(var n=1;n<arguments.length;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?e(Object(i),!0).forEach((function(e){o(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function r(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e){return a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},a(e)}function l(e,t){return l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},l(e,t)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function u(e,t,n){return u=s()?Reflect.construct:function(e,t,n){var i=[null];i.push.apply(i,t);var r=new(Function.bind.apply(e,i));return n&&l(r,n.prototype),r},u.apply(null,arguments)}function c(e){var t="function"==typeof Map?new Map:void 0;return c=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,i)}function i(){return u(e,arguments,a(this).constructor)}return i.prototype=Object.create(e.prototype,{constructor:{value:i,enumerable:!1,writable:!0,configurable:!0}}),l(i,e)},c(e)}function h(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}var f=function(){function e(t){n(this,e),this.canvas=t,this.gl=t.getContext("webgl")||t.getContext("experimental-webgl"),this._init()}return r(e,[{key:"_init",value:function(){var e=this.gl;if(e){e.pixelStorei(e.UNPACK_ALIGNMENT,1);var t=this._compileShader("\n attribute lowp vec4 a_vertexPosition;\n attribute vec2 a_texturePosition;\n varying vec2 v_texCoord;\n void main() {\n gl_Position = a_vertexPosition;\n v_texCoord = a_texturePosition;\n }\n ",e.VERTEX_SHADER),n=this._compileShader("\n precision lowp float;\n uniform sampler2D samplerY;\n uniform sampler2D samplerU;\n uniform sampler2D samplerV;\n varying vec2 v_texCoord;\n void main() {\n float r,g,b,y,u,v,fYmul;\n y = texture2D(samplerY, v_texCoord).r;\n u = texture2D(samplerU, v_texCoord).r;\n v = texture2D(samplerV, v_texCoord).r;\n \n fYmul = y * 1.1643828125;\n r = fYmul + 1.59602734375 * v - 0.870787598;\n g = fYmul - 0.39176171875 * u - 0.81296875 * v + 0.52959375;\n b = fYmul + 2.01723046875 * u - 1.081389160375;\n gl_FragColor = vec4(r, g, b, 1.0);\n }\n ",e.FRAGMENT_SHADER),i=this._createProgram(t,n);this._initVertexBuffers(i),e.activeTexture(e.TEXTURE0),e.y=this._createTexture(),e.uniform1i(e.getUniformLocation(i,"samplerY"),0),e.activeTexture(e.TEXTURE1),e.u=this._createTexture(),e.uniform1i(e.getUniformLocation(i,"samplerU"),1),e.activeTexture(e.TEXTURE2),e.v=this._createTexture(),e.uniform1i(e.getUniformLocation(i,"samplerV"),2)}else console.log("gl not support！")}},{key:"_initVertexBuffers",value:function(e){var t=this.gl,n=t.createBuffer(),i=new Float32Array([1,1,0,-1,1,0,1,-1,0,-1,-1,0]);t.bindBuffer(t.ARRAY_BUFFER,n),t.bufferData(t.ARRAY_BUFFER,i,t.STATIC_DRAW);var r=t.getAttribLocation(e,"a_vertexPosition");t.vertexAttribPointer(r,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(r);var o=new Float32Array([1,0,0,0,1,1,0,1]),a=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,a),t.bufferData(t.ARRAY_BUFFER,o,t.STATIC_DRAW);var l=t.getAttribLocation(e,"a_texturePosition");t.vertexAttribPointer(l,2,t.FLOAT,!1,0,0),t.enableVertexAttribArray(l)}},{key:"_compileShader",value:function(e,t){var n=this.gl.createShader(t);if(this.gl.shaderSource(n,e),this.gl.compileShader(n),!this.gl.getShaderParameter(n,this.gl.COMPILE_STATUS)){var i=this.gl.getShaderInfoLog(n);return this.gl.deleteShader(n),void console.error("could not compile shader",i)}return n}},{key:"_createProgram",value:function(e,t){var n=this.gl,i=n.createProgram();if(n.attachShader(i,e),n.attachShader(i,t),n.linkProgram(i),n.useProgram(i),this.gl.getProgramParameter(i,this.gl.LINK_STATUS))return i;console.err("program fail to link"+this.gl.getShaderInfoLog(i))}},{key:"_createTexture",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.gl.LINEAR,t=this.gl,n=t.createTexture();return t.bindTexture(t.TEXTURE_2D,n),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.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,e),n}},{key:"renderImg",value:function(e,t,n){var i=this.gl;i.viewport(0,0,i.canvas.width,i.canvas.height),i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT);var r=e*t,o=(e>>1)*(t>>1);i.bindTexture(i.TEXTURE_2D,i.y),i.texImage2D(i.TEXTURE_2D,0,i.LUMINANCE,e,t,0,i.LUMINANCE,i.UNSIGNED_BYTE,n.subarray(0,r)),i.bindTexture(i.TEXTURE_2D,i.u),i.texImage2D(i.TEXTURE_2D,0,i.LUMINANCE,e>>1,t>>1,0,i.LUMINANCE,i.UNSIGNED_BYTE,n.subarray(r,r+o)),i.bindTexture(i.TEXTURE_2D,i.v),i.texImage2D(i.TEXTURE_2D,0,i.LUMINANCE,e>>1,t>>1,0,i.LUMINANCE,i.UNSIGNED_BYTE,n.subarray(r+o,n.length)),i.drawArrays(i.TRIANGLE_STRIP,0,4)}},{key:"setSize",value:function(e,t,n){var i=Math.min(n,e);this.canvas.width=i,this.canvas.height=i*t/e}},{key:"destroy",value:function(){var e=this.gl;e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT|e.STENCIL_BUFFER_BIT),e.getExtension("WEBGL_lose_context").loseContext()}}]),e}(),d="主动关闭",p=function(){function e(t,i){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};n(this,e);var o=new WebSocket(t);o.binaryType="arraybuffer",this.wsURL=t;var a=r.glWidth,l=r.glHeight;this.ws=o,this.gl=i,this.glWidth=a,this.glHeight=l,this.renderStatus=1,this.dataStatus=0,this.yuvData=null,this.reconnectTimer=1,this.reconnectTimerMax=3,this.reconnectTimerDelay=3e3,o&&this._wsInit();var s=this.glWidth*this.glHeight,u=(this.glWidth>>1)*(this.glHeight>>1),c=s+2*u,h=new Uint8Array(c);h.fill(0,0,s),h.fill(128,s,s+u),h.fill(128,s+u,c),this.gl.renderImg(this.glWidth,this.glHeight,h)}return r(e,[{key:"_wsInit",value:function(){var e=this;this.ws.onopen=function(){console.info("🙂---ws链接---open")},this.ws.onclose=function(t){var n=t.code,i=t.reason;console.info("😑---ws链接---close"),4444!==n&&i!==d&&e.reconnectWS()},this.ws.onmessage=function(t){0!==e.renderStatus&&(e.yuvData=new Uint8Array(t.data),e.gl.renderImg(e.glWidth,e.glHeight,e.yuvData))},this.ws.onerror=function(t){console.info("😭---ws链接---error",t),e.reconnectWS()}}},{key:"closeWS",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:4444,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d;this.ws.close(e,t),this.ws=null,this.gl.destroy()}},{key:"setWsStatus",value:function(e){[0,1].includes(e)&&this.renderStatus!==e&&(this.renderStatus=e)}},{key:"reconnectWS",value:function(){var e=this;if(this.reconnectTimer>this.reconnectTimerMax)return console.error("【ERROR】---WebSocket链接错误",this.wsURL);setTimeout((function(){e.reconnectTimer++,e.ws=new WebSocket(e.wsURL),e._wsInit()}),this.reconnectTimerDelay)}}]),e}(),v="yuv-player",y=function(){var e=document.createElement("template");e.innerHTML='\n <style>\n .msp-player-box {\n width: 100%;\n height: 100%;\n display: flex;\n position: relative;\n cursor: pointer;\n } \n </style>\n\n <div class="msp-player-box" id="msp-player-box">\n <slot>占位</slot>\n </div>\n';var t=function(t){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}(u,t);var i,r,o=(i=u,r=s(),function(){var e,t=a(i);if(r){var n=a(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return h(this,e)});function u(){var t;return n(this,u),(t=o.call(this))._shadowRoot=t.attachShadow({mode:"open"}),t._shadowRoot.appendChild(e.content.cloneNode(!0)),t}return u}(c(HTMLElement));window.customElements.define(v,t)},g={},T=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{autoPlay:!0};n(this,e);var i=t.wsUrl,r=t.autoPlay,o=t.el,a=t.sharpType,l=void 0===a?g:a,s=t.cid;if(console.info("🚀MSP_PLAYER.CONFIG",t),this.cid=Number(s),null==l||!l.width||null==l||!l.height)return new Error("【初始化player参数错误】--请传入正确sharpType = { width, height } 宽高配置！");this._bridgeWidthToSharpType(l,!1),void 0===r&&(r=!0),e.initPlayerTemplate(),this.wsUrl=i,this.canvas_id=function(){var e,t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:8,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:16,r="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),o=[];if(i=i||r.length,n)for(e=0;e<n;e++)o[e]=r[0|Math.random()*i];else for(o[8]=o[13]=o[18]=o[23]="-",o[14]="4",e=0;e<36;e++)o[e]||(t=0|16*Math.random(),o[e]=r[19==e?3&t|8:t]);return o.join("")}(),this.playerWS=null,this.playStatus=0,this.statusTips="即将开始自动播放...",this.mountDom=o,this.gl=null,this._mountPlayer(),this._initCanvasGl(),r&&this.play()}return r(e,[{key:"play",value:function(){this.playerWS?this.playerWS.setWsStatus(1):this._initPlayerWs()}},{key:"pause",value:function(){this.playerWS.setWsStatus(0)}},{key:"stop",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.playerWS.closeWS(),this.playerWS=null,e&&this._notifyMspClose(e)}},{key:"_notifyMspClose",value:function(e){if(this.cid)try{var t,n,i,r,o=window.cloudICP,a=function(t){e(t)},l={cid:String(this.cid),callback:a},s={confId:o.util.callStatusMgr.currentGoingConf,cid:o.util.callStatusMgr.currentGoingConfCid,callback:a};null!=l.cid&&l.cid==s.cid?null!=o.util.callStatusMgr.windowInfos[2147483647]?null===(t=o.dispatch)||void 0===t||null===(r=o.dispatch.conf)||void 0===r||r.endConf(s):null===(t=o.dispatch)||void 0===t||null===(r=o.dispatch.conf)||void 0===r||r.exitVideoConf(s):null===(t=o.dispatch)||void 0===t||null===(n=t.video)||void 0===n||null===(i=n.release)||void 0===i||i.call(n,l)}catch(e){console.error("[Error] - 调用cloudICP.dispatch.video.release出错",e)}}},{key:"changeVideResolution",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=""==t||null==t||null==t;if(console.info("changeVideResolution.sharpType",t),n)return console.warn("【changeVideResolution改变分辨率 参数错误】：请输入正确参数，如： { width: 1920, height: 1080 }");if(this.playerWS){this.playerWS.setWsStatus(0);if(null==t||!t.width||null==t||!t.height)return new Error("【初始化player参数错误】--请传入正确sharpType = { width, height } 宽高配置！");this._bridgeWidthToSharpType(t,!0,(function(){setTimeout((function(){e.playerWS.glWidth=e.playerWidth,e.playerWS.glHeight=e.playerHeight,e._setCanvasSize(),e.playerWS.setWsStatus(1)}),200)}))}}},{key:"_bridgeWidthToSharpType",value:function(n){var i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=parseInt(n.width),a=parseInt(n.height);o>e.MAX_WIDTH&&(o=e.MAX_WIDTH),a>e.MAX_HEIGHT&&(a=e.MAX_HEIGHT);var l=function(e,t){var n={};return n.width=e,n.height=t,n.width%4!=0&&(n.width=n.width+(4-n.width%4)),n.height%4!=0&&(n.height=n.height+(4-n.height%4)),n}(o,a);if(this._setMediaQUality(l),i){if(!this.cid)return console.warn("⚠⚠ 请在初始化player时传入cid!");try{var s,u,c,h=window.cloudICP,f=t(t({},n),{},{resID:this.cid,callback:r});null===(s=h.dispatch)||void 0===s||null===(u=s.video)||void 0===u||null===(c=u.setWssflowWinFmttype)||void 0===c||c.call(u,f)}catch(e){console.error("[Error] - 调用cloudICP.dispatch.video.setWssflowWinFmttype出错",e)}}}},{key:"_initCanvasGl",value:function(){var e=document.getElementById(this.canvas_id),t=new f(e);this.gl=t,this._setCanvasSize()}},{key:"_setCanvasSize",value:function(){this.gl.setSize(this.playerWidth,this.playerHeight,this.playerWidth)}},{key:"_initPlayerWs",value:function(){var e={glWidth:this.playerWidth,glHeight:this.playerHeight},t=new p(this.wsUrl,this.gl,e);this.playerWS=t}},{key:"_setMediaQUality",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.width,n=void 0===t?1280:t,i=e.height,r=void 0===i?720:i;this.playerWidth=n,this.playerHeight=r}},{key:"_mountPlayer",value:function(){var e='<yuv-player><canvas id="'.concat(this.canvas_id,'" style="width: 100%;height: 100%;" width="1280" height="720"></canvas></yuv-player>');this.mountDom.innerHTML=e}},{key:"setStatusTips",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";e&&(this.statusTips=e)}},{key:"_setPlayStatus",value:function(e){[-1,0,1].includes(e)&&(this.playStatus=e)}}],[{key:"genID",value:function(e){return Number(Math.random().toString().substr(3,e)+Date.now()).toString(36)}},{key:"initPlayerTemplate",value:function(){var e;(e=v,window.customElements.get(e))||y()}}]),e}();return o(T,"MAX_WIDTH",2560),o(T,"MAX_HEIGHT",1440),window.MSP_PLAYER=T,T}));})() |