388 lines
912 KiB
JavaScript
388 lines
912 KiB
JavaScript
|
!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";class e{on(e,t,i){var r=this.e||(this.e={});return(r[e]||(r[e]=[])).push({fn:t,ctx:i}),this}once(r,s,a){const n=this;function o(){n.off(r,o);for(var e=arguments.length,t=new Array(e),i=0;i<e;i++)t[i]=arguments[i];s.apply(a,t)}return o._=s,this.on(r,o,a)}emit(e){for(var t=((this.e||(this.e={}))[e]||[]).slice(),i=arguments.length,r=new Array(1<i?i-1:0),s=1;s<i;s++)r[s-1]=arguments[s];for(let e=0;e<t.length;e+=1)t[e].fn.apply(t[e].ctx,r);return this}off(e,i){const t=this.e||(this.e={});if(e){var r=t[e],s=[];if(r&&i)for(let e=0,t=r.length;e<t;e+=1)r[e].fn!==i&&r[e].fn._!==i&&s.push(r[e]);return s.length?t[e]=s:delete t[e],this}Object.keys(t).forEach(e=>{delete t[e]}),delete this.e}}const i="fetch",F="websocket",j="worker",n="player",v="playbackTF",p="mp4",U="webm",N="flv",G="webTransport",z="nakedFlow",H={flv:"FLV",m7s:"m7s",hls:"HLS",webrtc:"Webrtc",webTransport:"WebTransport",nakedFlow:"裸流"},W="canvas",V="video",$="debug",K="warn",q="click",Q={url:"",playbackConfig:{},fullscreenWatermarkConfig:{},playType:n,playbackForwardMaxRateDecodeIFrame:4,playOptions:{},isLive:!0,isMulti:!1,isCrypto:!1},Y={playType:n,container:"",videoBuffer:1e3,videoBufferDelay:1e3,networkDelay:1e4,isResize:!0,isFullResize:!1,isFlv:!1,isHls:!1,isWebrtc:!1,isWebrtcForZLM:!1,isNakedFlow:!1,debug:!1,debugLevel:K,debugUuid:"",isMulti:!1,hotKey:!1,loadingTimeout:10,heartTimeout:10,timeout:10,pageVisibilityHiddenTimeout:300,loadingTimeoutReplay:!0,heartTimeoutReplay:!0,loadingTimeoutReplayTimes:3,heartTimeoutReplayTimes:3,heartTimeoutReplayUseLastFrameShow:!1,replayUseLastFrameShow:!1,supportDblclickFullscreen:!1,showBandwidth:!1,showPerformance:!1,mseCorrectTimeDuration:20,keepScreenOn:!0,isNotMute:!1,hasAudio:!0,hasVideo:!0,operateBtns:{fullscreen:!1,screenshot:!1,play:!1,audio:!1,record:!1,ptz:!1,quality:!1,zoom:!1,close:!1,scale:!1,performance:!1,aiFace:!1,aiObject:!1,fullscreenFn:null,fullscreenExitFn:null,screenshotFn:null,playFn:null,pauseFn:null,recordFn:null,recordStopFn:null},extendOperateBtns:[],contextmenuBtns:[],watermarkConfig:{},controlAutoHide:!1,hasControl:!1,loadingIcon:!0,loadingText:"",background:"",backgroundLoadingShow:!1,loadingBackground:"",decoder:"decoder-pro.js",decoderWASM:"",url:"",rotate:0,mirrorRotate:"none",playbackConfig:{playList:[],fps:"",showControl:!0,showRateBtn:!1,rateConfig:[],isCacheBeforeDecodeForFpsRender:!1,uiUsePlaybackPause:!1,isPlaybackPauseClearCache:!0,isUseFpsRender:!1,isUseLocalCalculateTime:!1,localOneFrameTimestamp:40,supportWheel:!1},qualityConfig:[],defaultStreamQuality:"",scaleConfig:["拉伸","缩放","正常"],forceNoOffscreen:!0,hiddenAutoPause:!1,protocol:2,demuxType:N,useWasm:!1,useWCS:!1,useSIMD:!0,wcsUseVideoRender:!0,wasmUseVideoRender:!0,mseUseCanvasRender:!1,hlsUseCanvasRender:!1,useMSE:!1,useOffscreen:!1,useWebGPU:!1,mseDecodeErrorReplay:!0,wcsDecodeErrorReplay:!0,wasmDecodeErrorReplay:!0,autoWasm:!0,webglAlignmentErrorReplay:!0,webglContextLostErrorReplay:!0,openWebglAlignment:!1,syncAudioAndVideo:!1,playbackDelayTime:1e3,playbackFps:25,playbackForwardMaxRateDecodeIFrame:4,playbackCurrentTimeMove:!0,useVideoRender:!0,useCanvasRender:!1,networkDelayTimeoutReplay:!1,recordType:p,checkFirstIFrame:!0,nakedFlowFps:25,audioEngine:null,isShowRecordingUI:!0,isShowZoomingUI:!0,useFaceDetector:!1,useObjectDetector:!1,ptzClickType:q,ptzStopEmitDelay:.3,ptzZoomShow:!1,ptzApertureShow:!1,ptzFocusShow:!1,ptzMoreArrow:!1,weiXinInAndroidAudioBufferSize:4800,isCrypto:!1,cryptoKey:"",cryptoIV:"",cryptoKeyUrl:"",autoResize:!1,useWebFullScreen:!1,ptsMaxDiff:3600,aiFaceDetectWidth:192,aiObjectDetectWidth:192,videoRenderSupportScale:!0,mediaSourceTsIsMaxDiffReplay:!0,controlHtml:""},J="init",X="initVideo",Z="initAudio",ee="audioCode",te="videoCode",ie="videoCodec",re="closeEnd",b={fullscreen:"fullscreen$2",webFullscreen:"webFullscreen",decoderWorkerInit:"decoderWorkerInit",play:"play",playing:"playing",pause:"pause",mute:"mute",load:"load",loading:"loading",zooming:"zooming",videoInfo:"videoInfo",timeUpdate:"timeUpdat
|
|||
|
|
ts is ${t.ts}, preTimestamp is ${this.preTimestamp},
|
|||
|
|
diff is ${e} and preTimestampDuration is ${this.preTimestampDuration}
|
|||
|
|
maybe trigger black screen or flower screen`)}if(0<this.preTimestamp&&t.ts<this.preTimestamp&&2===t.type&&36e5<this.preTimestamp-t.ts&&(this.player.debug.warn("CommonDemux",`pushBuffer video
|
|||
|
|
ts is ${t.ts}, preTimestamp is ${this.preTimestamp},
|
|||
|
|
diff is ${this.preTimestamp-t.ts} more than 3600000
|
|||
|
|
and resetAllDelay()`),this.resetAllDelay()),t.ts<=this.preTimestamp&&0<this.preTimestamp&&2===t.type&&this.player.debug.warn("CommonDemux",`pushBuffer video
|
|||
|
|
ts is ${t.ts} less than (or equal) preTimestamp is ${this.preTimestamp} and
|
|||
|
|
payloadBufferSize is ${e.byteLength} and prevPayloadBufferSize is `+this.prevPayloadBufferSize),s&&this.player.isDemuxDecodeFirstIIframeInit()){var a=this.getDelayNotUpdateDelay(t.ts);this.pushLatestDelay=a;const s=r+i;this.player._opt.useMSE?a>s&&this.delay<s&&0<this.delay&&this.hasIframeInBufferList()&&!1===this.isPushDropping&&!1===this.player.mseDecoder.getSourceBufferUpdating()&&(this.player.debug.warn("CommonDemux",`useMSE, pushLatestDelay is ${a} > ${r+i}, bufferList is ${this.bufferList.length}, delay is ${this.delay} and dropBuffer$2()`),this.dropBuffer$2()):a>s&&this.delay<s&&0<this.delay&&this.hasIframeInBufferList()&&!1===this.isPushDropping&&(this.player.debug.warn("CommonDemux",`useWCS, pushLatestDelay is ${a} > ${r+i},bufferList is ${this.bufferList.length}, delay is ${this.delay} and dropBuffer$2()`),this.dropBuffer$2())}2===t.type&&(0<this.preTimestamp&&(this.preTimestampDuration=t.ts-this.preTimestamp),this.prevPayloadBufferSize=e.byteLength,this.preTimestamp=t.ts),1===t.type?this.bufferList.push({ts:t.ts,payload:e,type:1}):2===t.type&&this.bufferList.push({ts:t.ts,cts:t.cts,payload:e,type:2,isIFrame:t.isIFrame})}}dropBuffer$2(){var e,t,i;0<this.bufferList.length&&(this.isPushDropping=!0,0<=(e=this.bufferList.findIndex(e=>_(e.isIFrame)&&2===e.type))?(this.bufferList=this.bufferList.slice(e),t=this.bufferList.shift(),i=this.getDelayNotUpdateDelay(t.ts),this._doDecoderDecode(t),this.isPushDropping=!1,this.player.debug.log("CommonDemux",`dropBuffer$2() iFrameIndex is ${e},and bufferList length is ${this.bufferList.length} and tempDelay is ${i} ,delay is ${this.delay} `)):this.isPushDropping=!1),0===this.bufferList.length&&(this.isPushDropping=!1)}clearBuffer(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0];this.player.debug.log("CommonDemux",`clearBuffer,buffer length is ${this.bufferList.length}, need clear is `+e),e&&(this.bufferList=[]),this.resetAllDelay(),this.dropping=!0}calcNetworkDelay(e){var t,i,r;this.player.isDemuxDecodeFirstIIframeInit()&&0<e&&(null===this.bufferStartDts?(this.bufferStartDts=e,this.bufferStartLocalTs=m()):e<this.bufferStartDts&&(this.player.debug.warn("CommonDemux",`calcNetworkDelay dts is ${e} and bufferStartDts is `+this.bufferStartDts),this.bufferStartDts=e,this.bufferStartLocalTs=m()),(r=(t=e-this.bufferStartDts)<(i=m()-this.bufferStartLocalTs)?i-t:0)>this.player._opt.networkDelay&&this.player._opt.playType===n&&(this.player.debug.warn("CommonDemux",`delay is more than networkDelay and now dts:${e},start dts is ${this.bufferStartDts}, vs start is ${t},local diff is ${i} ,delay is ${r}, _opt.networkDelay is `+this.player._opt.networkDelay),this.player.emit(b.networkDelayTimeout,r)),this.player.updateStats({netBuf:r}))}calcIframeIntervalTimestamp(e){var t;null===this.preIframeTs?this.preIframeTs=e:this.preIframeTs<e&&(t=e-this.preIframeTs,this.player&&(this.player.videoIframeIntervalTs=t),this.preIframeTs=e)}getNotDroppingDelayTs(){return this.player._opt.videoBuffer+this.player._opt.videoBufferDelay/2}getMaxDelayTs(){return this.player._opt.videoBuffer+this.player._opt.videoBufferDelay}getPushLatestDelay(){return this.pushLatestDelay}hasIframeInBufferList(){return this.bufferList.some(e=>2===e.type&&e.isIFrame)}getInputByteLength(){return 0}getIsStreamTsMoreThanLocal(){return this.isStreamTsMoreThanLocal}close(){}reset(){}}const Hi=[[Uint8Array,Int8Array],[Uint16Array,Int16Array],[Uint32Array,Int32Array,Float32Array],[Float64Array]],Wi=Symbol(32),Vi=Symbol(16),$i=Symbol(8),Ki=new Map;Hi.forEach((e,t)=>e.forEach(e=>Ki.set(e,t)));class qi{constructor(e){this.g=e,this.consumed=0,e&&(this.need=e.next().value)}fillFromReader(i){return e=this,l=function*(){var{done:e,value:t}=yield i.read();return e?void this.close():(this.write(t),this.fillFromReader(i))},new(o=(o=n=void 0)||Promise)(function(i,t){function r(e){try{a(l.next(e))}catch(e){t(e)}}function s(e){try{a(l.throw(e))}catch(e){t(e)}}function a(e){var t;e.done?i(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(r,s)}a((l=l.apply(e,n||[])).next())});var e,n,o,l}consume(){this.buffe
|
|||
|
|
<i class="jessibuca-icon jessibuca-icon-${t}"></i>
|
|||
|
|
${Yr[t]?`<span class="icon-title-tips"><span class="icon-title">${Yr[t]}</span></span>`:""}
|
|||
|
|
`,e),{});function Jr(e,t){let i=!1;return e.forEach(e=>{i||e.startTimestamp<=t&&e.endTimestamp>t&&(i=!0)}),i}function Xr(e,t,i){let r=0<arguments.length&&void 0!==e?e:[],s=1<arguments.length&&void 0!==t?t:[],a=2<arguments.length?i:void 0;const n=r.length,o=s.length,l=Math.max(n,o),c=2e3,d=Math.ceil(l/c);let u=0,h=0;!function e(){let t="",i="";for(let e=0;e<c;e++){const a=r[h],c=(a&&(t+=`
|
|||
|
|
<div class="jessibuca-playback-time-minute-one${a.hasRecord?" active":""}${a.isStart?" start":""}" data-has-record="${a.hasRecord}"
|
|||
|
|
data-time="${a.timestamp}" data-type="${a.dataType}">
|
|||
|
|
<span class="jessibuca-playback-time-title-tips ${h>n-60?"jessibuca-playback-time-title-tips-left":""}"><span class="jessibuca-playback-time-title">${a.title}</span></span>
|
|||
|
|
</div>
|
|||
|
|
`),s[h]);c&&(i+=`
|
|||
|
|
<div class="jessibuca-playback-time-hour" data-hour="${c.hour}" data-min="${c.min}" data-second="${c.second}"><span class="jessibuca-playback-time-hour-text">${c.title}</span></div>
|
|||
|
|
`),h+=1}t&&a.$playbackTimeListOne.insertAdjacentHTML("beforeend",t),i&&a.$playbackTimeListSecond.insertAdjacentHTML("beforeend",i),(u+=1)<d&&(a.rafId=window.requestAnimationFrame(e))}()}function Zr(e,t){Xr(function(e){var i,r,s,a=0<arguments.length&&void 0!==e?e:[],n=[],o=(a[0]||{}).startTimestamp;for(let t=0;t<1440;t++){var l=t%60==0;let e=!1;o&&(e=Jr(a,(i=o,r=t,s=void 0,s=Math.floor(r/60)%60,r=Math.floor(r%60),new Date(i).setHours(s,r,0,0)))),n.push({title:function(e,t){let i="";var r;return-1<e&&(r=Math.floor(e/60)%60,e=e%60,e=Math.round(e),i=r<10?"0"+r+":":r+":",e<10&&(i+="0"),i+=e,ft(t)||(t<10&&(t="0"+t),i+=":"+t)),i}(t),timestamp:t,dataType:"min",hasRecord:e,isStart:l})}return n}(e),function(){var i=[];for(let t=0;t<24;t++){let e=t+":00";t<10&&(e="0"+e),i.push({title:e,hour:t,min:0,second:0})}return i}(),t)}var es=(A,y)=>{const s=A["events"]["proxy"],a=document.createElement("object");a.setAttribute("aria-hidden","true"),a.setAttribute("tabindex",-1),a.type="text/html",a.data="about:blank",w(a,{display:"block",position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:"-1"});let n=A.width,e=A.height;const t=ut(()=>{A.width===n&&A.height===e||(n=A.width,e=A.height,A.emit(b.resize),l())},500),i=(s(a,"load",()=>{s(a.contentDocument.defaultView,"resize",()=>{t()})}),A.$container.appendChild(a),A.on(b.destroy,()=>{A.$container.removeChild(a)}),A.on(b.volumechange,()=>{var e,t,i;0===(e=A.volume)?(w(y.$volumeOn,"display","none"),w(y.$volumeOff,"display","flex"),w(y.$volumeHandle,"top","48px")):y.$volumeHandle&&y.$volumePanel&&(t=tt(y.$volumePanel,"height")||60,i=tt(y.$volumeHandle,"height"),w(y.$volumeHandle,"top",t-(t-i)*e-i+"px"),w(y.$volumeOn,"display","flex"),w(y.$volumeOff,"display","none")),y.$volumePanelText&&(y.$volumePanelText.innerHTML=parseInt(100*e))}),A.on(b.loading,e=>{w(y.$loading,"display",e?"flex":"none"),(C(A._opt.backgroundLoadingShow)&&_(e)||C(e))&&w(y.$poster,"display","none"),e&&w(y.$playBig,"display","none"),E()||e||(y.$loadingBgImage.width=0,y.$loadingBgImage.height=0,y.$loadingBgImage.src="",w(y.$loadingBg,"display","none"))}),e=>{A.fullscreen&&S(e)!==A.$container||r()}),r=e=>{e=gt(e)?e:A.fullscreen;w(y.$fullscreenExit,"display",e?"flex":"none"),w(y.$fullscreen,"display",e?"none":"flex")},o=()=>A._opt.playType===v&&A._opt.playbackConfig.showControl,l=i=>{E()&&y.$controls&&A._opt.useWebFullScreen&&setTimeout(()=>{if(A.fullscreen){const i=o()?48:38;var e=A.height/2-A.width+i/2,t=A.height/2-i/2;y.$controls.style.transform=`translateX(${-e}px) translateY(-${t}px) rotate(-90deg)`}else y.$controls.style.transform="translateX(0) translateY(0) rotate(0)";i&&i()},10)};try{f.on("change",i),A.events.destroys.push(()=>{f.off("change",i)})}catch(A){}A.on(b.webFullscreen,e=>{E()&&(r(e),l(()=>{d()}))}),A.on(b.recording,()=>{A.playing&&(w(y.$record,"display",A.recording?"none":"flex"),w(y.$recordStop,"display",A.recording?"flex":"none"),A._opt.hasControl||A._opt.isShowRecordingUI)&&w(y.$recording,"display",A.recording?"flex":"none")}),A.on(b.recordingTimestamp,e=>{y.$recordingTime&&(y.$recordingTime.innerHTML=vt(e))}),A.on(b.zooming,()=>{A.playing&&(w(y.$zoom,"display",A.zooming?"none":"flex"),w(y.$zoomStop,"display",A.zooming?"flex":"none"),A._opt.hasControl||A._opt.isShowZoomingUI)&&w(y.$zoomControls,"display",A.zooming?"flex":"none")}),A.on(b.playing,e=>{c(e)});const c=t=>{w(y.$play,"display",t?"none":"flex"),w(y.$playBig,"display",t?"none":"block"),w(y.$pause,"display",t?"flex":"none"),w(y.$screenshot,"display",t?"flex":"none"),w(y.$record,"display",t?"flex":"none"),w(y.$qualityMenu,"display",t?"flex":"none"),w(y.$volume,"display",t?"flex":"none"),w(y.$ptz,"display",t?"flex":"none"),w(y.$zoom,"display",t?"flex":"none"),w(y.$scaleMenu,"display",t?"flex":"none"),w(y.$faceDetect,"display",t?"flex":"none"),w(y.$controlHtml,"display",t?"flex":"none"),A.isPlayback()&&w(y.$speedMenu,"display",t?"flex":"none"),r(),y.extendBtnList.forEach(e=>{e.$iconWrap&&w(e.$iconWrap,"display",t?"flex":"none"),e.$activeIconWrap&&w(e.$activeIconWrap,"display","none")
|
|||
|
|
<div class="jessibuca-quality-menu-item" data-quality="${e}">${e}</div>
|
|||
|
|
`}),t&&(y.$qualityMenuList.insertAdjacentHTML("beforeend",t),Object.defineProperty(y,"$qualityMenuItems",{value:A.$container.querySelectorAll(".jessibuca-quality-menu-item")}),setTimeout(()=>{var e=h[0];A.streamQuality=e},0))}A.streamQuality&&s(A.streamQuality)}if(A._opt.operateBtns.scale&&0<A._opt.scaleConfig.length){A.on(b.viewResizeChange,e=>{s(e)});const s=i=>{var e=A._opt.scaleConfig[i];y.$scaleText.innerText=e,y.$scaleMenuItems.forEach(e=>{var t=e.dataset.scale;e.classList.remove("jessibuca-scale-menu-item-active"),T(t)===T(i)&&e.classList.add("jessibuca-scale-menu-item-active")})};{var u=A._opt.scaleConfig||[];let i="";u.forEach((e,t)=>{i+=`
|
|||
|
|
<div class="jessibuca-scale-menu-item" data-scale="${t}">${e}</div>
|
|||
|
|
`}),i&&(y.$scaleMenuList.insertAdjacentHTML("beforeend",i),Object.defineProperty(y,"$scaleMenuItems",{value:A.$container.querySelectorAll(".jessibuca-scale-menu-item")}))}s(A.scaleType)}if(A.isPlayback()&&A._opt.playbackConfig.showRateBtn&&0<A._opt.playbackConfig.rateConfig.length){A.on(b.playbackRateChange,e=>{s(e)});const s=i=>{var e=A._opt.playbackConfig.rateConfig.find(e=>T(e.value)===T(i));e&&(y.$speedText.innerText=e.label,y.$speedMenuItems.forEach(e=>{var t=e.dataset.speed;e.classList.remove("jessibuca-speed-menu-item-active"),T(t)===T(i)&&e.classList.add("jessibuca-speed-menu-item-active")}))};{u=A._opt.playbackConfig.rateConfig;let i="";u.forEach((e,t)=>{i+=`
|
|||
|
|
<div class="jessibuca-speed-menu-item" data-speed="${e.value}">${e.label}</div>
|
|||
|
|
`}),i&&(y.$speedMenuList.insertAdjacentHTML("beforeend",i),Object.defineProperty(y,"$speedMenuItems",{value:A.$container.querySelectorAll(".jessibuca-speed-menu-item")}))}const a=A.playback?A.playback.playbackRate:1;s(a)}A.on(b.stats,function(){var e,t,i,r,s,a,n,o,l,c,d,u,h,p,f,g,m=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};A._opt.showPerformance?(w(y.$performancePanel,"display","block"),y.$performancePanel.innerHTML="",e=A.video&&A.video.videoInfo||{},t=A.audio&&A.audio.audioInfo||{},i=A._times||{},r=A.getRenderType(),s=A.getCanvasRenderType(),a=A.getDecodeType(),n=A.getDemuxType(),o=A.getStreamType(),l=A.getAudioEngineType(),u=A.getRecordingDuration(),h=A.getRecordingByteLength(),c=A.isAudioPlaybackRateSpeed(),d=A.videoIframeIntervalTs,u=vt(u),h=null==(p=h)||""==p?"0 Bytes":(f=new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"),g=0,p=parseFloat(p),g=Math.floor(Math.log(p)/Math.log(1024)),(p/Math.pow(1024,g)).toFixed(2)+f[g]),p=A.isPlayback()?"录播":"直播",f=m.isDropping,g=A.control?A.control.kbpsShow:"0 KB/s",p=`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>版本 "5-3-2023"</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>播放模式 ${p}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.isPlayback()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>播放倍率 ${A.playback.rate}倍</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>播放模式 ${A.playback.isUseFpsRender?"固定FPS":"动态FPS"}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.playback.isUseFpsRender?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>固定FPS ${A.video.getStreamFps()}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>解封装模式 ${H[n]}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>解码模式 ${a}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>渲染组件 ${r}</span>
|
|||
|
|
</div>
|
|||
|
|
${r===W?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>渲染引擎 ${s}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>网络请求组件 ${o}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频格式 ${e.encType||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频(宽x高) ${e.width||"-"}x${e.height||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.isPlayer()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频GOP(ms) ${d||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频格式 ${ue[t.encType]||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频引擎 ${l||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频通道 ${t.channels||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频采样率 ${t.sampleRate||"-"}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.isPlayer()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>播放器初始化(ms) ${i.playTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>开始请求地址(ms) ${i.streamTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>请求响应(ms) ${i.streamResponseTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>解封装(ms) ${i.demuxTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>解码(ms) ${i.decodeTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>页面开始渲染(ms) ${i.videoTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>初始化到页面渲染(ms) ${i.allTimestamp}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.recording?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频录制时间 ${u}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频录制大小 ${h}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频码率(bit) ${m.abps}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频码率(bit) ${m.vbps}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频帧率(fps) ${m.fps}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频峰值帧率(fps) ${m.maxFps}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>解码帧率(fps) ${m.dfps}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频缓冲帧 ${m.audioBuffer}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.isPlayer()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频待解码帧 ${m.demuxBuffer}</span>
|
|||
|
|
</div>
|
|||
|
|
`:`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>缓存时长(ms) ${m.playbackCacheDataDuration}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频待渲染帧 ${m.playbackVideoBuffer}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频待解码帧 ${m.demuxBuffer}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频待解码帧 ${m.audioDemuxBuffer}</span>
|
|||
|
|
</div>
|
|||
|
|
`}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>待解封装数据(byte) ${m.flvBuffer}</span>
|
|||
|
|
</div>
|
|||
|
|
${A._opt.useMSE?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>MSE缓冲时长(ms) ${m.mseDelay}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>MSE解码间隔(ms) ${m.mseDecodeDiffTimes}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>MSE解码时间(ms) ${m.mseTs}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>MSE播放模式 ${1<m.mseDecodePlaybackRate?"加速":"正常"}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${A._opt.useWCS?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>WCS解码间隔(ms) ${m.wcsDecodeDiffTimes}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${A._opt.isHls?`<div class="jessibuca-performance-item">
|
|||
|
|
<span>HLS缓冲时长(ms) ${m.hlsDelay}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>HLS播放模式 ${1<m.hlsDecodePlaybackRate?"加速":"正常"}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${A.isPlayer()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>网络延迟(ms) ${m.netBuf}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>缓冲时长(ms) ${m.buf}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>最新缓冲时长(ms) ${m.pushLatestDelay}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频显示时间(ms) ${m.ts}</span>
|
|||
|
|
</div>
|
|||
|
|
${A._opt.hasAudio&&A.isAudioNotMute()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频显示时间(ms) ${m.audioTs}</span>
|
|||
|
|
</div>
|
|||
|
|
${A._opt.hasVideo?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音视频同步时间戳(ms) ${m.ts-m.audioTs}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>音频播放模式 ${c?"加速":"正常"}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>视频解码时间(ms) ${m.dts}</span>
|
|||
|
|
</div>
|
|||
|
|
${A.isPlayer()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>解码前-解码后延迟(ms) ${m.delayTs}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>总延迟(网络+解码)(ms) ${m.totalDelayTs}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${A.isPlayer()&&m.isStreamTsMoreThanLocal?'<div class="jessibuca-performance-item">\n <span>是否超过一倍率推流 是</span>\n </div>\n ':""}
|
|||
|
|
${A.isPlayer()?`
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>是否在丢帧 ${f}</span>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>网速 ${g}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item">
|
|||
|
|
<span>播放时长(s) ${vt(m.pTs)}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-performance-item-block"></div>
|
|||
|
|
`,y.$performancePanel.insertAdjacentHTML("beforeend",p)):(y.$performancePanel.innerHTML="",w(y.$performancePanel,"display","none"))}),A.on(b.togglePerformancePanel,e=>{w(y.$performance,"display",e?"none":"flex"),w(y.$performanceActive,"display",e?"flex":"none")}),A.on(b.faceDetectActive,e=>{w(y.$faceDetect,"display",e?"none":"flex"),w(y.$faceDetectActive,"display",e?"flex":"none")})};function ts(e,t){var i,r,t=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(i=document.head||document.getElementsByTagName("head")[0],(r=document.createElement("style")).type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e)))}function is(e,t){t instanceof Element?e.appendChild(t):e.insertAdjacentHTML("beforeend",String(t)),e.lastElementChild||e.lastChild}function M(e,t,i){e.style[t]=i}function rs(e,t){return e.composedPath&&-1<e.composedPath().indexOf(t)}function t(e){let t=!1;return e&&e.parentNode&&(e.parentNode.removeChild(e),t=!0),t}ts('@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes magentaPulse{0%{background-color:#630030;-webkit-box-shadow:0 0 9px #333}50%{background-color:#a9014b;-webkit-box-shadow:0 0 18px #a9014b}to{background-color:#630030;-webkit-box-shadow:0 0 9px #333}}.jessibuca-container .jessibuca-icon{cursor:pointer;width:16px;height:16px;display:inline-block}.jessibuca-container .jessibuca-ptz-controls{position:absolute;width:156px;height:156px;visibility:hidden;opacity:0;border-radius:78px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATgAAAE4BAMAAAA9UfJZAAAAMFBMVEUAAABHcEy0tLRZWVmysrKoqKi1tbWvr6+2traBgYG1tbWWlpa1tbW1tbVUVFS1tbVGCHqkAAAAD3RSTlMzAO9U3LSWySp3aZcVRDUDw823AAAJYUlEQVR42u3d32sbVxYH8EPHxgg/lBsa7SBkukmpSbwLI2KbEPpgZ5MQtwmM0wRMmgdhP6RgEuwlSVnYlmGMYaEvMU1KKX4QNq0pocVmm7CYfRBaQguFpbgPKRSC/4V2LGliO+bulWKrkvVrftyZ+WbxeTRG+nDnnnNmRjP3EpMR6tMH18du/0Xj1tGz5+9cf/DUlPKx5PsTkr8s3eZ1cX7ym1zkuI/f1wTFunNt9fP+FIno7/98/tFY+Y8ffBUlLrmkl2Cr96guTv27BMxP5iLCqUvi68+tpqhJKPNXBH3SjACnfimm/7Wmsl3fI/FP75lh457oPH+1Da3M+1T8481QcT0T7UetevR618LDPdH4hTlyHLGH3LoZEk6d4PlvyVW8pfNeMwzcDwa/kCKXoTzk9tfB455o1mXyEIOa+0PrFvcFt+fIU8QM/k6guOQifzNFHkN5l/flgsOJVHibfMR9l2nhBqem+VXyFZ/xghkMTp3il8lnDPKiGQROhs2lzjEuKcVW1uWk4ybk2Eq63pxk3CK/RZLiJO+Ti/vZXw3ZX1E+kon7jv+JJMY/+Q15uIRWIKmRthZk4VTDTsnFKYZtSsItWiskObq1Pjm4f8gqIrUF5W8ycAl+nAKIT/iCf1zSKFAgkW4/7drifrLmgsHF2k87alvhblFAcbJttWuDU/VtCiyyedMXbjGfCg6n6H1+cHE+TQFGFx/3jksa2xRoZO2cZ9xsUJn6e8aOeMX1aGco4Biw1jzilm0KPNJb3nBxvhI8rrtVTlCLK5ptCiEyBS+474POhr2c+NA9Lqm/QaHEiXzONW42yN5Q2ydG3OLU4MvI7+XEdImbCWvgSkN3zB1O1YYptOhoNnRNcDM2hRjGMTc4VZsOE9fVZOioyYyjUKPJrKPGNW44XFxX41rXEPc4vFTdS9iLTnFJ4wyFHAO2U1zcSoWNU7RLDnFTb1DocaLoDJfgc+HjYo3uTjTArW9TBJHdcYJTtdEocJ0NCnE97nGBIon0RQc4YzgaXIfdHhdBHdmrJuNtceubFFFkdtrhVG0lKlx3XUrsxz22KbIwLrbBTQ1Hhxsotsb18FR0OIWvtcT9Z5sijOyfW+KM6ShxXXYrXMJKRYlTtIUWuLubFGlknrXAGaPR4jrt5riERRFH7XGtwc1sRo3LHGuKi/qo7j+uhJOr9flKMBW4QR2uxk1NR4/rKjbGRdpXG/bXKtxrAEdVHNfTDXHLf0TAvbLVCJfU5hBwMSvXABfPE0To4w1wP25i4DLPG+CmRjFwncV6nIpQSF4UE7MOd7hAIJG+VIe7u4GCG3pWh0uPouA6C/txMFOuetIR3JSrmnQEN+WqJh2BVbmaSreLS+JMudKky9Xg4jYBRXq8BndoEwmXOVKDWx5GwnVs1eD0OSRcLF+N67EIKrS1Klx8GwuXHa/C/biBhRt6XoVbnsbCdW1V4bDyoZIRZZwKlg8iI8wKLl5Aw73oEWXcoQ003NCRCm59GA3XsVPBTa2g4bqLFZyWQsMp1h6uJ09woa/t4tCaV6WBEWSy7qYrQSbrbroS2MVNzUUOAXbWSnel0sU+AUbpsl/gEjYizlgo4w5vI+Kyl8o4xEryopYI3N1hRFzHszJueRQR17lVxqXnEHGxQhmHd06yd15CgBcQlcsIYokCJi69IHDxbUycOGki9toGJm7otMC9/ism7tXfBA6zBperMIHW4HIVJsDrwsrVIYE2CNEibIHDbBDlFkFJ0AYhWkSOemxUnLFGqN2r1L8ItXuV+hfFN1FxmXH6wwYqbuivdAgXd4RQ+36p8xNq3y91flqfRsV17dD6KCquc4eWcXFbtLyCiusu0hQ0bg4VFytSGhdXICOFilNs0nFx+QOcZ5xGsGEd4DzjOC6OH+A847QD3P9jtuJ2CGjcQeP3gYM+2YQ+TYe+wMG+NETGQd+OgL6RA30LDPrm4eu/ouJe/Q37hjX0rX7oH0mgf16C/mEO+idN6B+DoX9Gx34AAfrRDeiHXqAfF0Lt/OUHrVAfUcucRn+4D/qxSOgHSqEfxcV+iBn68W/EV3AqD85Dv3IA/bIG9GsumC8IaSb+q1XYL6VBv84H/SIk9Cuk0C/fQr+2jP3CN/Sr8tCLDEAvzwC9sAX0kiDYi6lAL0MDvYAP9NJH0ItGYS+3Bb1QGVaP2LfEG/TieNDLCmIvyAi9lCX0IqDQy6diLzwLvWQv9GLH0MtER76rRqWxPgdemtwYf9kWdYdeDh97IwHoLRigN6/A3vYDesMU6K1msDfpgd7eiOmjSEf
|
|||
|
|
<div class="jessibuca-controls-center">
|
|||
|
|
<div class="jessibuca-controls-playback-time">
|
|||
|
|
<div class="jessibuca-controls-playback-time-inner">
|
|||
|
|
<div class="jessibuca-controls-playback-time-scroll">
|
|||
|
|
<div class="jessibuca-controls-playback-time-list">
|
|||
|
|
<div class="jessibuca-playback-time-day">
|
|||
|
|
<div class="jessibuca-playback-time-one-wrap"></div>
|
|||
|
|
<div class="jessibuca-playback-time-second-wrap"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-controls-playback-current-time">
|
|||
|
|
<div class="jessibuca-controls-playback-current-time-text">00:00:00</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-controls-playback-btns">
|
|||
|
|
<div class="jessibuca-controls-item jessibuca-playback-narrow">${I.narrow}</div>
|
|||
|
|
<div class="jessibuca-controls-item jessibuca-playback-expand">${I.expand}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`,l.$container.insertAdjacentHTML("beforeend",`
|
|||
|
|
${d.background?`<div class="jessibuca-poster" style="background-image: url(${d.background})"></div>`:""}
|
|||
|
|
<div class="jessibuca-loading-bg">
|
|||
|
|
<img class="jessibuca-loading-bg-image" src="" alt="">
|
|||
|
|
</div>
|
|||
|
|
${d.loadingIcon?`
|
|||
|
|
<div class="jessibuca-loading">
|
|||
|
|
${I.loading}
|
|||
|
|
${d.loadingText?`<div class="jessibuca-loading-text">${d.loadingText}</div>`:""}
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${d.hasControl&&u.play?'<div class="jessibuca-play-big"></div>':""}
|
|||
|
|
${d.hasControl&&u.ptz?`
|
|||
|
|
<div class="jessibuca-ptz-controls">
|
|||
|
|
<div class="jessibuca-ptz-bg-active"></div>
|
|||
|
|
<div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-up" data-arrow="up"></div>
|
|||
|
|
<div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-right" data-arrow="right"></div>
|
|||
|
|
<div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-down" data-arrow="down"></div>
|
|||
|
|
<div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-left" data-arrow="left"></div>
|
|||
|
|
${d.ptzMoreArrow?'\n <div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-left-up" data-arrow="left-up"></div>\n <div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-right-up" data-arrow="right-up"></div>\n <div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-left-down" data-arrow="left-down"></div>\n <div class="jessibuca-ptz-arrow jessibuca-ptz-arrow-right-down" data-arrow="right-down"></div>\n ':""}
|
|||
|
|
<div class="jessibuca-ptz-control"></div>
|
|||
|
|
${d.ptzZoomShow?'\n <div class="jessibuca-ptz-expand"></div>\n <div class="jessibuca-ptz-narrow"></div>\n ':""}
|
|||
|
|
|
|||
|
|
${d.ptzApertureShow?'\n <div class="jessibuca-ptz-aperture-far"></div>\n <div class="jessibuca-ptz-aperture-near"></div>\n ':""}
|
|||
|
|
${d.ptzFocusShow?'\n <div class="jessibuca-ptz-focus-far"></div>\n <div class="jessibuca-ptz-focus-near"></div>\n ':""}
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${d.hasVideo?`
|
|||
|
|
<div class="jessibuca-zoom-controls">
|
|||
|
|
<div class="jessibuca-zoom-narrow">${I.narrow}</div>
|
|||
|
|
<div class="jessibuca-zoom-tips">电子放大</div>
|
|||
|
|
<div class="jessibuca-zoom-expand">${I.expand}</div>
|
|||
|
|
<div class="jessibuca-zoom-stop2">${I.zoomStop}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-recording">
|
|||
|
|
<div class="jessibuca-recording-red-point"></div>
|
|||
|
|
<div class="jessibuca-recording-time">00:00:00</div>
|
|||
|
|
<div class="jessibuca-icon-recordStop jessibuca-recording-stop">${I.recordStop}</div>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
|
|||
|
|
${d.hasControl?`
|
|||
|
|
<div class="jessibuca-controls">
|
|||
|
|
<div class="jessibuca-controls-bottom">
|
|||
|
|
<div class="jessibuca-controls-left">
|
|||
|
|
${d.showBandwidth?'<div class="jessibuca-controls-item jessibuca-speed"></div>':""}
|
|||
|
|
<div class="jessibuca-controls-item-html">${d.controlHtml}</div>
|
|||
|
|
</div>
|
|||
|
|
${d.playType===v&&d.playbackConfig.showControl?h:""}
|
|||
|
|
|
|||
|
|
<div class="jessibuca-controls-right">
|
|||
|
|
${d.playType===v&&d.playbackConfig.showRateBtn?'\n <div class="jessibuca-controls-item-wrap">\n <div class="jessibuca-controls-item jessibuca-speed-menu">\n <div class="jessibuca-speed-icon-text"></div>\n <div class="jessibuca-speed-menu-list"></div>\n </div>\n </div>\n ':""}
|
|||
|
|
${u.close?`<div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-close">${I.close}</div></div>`:""}
|
|||
|
|
${u.performance?`<div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-performance">${I.performance}</div><div class="jessibuca-controls-item jessibuca-performance-active">${I.performanceActive}</div></div>`:""}
|
|||
|
|
${u.aiFace?`<div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-face">${I.face}</div><div class="jessibuca-controls-item jessibuca-face-active">${I.faceActive}</div></div>`:""}
|
|||
|
|
${u.quality?'\n <div class="jessibuca-controls-item-wrap">\n <div class="jessibuca-controls-item jessibuca-quality-menu">\n <div class="jessibuca-quality-icon-text"></div>\n <div class="jessibuca-quality-menu-list"></div>\n </div>\n </div>\n ':""}
|
|||
|
|
${u.scale?'\n <div class="jessibuca-controls-item-wrap">\n <div class="jessibuca-controls-item jessibuca-scale-menu">\n <div class="jessibuca-scale-icon-text"></div>\n <div class="jessibuca-scale-menu-list"></div>\n </div>\n </div>\n ':""}
|
|||
|
|
${u.audio?`
|
|||
|
|
<div class="jessibuca-controls-item-wrap">
|
|||
|
|
<div class="jessibuca-controls-item jessibuca-volume">
|
|||
|
|
${I.audio}
|
|||
|
|
${I.mute}
|
|||
|
|
<div class="jessibuca-volume-panel-wrap">
|
|||
|
|
<div class="jessibuca-volume-panel">
|
|||
|
|
<div class="jessibuca-volume-panel-handle"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jessibuca-volume-panel-text"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
${u.play?`<div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-play">${I.play}</div><div class="jessibuca-controls-item jessibuca-pause">${I.pause}</div></div>`:""}
|
|||
|
|
${u.screenshot?`<div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-screenshot">${I.screenshot}</div></div>`:""}
|
|||
|
|
${u.record?` <div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-record">${I.record}</div><div class="jessibuca-controls-item jessibuca-record-stop">${I.recordStop}</div></div>`:""}
|
|||
|
|
${u.ptz?` <div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-ptz">${I.ptz}</div><div class="jessibuca-controls-item jessibuca-ptz-active">${I.ptzActive}</div></div>`:""}
|
|||
|
|
${u.zoom?` <div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-zoom">${I.zoom}</div><div class="jessibuca-controls-item jessibuca-zoom-stop">${I.zoomStop}</div></div>`:""}
|
|||
|
|
${u.fullscreen?`<div class="jessibuca-controls-item-wrap"><div class="jessibuca-controls-item jessibuca-fullscreen">${I.fullscreen}</div><div class="jessibuca-controls-item jessibuca-fullscreen-exit">${I.fullscreenExit}</div></div>`:""}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`:""}
|
|||
|
|
<div class="jessibuca-performance-panel"></div>
|
|||
|
|
<div class="jessibuca-contextmenus"></div>
|
|||
|
|
`),Object.defineProperty(c,"$poster",{value:l.$container.querySelector(".jessibuca-poster")}),Object.defineProperty(c,"$loadingBg",{value:l.$container.querySelector(".jessibuca-loading-bg")}),Object.defineProperty(c,"$loadingBgImage",{value:l.$container.querySelector(".jessibuca-loading-bg-image")}),Object.defineProperty(c,"$loading",{value:l.$container.querySelector(".jessibuca-loading")}),Object.defineProperty(c,"$play",{value:l.$container.querySelector(".jessibuca-play")}),Object.defineProperty(c,"$playBig",{value:l.$container.querySelector(".jessibuca-play-big")}),Object.defineProperty(c,"$recording",{value:l.$container.querySelector(".jessibuca-recording")}),Object.defineProperty(c,"$recordingTime",{value:l.$container.querySelector(".jessibuca-recording-time")}),Object.defineProperty(c,"$recordingStop",{value:l.$container.querySelector(".jessibuca-recording-stop")}),Object.defineProperty(c,"$pause",{value:l.$container.querySelector(".jessibuca-pause")}),Object.defineProperty(c,"$controls",{value:l.$container.querySelector(".jessibuca-controls")}),Object.defineProperty(c,"$controlsInner",{value:l.$container.querySelector(".jessibuca-controls-bottom")}),Object.defineProperty(c,"$controlsLeft",{value:l.$container.querySelector(".jessibuca-controls-left")}),Object.defineProperty(c,"$controlsRight",{value:l.$container.querySelector(".jessibuca-controls-right")}),Object.defineProperty(c,"$volume",{value:l.$container.querySelector(".jessibuca-volume")}),Object.defineProperty(c,"$volumePanelWrap",{value:l.$container.querySelector(".jessibuca-volume-panel-wrap")}),Object.defineProperty(c,"$volumePanelText",{value:l.$container.querySelector(".jessibuca-volume-panel-text")}),Object.defineProperty(c,"$volumePanel",{value:l.$container.querySelector(".jessibuca-volume-panel")}),Object.defineProperty(c,"$volumeHandle",{value:l.$container.querySelector(".jessibuca-volume-panel-handle")}),Object.defineProperty(c,"$volumeOn",{value:l.$container.querySelector(".jessibuca-icon-audio")}),Object.defineProperty(c,"$volumeOff",{value:l.$container.querySelector(".jessibuca-icon-mute")}),Object.defineProperty(c,"$fullscreen",{value:l.$container.querySelector(".jessibuca-fullscreen")}),Object.defineProperty(c,"$fullscreenExit",{value:l.$container.querySelector(".jessibuca-fullscreen-exit")}),Object.defineProperty(c,"$record",{value:l.$container.querySelector(".jessibuca-record")}),Object.defineProperty(c,"$recordStop",{value:l.$container.querySelector(".jessibuca-record-stop")}),Object.defineProperty(c,"$screenshot",{value:l.$container.querySelector(".jessibuca-screenshot")}),Object.defineProperty(c,"$speed",{value:l.$container.querySelector(".jessibuca-speed")}),Object.defineProperty(c,"$controlHtml",{value:l.$container.querySelector(".jessibuca-controls-item-html")}),Object.defineProperty(c,"$playbackTime",{value:l.$container.querySelector(".jessibuca-controls-playback-time")}),Object.defineProperty(c,"$playbackTimeInner",{value:l.$container.querySelector(".jessibuca-controls-playback-time-inner")}),Object.defineProperty(c,"$playbackTimeScroll",{value:l.$container.querySelector(".jessibuca-controls-playback-time-scroll")}),Object.defineProperty(c,"$playbackTimeList",{value:l.$container.querySelector(".jessibuca-controls-playback-time-list")}),Object.defineProperty(c,"$playbackTimeListOne",{value:l.$container.querySelector(".jessibuca-playback-time-one-wrap")}),Object.defineProperty(c,"$playbackTimeListSecond",{value:l.$container.querySelector(".jessibuca-playback-time-second-wrap")}),Object.defineProperty(c,"$playbackCurrentTime",{value:l.$container.querySelector(".jessibuca-controls-playback-current-time")}),Object.defineProperty(c,"$playbackCurrentTimeText",{value:l.$container.querySelector(".jessibuca-controls-playback-current-time-text")}),Object.defineProperty(c,"$controlsPlaybackBtns",{value:l.$container.querySelector(".jessibuca-controls-playback-btns")}),Object.defineProperty(c,"$playbackNarrow",{value:l.$container.querySelector(".jessibuca-playback-narrow")}),Object.defineProperty(c,"$playbackExpand",{value:l.$container.qu
|
|||
|
|
<div class="jessibuca-controls-item-wrap">
|
|||
|
|
${t.icon?`<div class="jessibuca-controls-item jessibuca-control-extend-${i}">
|
|||
|
|
<i class="jessibuca-icon jessibuca-icon-extend-${i}"></i>
|
|||
|
|
${t.iconTitle?`
|
|||
|
|
<span class="icon-title-tips"><span class="icon-title">${t.iconTitle}</span></span>
|
|||
|
|
`:""}
|
|||
|
|
</div>`:""}
|
|||
|
|
${t.activeIcon?`<div class="jessibuca-controls-item jessibuca-control-extend-${i}-active">
|
|||
|
|
<i class="jessibuca-icon jessibuca-icon-extend-${i}-active"></i>
|
|||
|
|
${t.activeIconTitle?`
|
|||
|
|
<span class="icon-title-tips"><span class="icon-title">${t.activeIconTitle}</span></span>
|
|||
|
|
`:""}
|
|||
|
|
</div>`:""}
|
|||
|
|
</div>
|
|||
|
|
`,n=Array.from(r.children)[t.index],o=(n?n.insertAdjacentHTML("beforebegin",a):is(r,a),t.icon?r.querySelector(".jessibuca-icon-extend-"+i):null),l=t.icon?r.querySelector(".jessibuca-control-extend-"+i):null,c=t.activeIcon?r.querySelector(`.jessibuca-icon-extend-${i}-active`):null,d=t.activeIcon?r.querySelector(`.jessibuca-control-extend-${i}-active`):null,{proxy:u}=this.player["events"];t.icon&&(M(o,"background",`url(${t.icon}) no-repeat center`),M(o,"background-size","100% 100%"),M(l,"display","none"),t.iconHover)&&(u(o,"mouseover",()=>{M(o,"background",`url(${t.iconHover}) no-repeat center`),M(o,"background-size","100% 100%")}),u(o,"mouseout",()=>{M(o,"background",`url(${t.icon}) no-repeat center`),M(o,"background-size","100% 100%")})),t.activeIcon&&(M(c,"background",`url(${t.activeIcon}) no-repeat center`),M(c,"background-size","100% 100%"),M(d,"display","none"),t.activeIconHover)&&(u(c,"mouseover",()=>{M(c,"background",`url(${t.activeIconHover}) no-repeat center`),M(c,"background-size","100% 100%")}),u(c,"mouseout",()=>{M(c,"background",`url(${t.activeIcon}) no-repeat center`),M(c,"background-size","100% 100%")})),t.click&&o&&u(o,"click",e=>{e.preventDefault(),s&&(M(l,"display","none"),M(d,"display","flex")),t.click.call(this.player,this,e)}),t.activeClick&&c&&u(c,"click",e=>{e.preventDefault(),M(l,"display","flex"),M(d,"display","none"),t.activeClick.call(this.player,this,e)}),this.extendBtnList.push({name:i,$iconWrap:l,$activeIconWrap:d})}}}ts(".jessibuca-container{position:relative;width:100%;height:100%;overflow:hidden}.jessibuca-container.jessibuca-fullscreen-web{position:fixed;z-index:9999;left:0;top:0;right:0;bottom:0;width:100vw!important;height:100vh!important;background:#000}");class O{static init(){for(var e in O.types={avc1:[],avcC:[],hvc1:[],hvcC:[],btrt:[],dinf:[],dref:[],esds:[],ftyp:[],hdlr:[],mdat:[],mdhd:[],mdia:[],mfhd:[],minf:[],moof:[],moov:[],mp4a:[],mvex:[],mvhd:[],sdtp:[],stbl:[],stco:[],stsc:[],stsd:[],stsz:[],stts:[],tfdt:[],tfhd:[],traf:[],trak:[],trun:[],trex:[],tkhd:[],vmhd:[],smhd:[]},O.types)O.types.hasOwnProperty(e)&&(O.types[e]=[e.charCodeAt(0),e.charCodeAt(1),e.charCodeAt(2),e.charCodeAt(3)]);var t=O.constants={};t.FTYP=new Uint8Array([105,115,111,109,0,0,0,1,105,115,111,109,97,118,99,49]),t.STSD_PREFIX=new Uint8Array([0,0,0,0,0,0,0,1]),t.STTS=new Uint8Array([0,0,0,0,0,0,0,0]),t.STSC=t.STCO=t.STTS,t.STSZ=new Uint8Array([0,0,0,0,0,0,0,0,0,0,0,0]),t.HDLR_VIDEO=new Uint8Array([0,0,0,0,0,0,0,0,118,105,100,101,0,0,0,0,0,0,0,0,0,0,0,0,86,105,100,101,111,72,97,110,100,108,101,114,0]),t.HDLR_AUDIO=new Uint8Array([0,0,0,0,0,0,0,0,115,111,117,110,0,0,0,0,0,0,0,0,0,0,0,0,83,111,117,110,100,72,97,110,100,108,101,114,0]),t.DREF=new Uint8Array([0,0,0,0,0,0,0,1,0,0,0,12,117,114,108,32,0,0,0,1]),t.SMHD=new Uint8Array([0,0,0,0,0,0,0,0]),t.VMHD=new Uint8Array([0,0,0,1,0,0,0,0,0,0,0,0])}static box(e){let t=8,i=null,r=Array.prototype.slice.call(arguments,1),s=r.length;for(let e=0;e<s;e++)t+=r[e].byteLength;(i=new Uint8Array(t))[0]=t>>>24&255,i[1]=t>>>16&255,i[2]=t>>>8&255,i[3]=255&t,i.set(e,4);let a=8;for(let e=0;e<s;e++)i.set(r[e],a),a+=r[e].byteLength;return i}static generateInitSegment(e){var t=O.box(O.types.ftyp,O.constants.FTYP),e=O.moov(e),i=new Uint8Array(t.byteLength+e.byteLength);return i.set(t,0),i.set(e,t.byteLength),i}static moov(e){var t=O.mvhd(e.timescale,e.duration),i=O.trak(e),e=O.mvex(e);return O.box(O.types.moov,t,i,e)}static mvhd(e,t){return O.box(O.types.mvhd,new Uint8Array([0,0,0,0,0,0,0,0,0,0,0,0,e>>>24&255,e>>>16&255,e>>>8&255,255&e,t>>>24&255,t>>>16&255,t>>>8&255,255&t,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,255,255]))}static trak(e){return O.box(O.types.trak,O.tkhd(e),O.mdia(e))}static tkhd(e){var t=e.id,i=e.duration,r=e.presentWidth,e=e.presentHeight;return O.box(O.types.tkhd,new Uint8Array([0,0,0,7,0,0,0,0,0,0,0,0,t>>>24&255,t>>>16&255,t>>>8&255,255&t,0,0,0,0,i>>>24&255,i>>>16&255,i>>>8&255,255&i,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0
|
|||
|
|
decodeVideo: video width or height is changed,
|
|||
|
|
old width is ${s.width}, old height is ${s.height},
|
|||
|
|
new width is ${e.codecWidth}, new height is ${e.codecHeight},
|
|||
|
|
and emit change event`),this.isWidthOrHeightChanged=!0,this.player.emit(b.error,g.mseWidthOrHeightChange),this.player.emit(g.mseWidthOrHeightChange))}if(this.isWidthOrHeightChanged)this.player.debug.warn("MediaSource","decodeVideo: video width or height is changed, and return");else if(Mt(t))this.player.debug.warn("MediaSource","decodeVideo and payload is video sequence header so drop this frame");else if(t.byteLength<12)this.player.debug.warn("MediaSource","decodeVideo and payload is too small , payload length is "+t.byteLength);else{null===this.firstRenderTime&&(this.firstRenderTime=i);let e=i-this.firstRenderTime;if(e<0&&(this.player.debug.error("MediaSource",`decodeVideo
|
|||
|
|
local dts is < 0 , ts is ${i} and prevTs is ${this.prevTs},
|
|||
|
|
firstRenderTime is ${this.firstRenderTime} and mseCorrectTimeDuration is `+this.player._opt.mseCorrectTimeDuration),e=null===this.prevDts?0:this.prevDts+this.player._opt.mseCorrectTimeDuration,this._checkTsIsMaxDiff(i)))this.player.debug.error("MediaSource",`decodeVideo is max diff , ts is ${i} and prevTs is ${this.prevTs}, diff is `+(this.prevTs-i)),this.emit(g.mediaSourceTsIsMaxDiff);else{if(null!==this.prevDts&&e<=this.prevDts){if(this.player.debug.error("MediaSource",`
|
|||
|
|
decodeVideo dts is less than(or equal) prev dts ,
|
|||
|
|
dts is ${e} and prev dts is ${this.prevDts} ，
|
|||
|
|
and now ts is ${i} and prev ts is ${this.prevTs} ，
|
|||
|
|
and diff is ${i-this.prevTs} and firstRenderTime is ${this.firstRenderTime}，
|
|||
|
|
and mseCorrectTimeDuration is ${this.player._opt.mseCorrectTimeDuration},
|
|||
|
|
and prevPayloadBufferSize is ${this.prevPayloadBufferSize} and payload size is `+t.byteLength),e===this.prevDts&&this.prevPayloadBufferSize===t.byteLength)return void this.player.debug.error("MediaSource","decodeVideo dts is equal to prev dts and payload size is equal to prev payload size so drop this frame");if(e=this.prevDts+this.player._opt.mseCorrectTimeDuration,this._checkTsIsMaxDiff(i))return this.player.debug.error("MediaSource",`decodeVideo is max diff , ts is ${i} and prevTs is ${this.prevTs}, diff is ${this.prevTs-i} and emit replay`),void this.emit(g.mediaSourceTsIsMaxDiff)}this._decodeVideo(t,e,r,s,i),this.prevDts=e,this.prevPayloadBufferSize=t.byteLength,this.prevTs=i,this.player.getRenderType()===V&&this.player.video&&this.player.video.doAddContentToWatermark()}}}else this.player.debug.warn("MediaSource","decodeVideo isDecodeFirstIIframe false");else if(r&&0===t[1]){const s=15&t[0];(e.video.updateVideoInfo({encTypeCode:s}),12!=s||function(){let e=!1;return e="MediaSource"in window&&window.MediaSource.isTypeSupported(be)?!0:e}())?(e._times.decodeStart||(e._times.decodeStart=m()),this.hasInit=this._decodeConfigurationRecord(t,i,r,s)):this.emit(g.mediaSourceH265NotSupport)}else this.player.debug.error("MediaSource",`decodeVideo has not init , isIframe is ${r} , payload is `+t[1])}_checkTsIsMaxDiff(e){return 0<this.prevTs&&e<this.prevTs&&36e5<this.prevTs-e}_decodeConfigurationRecord(e,t,i,r){let s=e.slice(5),a={};return 7===r?a=xi(s):12===r&&(a=Mi(e)),this.player.recorder&&this.player._opt.recordType===p&&this.player.recorder.initMetaData(e,r),0===a.codecWidth&&0===a.codecHeight?(this.player.debug.error("MediaSource","_decodeConfigurationRecord",a),this.emit(g.mediaSourceDecoderConfigurationError),!1):(e={id:1,type:"video",timescale:1e3,duration:0,avcc:s,codecWidth:a.codecWidth,codecHeight:a.codecHeight,videoType:a.videoType},e=O.generateInitSegment(e),this.isAvc=7===r,this.appendBuffer(e.buffer),this.sequenceNumber=0,this.cacheTrack={},!(this.timeInit=!1))}_decodeVideo(e,t,i,r,s){var a=this.player;let n=e.slice(5),o=n.byteLength,l=(new Date).getTime(),c=!1;this.prevTimestamp||(this.prevTimestamp=l,c=!0);var d,u,e=l-this.prevTimestamp,e=(((this.decodeDiffTimestamp=e)<5||500<e)&&!c&&a.debug.warn("MediaSource",`_decodeVideo now time is ${l} and prev time is ${this.prevTimestamp}, diff time is ${e} ms`),this.$videoElement),h=a._opt.videoBufferDelay+a._opt.videoBuffer;1<e.buffered.length&&(this.removeBuffer(e.buffered.start(0),e.buffered.end(0)),this.timeInit=!1),this.dropping&&this.cacheTrack.id&&t-this.cacheTrack.dts>h?(a.debug.warn("MediaSource","dropping time is ",t-this.cacheTrack.dts),this.dropping=!1,this.cacheTrack={}):this.cacheTrack.id&&t>=this.cacheTrack.dts?(h=8+this.cacheTrack.size,(d=new Uint8Array(h))[0]=h>>>24&255,d[1]=h>>>16&255,d[2]=h>>>8&255,d[3]=255&h,d.set(O.types.mdat,4),d.set(this.cacheTrack.data,8),this.cacheTrack.duration=t-this.cacheTrack.dts,this.player.recorder&&this.player.recorder.isRecording&&this.player._opt.recordType===p&&this.player.recorder.handleAddFmp4Track(this.cacheTrack),h=O.moof(this.cacheTrack,this.cacheTrack.dts),(u=new Uint8Array(h.byteLength+d.byteLength)).set(h,0),u.set(d,h.byteLength),this.appendBuffer(u.buffer),a.emit(b.timeUpdate,s),a.updateStats({fps:!0,ts:s,mseTs:t,buf:a.demux&&a.demux.delay||0}),a._times.videoStart||(a._times.videoStart=m(),a.handlePlayToRenderTimes())):(a.debug.log("MediaSource",`timeInit set false , cacheTrack = {} now dts is ${t}, and ts is ${s} cacheTrack dts is `+(this.cacheTrack&&this.cacheTrack.dts)),this.timeInit=!1,this.cacheTrack={}),this.cacheTrack||(this.cacheTrack={}),this.cacheTrack.id=1,this.cacheTrack.sequenceNumber=++this.sequenceNumber,this.cacheTrack.size=o,this.cacheTrack.dts=t,this.cacheTrack.cts=r,this.cacheTrack.isKeyframe=i,this.cacheTrack.data=n,this.cacheTrack.flags={isLeading:0,dependsOn:i?2:1,isDependedOn:i?1:0,hasRedundancy:0,isNonSync:i?0:1},this.timeInit||1!==e.buffered.length||(a.debug.log("MediaSource","timeInit set true"),this.timeInit=!0,e.currentTime=e.buffered.end(0)),!this.isInitInfo&&0<e
|
|||
|
|
<div class="jessibuca-contextmenu jessibuca-contextmenu-${i=dt()}">
|
|||
|
|
${t.content}
|
|||
|
|
</div>
|
|||
|
|
`,(s=Array.from(this.$contextmenus.children)[t.index])?s.insertAdjacentHTML("beforebegin",r):is(this.$contextmenus,r),s=this.$contextmenus.querySelector(".jessibuca-contextmenu-"+i),t.click&&a(s,"click",e=>{e.preventDefault(),t.click.call(this.player,this,e),this.hide()}),this.menuList.push({uuid:i,$menuItem:s}))}}class gs extends e{constructor(e,t){super(),this.$container=e;var i,e=Pt(),r=(this._opt=Object.assign({},e,t),this.debug=new Qe(this),this._opt.forceNoOffscreen=!0,E()&&(this._opt.controlAutoHide=!1),this._opt.forceNoOffscreen||("undefined"==typeof OffscreenCanvas?(this._opt.forceNoOffscreen=!0,this._opt.useOffscreen=!1):this._opt.useOffscreen=!0),(this._opt.isHls||this._opt.isWebrtc)&&(this._opt.useWCS=!1,this._opt.useMSE=!1,this._opt.isNakedFlow=!1),this._opt.isNakedFlow,this._opt.isHls||this._opt.isWebrtc||(this._opt.useWCS&&(this._opt.useWCS="VideoEncoder"in window,this._opt.useWCS||this.debug.warn("Player","useWCS is true, but not support so set useWCS false"),this._opt.useWCS)&&(this._opt.useOffscreen?this._opt.wcsUseVideoRender=!1:this._opt.wcsUseVideoRender&&(this._opt.wcsUseVideoRender=ht()&&pt(),this._opt.wcsUseVideoRender||this.debug.warn("Player","wcsUseVideoRender is true, but not support so set wcsUseVideoRender false"))),this._opt.useMSE&&(this._opt.useMSE=function(){let e=!1;return e="MediaSource"in window&&window.MediaSource.isTypeSupported(ve)?!0:e}(),this._opt.useMSE||this.debug.warn("Player","useMSE is true, but not support so set useMSE false"))),this._opt.useMSE?(this._opt.useWCS&&this.debug.warn("Player","useMSE is true and useWCS is true then useWCS set true->false"),this._opt.forceNoOffscreen||this.debug.warn("Player","useMSE is true and forceNoOffscreen is false then forceNoOffscreen set false->true"),this._opt.useWCS=!1,this._opt.forceNoOffscreen=!0):this._opt.useWCS,!this._opt.useSIMD&&-1===this._opt.decoder.indexOf("-simd")||(this._opt.useSIMD=WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11])),this._opt.useSIMD)||this.debug.warn("Player","useSIMD is true, but not support so set useSIMD false"),this._opt.useSIMD?-1===this._opt.decoder.indexOf("-simd")&&(this._opt.decoder=this._opt.decoder.replace("decoder-pro","decoder-pro-simd")):-1!==this._opt.decoder.indexOf("-simd")&&(this._opt.decoder=this._opt.decoder.replace("decoder-pro-simd","decoder-pro")),C(this._opt.hasAudio)&&(this._opt.operateBtns.audio=!1),C(this._opt.hasVideo)&&(this._opt.operateBtns.fullscreen=!1,this._opt.operateBtns.screenshot=!1,this._opt.operateBtns.record=!1,this._opt.operateBtns.ptz=!1,this._opt.operateBtns.quality=!1,this._opt.operateBtns.zoom=!1),this._opt.qualityConfig&&0===this._opt.qualityConfig.length&&this._opt.operateBtns.quality&&(this._opt.operateBtns.quality=!1,this.debug.warn("Player","_opt.qualityConfig is empty, so set operateBtns.quality false")),_(this._opt.useWebGPU)&&(this._opt.useWebGPU=function(){let e=!1;return e="gpu"in navigator?!0:e}(),C(this._opt.useWebGPU))&&this.debug.warn("Player","useWebGPU is true, but not support so set useWebGPU false"),this._opt.hasControl=this._hasControl(),this._loading=!1,this._playing=!1,this._playbackPause=!1,this._hasLoaded=!1,this._zooming=!1,this._destroyed=!1,this._checkHeartTimeout=null,this._checkLoadingTimeout=null,this._checkStatsInterval=null,this._checkVisibleHiddenTimeout=null,this._startBpsTime=null,this._isPlayingBeforePageHidden=!1,this._stats={buf:0,netBuf:0,fps:0,maxFps:0,dfps:0,abps:0,vbps:0,ts:0,mseTs:0,pTs:0,dts:0},this._allStatsData={},this._faceDetectActive=!1,this._objectDetectActive=!1,this._times={playInitStart:"",playStart:"",streamStart:"",streamResponse:"",demuxStart:"",decodeStart:"",videoStart:"",playTimestamp:"",streamTimestamp:"",streamResponseTimestamp:"",demuxTimestamp:"",decodeTimestamp:"",videoTimestamp:"",allTimestamp:""},this._videoTimestamp=0,this._audioTimestamp=0,this._videoIframeIntervalTs=0,this._streamQuality=this._opt.defaultStreamQuality||"",this._visibility=!0,this._lastestVisibilityChangeTimestamp=null,this._tempWorkerStats=null,this.
|
|||
|
|
pause and emit delayTimeout event and
|
|||
|
|
current vbps is ${this._stats.vbps} and
|
|||
|
|
current fps is ${this._stats.fps} and
|
|||
|
|
current visibility is ${this.visibility} and`),this.emit(b.timeout,b.delayTimeout),this.emit(b.delayTimeout)):this.debug.warn("player",`playbackPause is ${this.playbackPause}, playing is `+this.playing)},1e3*this._opt.heartTimeout)}checkStatsInterval(){this._checkStatsInterval=setInterval(()=>{this.updateStats()},1e3)}clearCheckHeartTimeout(){this._checkHeartTimeout&&(clearTimeout(this._checkHeartTimeout),this._checkHeartTimeout=null)}checkLoadingTimeout(){this._checkLoadingTimeout=setTimeout(()=>{this.playing?this.debug.warn("player",`checkLoadingTimeout but loading is ${this.loading} and playing is `+this.playing):this.isDestroyed()?this.debug&&this.debug.warn("player","checkLoadingTimeout but player is destroyed"):(this.debug.warn("player","checkLoadingTimeout and pause and emit loadingTimeout event"),this.emit(b.timeout,b.loadingTimeout),this.emit(b.loadingTimeout))},1e3*this._opt.loadingTimeout)}clearCheckLoadingTimeout(){this._checkLoadingTimeout&&(this.debug.log("player","clearCheckLoadingTimeout"),clearTimeout(this._checkLoadingTimeout),this._checkLoadingTimeout=null)}clearStatsInterval(){this._checkStatsInterval&&(clearInterval(this._checkStatsInterval),this._checkStatsInterval=null)}handleRender(){this.isDestroyed()?this.debug&&this.debug.warn("player","handleRender but player is destroyed"):(this.loading&&(this.clearCheckLoadingTimeout(),this.emit(b.start),this.loading=!1),this.playing||(this.playing=!0),this.checkHeart())}updateStats(h){h=h||{},this._startBpsTime||(this._startBpsTime=m()),c(h.ts)&&(this._stats.ts=h.ts,null===this._playingStartTimestamp)&&0<h.ts&&(this._playingStartTimestamp=h.ts),c(h.dts)&&(this._stats.dts=h.dts),c(h.mseTs)&&(this._stats.mseTs=h.mseTs),c(h.buf)&&(this._stats.buf=h.buf),c(h.netBuf)&&(this._stats.netBuf=h.netBuf),h.fps&&(this._stats.fps+=1),h.dfps&&(this._stats.dfps+=1),h.abps&&(this._stats.abps+=h.abps),h.vbps&&(this._stats.vbps+=h.vbps),h.workerStats&&(this._tempWorkerStats=h.workerStats);const p=m();if(!(p-this._startBpsTime<1e3)){null!==this._playingStartTimestamp&&(this._stats.pTs+=1);let e=0,t=0,i=0,r=(this._opt.useMSE&&this.mseDecoder&&(e=this.mseDecoder.checkSourceBufferDelay(),e=parseInt(1e3*e,10),t=this.mseDecoder.getDecodeDiffTimes(),i=this.mseDecoder.getDecodePlaybackRate()),this._opt.useWCS&&this.webcodecsDecoder&&(t=this.webcodecsDecoder.getDecodeDiffTimes()),this._opt.isHls&&this.hlsDecoder&&(e=this.hlsDecoder.checkHlsBufferedDelay(),e=parseInt(1e3*e,10),i=this.hlsDecoder.getDecodePlaybackRate()),0),s=0,a=0,n=!1,o=!1,l=0,c=(this.demux&&(n=this.demux.isDropping()),this._opt.useWasm?this._tempWorkerStats&&(s=this._tempWorkerStats.demuxBufferDelay,a=this._tempWorkerStats.audioDemuxBufferDelay,r=this._tempWorkerStats.flvBufferByteLength,this._stats.netBuf=this._tempWorkerStats.netBuf,n=this._tempWorkerStats.isDropping,l=this._tempWorkerStats.pushLatestDelay,o=this._tempWorkerStats.isStreamTsMoreThanLocal):this.demux&&(r=this.demux.getInputByteLength(),l=this.demux.getPushLatestDelay(),o=this.demux.getIsStreamTsMoreThanLocal(),this.demux.bufferList)&&(s=this.demux.bufferList.length),0),d=(this.audio&&this.audio.bufferList&&(c=this.audio.bufferList.length),0),u=0;if(this.isPlayback()&&this.video){this._opt.playbackConfig.isUseFpsRender&&(d=this.video.bufferList&&this.video.bufferList.length||0);h=this.video.getStreamFps();const p=0<h?1e3/h:0;u=parseInt(p*d+p*s,10)}var h=this._stats.dts-this._stats.ts,f=h+this._stats.netBuf;this._opt.isHls&&(this._stats.fps=this.hlsDecoder.getFps()),this._stats.fps>this._stats.maxFps&&(this._stats.maxFps=this._stats.fps),this._allStatsData=Object.assign(this._stats,{audioBuffer:c,audioTs:this.audioTimestamp,playbackVideoBuffer:d,playbackVideoWaitingBuffer:0,playbackAudioWaitingBuffer:0,playbackCacheDataDuration:u,demuxBuffer:s,pushLatestDelay:l,audioDemuxBuffer:a,flvBuffer:r,mseDelay:e,mseDecodeDiffTimes:t,mseDecodePlaybackRate:i,wcsDecodeDiffTimes:t,hlsDelay:e,hlsDecodePlaybackRate:i,delayTs:h,totalDelayTs:f,isDropping:n,isStreamTsMoreThanLocal:o}),this.emit(b.stats,this._allStatsData),1048576<this._allStatsData.flvBuf
|
|||
|
|
opt.heartTimeout is ${this.player&&this.player._opt.heartTimeout} and
|
|||
|
|
opt.heartTimeoutReplay is ${this.player&&this.player._opt.heartTimeoutReplay} and
|
|||
|
|
opt.heartTimeoutReplayTimes is ${this.player&&this.player._opt.heartTimeoutReplayTimes},and
|
|||
|
|
local._heartTimeoutReplayTimes is `+this._heartTimeoutReplayTimes)}).catch(e=>{this.debug.error("Jessibuca","delay timeout and pause error",e)})}),this.player.on(b.loadingTimeout,e=>{this.emit(b.crashLog,this.getCrashLog(b.loadingTimeout,e)),this.pause().then(()=>{if(this.player&&this.player._opt.loadingTimeoutReplay&&(this._loadingTimeoutReplayTimes<this.player._opt.loadingTimeoutReplayTimes||-1===this.player._opt.loadingTimeoutReplayTimes))if(this.debug.log("Jessibuca",`loading timeout and
|
|||
|
|
replay time is ${this._loadingTimeoutReplayTimes} and
|
|||
|
|
loadingTimeoutReplayTimes is `+this.player._opt.loadingTimeoutReplayTimes),this.isDestroyed())this.debug&&this.debug.warn("Jessibuca","delay timeout replay but player is destroyed");else{this._loadingTimeoutReplayTimes+=1;const e=this._opt.url;this._resetPlayer().then(()=>{this.play(e).then(()=>{}).catch(e=>{this.debug.error("Jessibuca","loading timeout replay error",e)})}).catch(e=>{this.debug.error("Jessibuca","loading timeout _resetPlayer error",e)})}else this.emit(b.playFailedAndPaused,b.loadingTimeout),this.player&&this.player.emit(b.loadingTimeoutRetryEnd),this.debug.log("Jessibuca",`loadingTimeoutRetryEnd and
|
|||
|
|
opt.loadingTimeout is ${this.player&&this.player._opt.loadingTimeout} and
|
|||
|
|
opt.loadingTimeoutReplay is ${this.player&&this.player._opt.loadingTimeoutReplay} and
|
|||
|
|
local._loadingTimeoutReplayTimes time is ${this._loadingTimeoutReplayTimes} and
|
|||
|
|
opt.loadingTimeoutReplayTimes is `+(this.player&&this.player._opt.loadingTimeoutReplayTimes))}).catch(e=>{this.debug.error("Jessibuca","loading timeout and pause error",e)})}),this.hasLoaded()?this.player.play(d,u).then(()=>{e()}).catch(e=>{this.debug.error("Jessibuca","hasLoaded and play error",e),this.emit(b.crashLog,this.getCrashLog("hasLoaded and play error",e)),this.player.pause().then(()=>{t(e)}).catch(e=>{this.debug.error("Jessibuca","hasLoaded and play error and next pause error",e)})}):this.player.once(b.decoderWorkerInit,()=>{this.player.play(d,u).then(()=>{e()}).catch(e=>{this.debug.error("Jessibuca","decoderWorkerInit and play error",e),this.emit(b.crashLog,this.getCrashLog("decoderWorkerInit and play error",e)),this.player.pause().then(()=>{t(e)}).catch(e=>{this.debug.error("Jessibuca","decoderWorkerInit and play error and next pause error",e)})})})};n||s||i?this._resetPlayer({protocol:l,demuxType:r,isHls:n,isWebrtc:s}).then(()=>{c()}).catch(e=>{t("reset player error")}):(this.player.updateOption({protocol:l,demuxType:r,isFlv:this._opt.isFlv,cryptoKey:u.cryptoKey||"",cryptoIV:u.cryptoIV||""}),u.cryptoKey&&u.cryptoIV&&(this.player.decoderWorker&&this.player.decoderWorker.updateWorkConfig({key:"cryptoKey",value:u.cryptoKey}),this.player.decoderWorker)&&this.player.decoderWorker.updateWorkConfig({key:"cryptoIV",value:u.cryptoIV}),c())})}resize(){this.player&&this.player.resize()}setBufferTime(e){e=Number(e),this.player&&(10<e&&console.warn(`Jessibuca buffer time is ${e} second, is too large, video will show blank screen until cache ${e} second buffer data`),this.player.updateOption({videoBuffer:1e3*e}),this.player.decoderWorker)&&this.player.decoderWorker.updateWorkConfig({key:"videoBuffer",value:1e3*e})}setBufferDelayTime(e){e=Number(e),this.player&&(e<.2&&console.warn(`Jessibuca buffer time delay is ${e} second, is too small`),e=y(e,.2,100),this.player.updateOption({videoBufferDelay:1e3*e}),this.player.decoderWorker)&&this.player.decoderWorker.updateWorkConfig({key:"videoBufferDelay",value:1e3*e})}setRotate(e){e=parseInt(e,10),this.player&&this._opt.rotate!==e&&-1!==[0,90,180,270].indexOf(e)&&(this.player.updateOption({rotate:e}),this.resize())}setMirrorRotate(e){this.player&&this._opt.mirrorRotate!==e&&-1!==["none","level","vertical"].indexOf(e)&&(this.player.updateOption({mirrorRotate:e}),this.resize())}hasLoaded(){return this.player&&this.player.loaded||!1}setKeepScreenOn(){this.player&&this.player.updateOption({keepScreenOn:!0})}setFullscreen(e){e=!!e;this.player&&this.player.fullscreen!==e&&(this.player.fullscreen=e)}screenshot(e,t,i,r){return this.player&&this.player.video?this.player.video.screenshot(e,t,i,r):null}screenshotWatermark(e){return this.player&&this.player.video?this.player.video.screenshotWatermark(e):null}startRecord(i,r){return new Promise((e,t)=>{if(!this.player)return t();(this.player.playing?(this.player.startRecord(i,r),e):t)()})}stopRecordAndSave(e,r){return new Promise((t,i)=>{this.player&&this.player.recording?this.player.stopRecordAndSave(e,r).then(e=>{t(e)}).catch(e=>{i(e)}):i("not recording")})}isPlaying(){let e=!1;return this.player&&(this._opt.playType===n?e=this.player.playing:this._opt.playType===v&&(e=C(this.player.playbackPause)&&this.player.playing)),e}isLoading(){return!!this.player&&this.player.loading}isPause(){let e=!1;return this._opt.playType===n?e=!this.isPlaying()&&!this.isLoading():this._opt.playType===v&&this.player&&(e=this.player.playbackPause),e}isPaused(){return this.isPause()}isPlaybackPause(){let e=!1;return e=this._opt.playType===v&&this.player?this.player.playbackPause:e}isMute(){let e=!0;return e=this.player?this.player.isAudioMute():e}isRecording(){return this.player&&this.player.recorder&&this.player.recorder.recording||!1}clearBufferDelay(){this.player&&this.player.clearBufferDelay()}setNetworkDelayTime(e){e=Number(e),this.player&&(e<1&&console.warn(`Jessibuca network delay is ${e} second, is too small`),e=y(e,1,100),this.player.updateOption({networkDelay:1e3*e}),this.player.decoderWorker)&&this.player.decoderWorker.upda
|
|||
|
|
<div class="jessibuca-multi-player" wid="${e}" style='float: left;position:relative;overflow: hidden; background-color:${this._opt.style.background};width: ${n+"px"};height: ${o+"px"}'>
|
|||
|
|
<div class="jessibuca-multi-player-draw-window" wid="${e}" style='position:absolute; z-index: 1; width:${s+"px"}; height:${a+"px"};border: 1px solid ${this._opt.style.border}'></div>
|
|||
|
|
<div class="jessibuca-multi-player-video-window" wid="${e}" style='position:absolute;left: 1px;top:1px; z-index: 2; width:${s+"px"}; height:${a+"px"};'></div>
|
|||
|
|
</div>
|
|||
|
|
`;var g=`<div class="jessibuca-multi-player-container" style="overflow: hidden;width:100%; height:100%; position: relative;">${r}</div>`,m=(this.$container.innerHTML=g,this.$container.querySelectorAll(".jessibuca-multi-player"));for(let e=0;e<this.maxWindowSize;e++){const t=m[e],i=t.querySelector(".jessibuca-multi-player-draw-window"),r=t.querySelector(".jessibuca-multi-player-video-window");this.windowList[e]={uuid:dt(),isContainerFullscreen:!1,$playerContainer:t,$playerBorder:i,$player:r,$playerContainerEvents:[],player:null}}for(let e=this._getCurrentMaxSplit();e<this.maxWindowSize;e++){const t=this.windowList[e];t.$player.style.display="none",t.$playerBorder.style.display="none",t.$playerContainer.style.width="0",t.$playerContainer.style.height="0"}}_initEvents(){const o=this.events["proxy"];this.windowList.forEach((e,t)=>{var i=e.$playerContainer,r=o(i,"click",()=>{this.emit($e.selected,t),this.getSelectedWindowIndex()===t&&this.windowList[t].isContainerFullscreen||1!==this._opt.split&&this._handleWindowSelect(t)}),s=o(i,"dblclick",()=>{this.emit($e.dblSelected,t),this._opt.supportDblclickContainerFullscreen&&1!==this._opt.split&&this._handleWindowContainerFullscreen(t)}),a=o(i,"mouseup",()=>{this.emit($e.mouseUp,t)}),n=o(i,"mouseover",()=>{this.emit($e.mouseOver,t)}),i=o(i,"mouseout",()=>{this.emit($e.mouseOut,t)});e.$playerContainerEvents=[r,a,n,i,s]})}_getContainerRect(){var e=this.$container.getBoundingClientRect();return{width:Math.max(e.width,this.$container.clientWidth),height:Math.max(e.height,this.$container.clientHeight)}}_updateWindows(){const s=this._getContainerRect(),a=s.width,n=s.height,o=this._opt.split,l=a%o,c=n%o,d=(a-l-2*o)/o,u=(n-c-2*o)/o,t=(a-l)/o,i=(n-c)/o;let h=this._getCurrentMaxSplit();for(let e=0;e<h;e++){const a=this.windowList[e],n=(a.isContainerFullscreen=!1,a.$playerContainer),h=(n.style.position="relative",n.style.left="auto",n.style.top="auto",n.style.zIndex="auto",a.$playerBorder),r=a.$player,p=d+(e%o==o-1?l:0),f=u+(e+o>=Math.pow(o,2)?c:0),g=t+(e%o==o-1?l:0),m=i+(e+o>=Math.pow(o,2)?c:0);n.style.width=g+"px",n.style.height=m+"px",n.style.display="block",r.style.width=p+"px",r.style.height=f+"px",r.style.display="block",h.style.width=p+"px",h.style.height=f+"px",h.style.display="block",a.player&&a.player.resize()}if(this.specialLayoutType){const s=this.windowList[0],a=s.$playerContainer,n=s.$player,o=s.$playerBorder,l=a.style.width.replace("px",""),c=a.style.height.replace("px",""),d=n.style.width.replace("px",""),u=n.style.height.replace("px","");let e,t,i,r;this.specialLayoutType===Ke?(e=2*l,t=2*c,i=2*d+2,r=2*u+2):this.specialLayoutType===qe&&(e=3*l,t=3*c,i=3*d+4,r=3*u+4),a.style.width=e+"px",a.style.height=t+"px",n.style.width=i+"px",n.style.height=r+"px",o.style.width=i+"px",o.style.height=r+"px",s.player&&s.player.resize(),h=this._getSpecialMaxSplit()}for(let e=h;e<this.maxWindowSize;e++){const a=this.windowList[e];a.player&&(a.player.destroy(),a.player=null),a.$playerContainer.style.display="none",a.$playerContainer.style.width="0",a.$playerContainer.style.height="0",a.$player.style.display="none",a.$playerBorder.style.display="none"}1===this._opt.split&&(this.windowList[0].$playerBorder.style.display="none")}_handleWindowSelect(e){const t=this.windowList[e];t?(this.currentWindowIndex=e,1<this.windowList.length&&(this.windowList.forEach(e=>{t.$playerBorder.style.display="block",e.$playerBorder.style.border="1px solid "+this._opt.style.border}),t.$playerBorder.style.border="1px solid "+this._opt.style.borderSelect)):this.debug.warn(this.LOG_TAG,`_handleWindowSelect() ${e} is not exist`),1===this._opt.split&&(t.$playerBorder.style.display="none")}_handleWindowContainerFullscreen(e){var t=this.windowList[e];if(t){if(t.isContainerFullscreen)t.$playerContainer.style.position="relative",t.$playerContainer.style.left="auto",t.$playerContainer.style.top="auto",t.$playerContainer.style.zIndex="auto",t.$playerContainer.style.width=t.prevInfo.playerContainerWidth,t.$playerContainer.style.height=t.prevInfo.playerContainerHeight,t.$player.style.width=t.prevInfo.playerWidth,t.$pla
|