mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
8 lines
15 KiB
JavaScript
8 lines
15 KiB
JavaScript
|
|
/*!
|
|
* artplayer-plugin-websr.js v1.0.0
|
|
* Github: https://github.com/zhw2590582/ArtPlayer
|
|
* (c) 2017-2026 Harvey Zhao
|
|
* Released under the MIT License.
|
|
*/
|
|
!function(e,t,r,i,s){var a="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},o="function"==typeof a[i]&&a[i],n=o.i||{},l=o.cache||{},d="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(t,r){if(!l[t]){if(!e[t]){if(s[t])return s[t];var n="function"==typeof a[i]&&a[i];if(!r&&n)return n(t,!0);if(o)return o(t,!0);if(d&&"string"==typeof t)return d(t);var c=Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}h.resolve=function(r){var i=e[t][1][r];return null!=i?i:r},h.cache={};var m=l[t]=new u.Module(t);e[t][0].call(m.exports,h,m,m.exports,a)}return l[t].exports;function h(e){var t=h.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],i=e[1],s=e[2]||e[0],a=u(i);"*"===t?Object.keys(a).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return a[e]}})}):"*"===s?Object.defineProperty(r,t,{enumerable:!0,value:a}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===s?a.__esModule?a.default:a:a[s]}})}),r}return u(t)}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.require=d,this.exports={}},u.modules=e,u.cache=l,u.parent=o,u.distDir=void 0,u.publicUrl=void 0,u.devServer=void 0,u.i=n,u.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(u,"root",{get:function(){return a[i]}}),a[i]=u;for(var c=0;c<t.length;c++)u(t[c]);if(r){var m=u(r);"object"==typeof exports&&"u">typeof module?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m})}}({"80h6e":[function(e,t,r,i){var s=e("@parcel/transformer-js/src/esmodule-helpers.js"),a=e("./Upscaler.js"),o=s.interopDefault(a);window.artplayerPluginWebsr=function(e={networkSize:"medium",compare:!1,weightsBaseUrl:"/weights",workerUrl:"/worker/main.js",videoScale:2}){return t=>{let{$video:r,$player:i}=t.template,s=document.createElement("canvas");function a(){let e=t.video,r=i.offsetWidth||640,s=i.offsetHeight||360,a=(e.videoWidth||640)/(e.videoHeight||360),o=r,n=s;return r/s>a?o=s*a:n=r/a,{displayWidth:o,displayHeight:n}}if(i.appendChild(s),s.style.position="absolute",s.style.zIndex="11",s.style.pointerEvents="none",s.style.top="50%",s.style.left="50%",s.style.transform="translate(-50%, -50%)",s.style.opacity="0",s.style.transition="opacity 0.2s ease",!o.default||!o.default.isSupported||!o.default.isSupported())return void console.warn("Upscaler is not supported in this environment");let n=new(0,o.default)({networkSize:e.networkSize||"medium",weightsBaseUrl:e.weightsBaseUrl||"/weights",workerUrl:e.workerUrl||"/worker/main.js",videoScale:e.videoScale||2}),l=!1;async function d(){if(!l){l=!0;try{await new Promise((e,t)=>{if(r.readyState>=1)return void e();let i=()=>{a(),e()},s=()=>{a(),t(Error("Failed to load video metadata"))},a=()=>{r.removeEventListener("loadedmetadata",i),r.removeEventListener("error",s)};r.addEventListener("loadedmetadata",i),r.addEventListener("error",s)}),await n.startRealtimeUpscale(r,s,e.networkSize||n.networkSize),requestAnimationFrame(()=>{s.style.opacity="1"})}catch(e){console.error("artplayer-plugin-upscaler: failed to start realtime",e)}}}let{displayWidth:u,displayHeight:c}=a();s.style.width=u+"px",s.style.height=c+"px";let m=50,h=!1,p=!!e.compare,f=document.createElement("div");function g(){if(p){let{displayWidth:e,displayHeight:t}=a(),r=`linear-gradient(to right, transparent 0%, transparent ${m}%, black ${m}%, black 100%)`;s.style.maskImage=r;let o=i.offsetWidth||640,n=i.offsetHeight||360,l=(o-e)/2+e*m/100;f.style.top=(n-t)/2+"px",f.style.left=l+"px",f.style.height=t+"px",f.style.transform="translateX(-50%)"}else s.style.maskImage="none"}function w(e){p&&(h=!0)}function y(e){if(p&&h){let t=i.getBoundingClientRect(),{displayWidth:r}=a(),s=i.offsetWidth||640;m=Math.max(0,Math.min(100,m=(e.clientX-t.left-(s-r)/2)/r*100)),g()}}function v(e){h=!1}return f.style.position="absolute",f.style.width="3px",f.style.backgroundColor="rgba(255, 255, 255, 0.75)",f.style.cursor="ew-resize",f.style.zIndex="12",f.style.pointerEvents="auto",f.style.display=p?"block":"none",f.style.boxShadow="0 0 2px rgba(0, 0, 0, 0.1)",p&&(i.appendChild(f),f.addEventListener("mousedown",w),document.addEventListener("mousemove",y),document.addEventListener("mouseup",v),g()),t.on("destroy",()=>{n&&"function"==typeof n.dispose&&n.dispose(),f.removeEventListener("mousedown",w),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",v)}),t.on("resize",()=>{let{displayWidth:e,displayHeight:t}=a();s.style.width=e+"px",s.style.height=t+"px",g()}),t.on("play",()=>{d()}),{name:"artplayerPluginWebsr",upscaler:n,update:function(r={}){if(r&&"object"==typeof r){if(Object.prototype.hasOwnProperty.call(r,"compare")){let t=!!r.compare;e.compare=t,(p=t)?(f.parentNode||i.appendChild(f),f.style.display="block",f.addEventListener("mousedown",w),document.addEventListener("mousemove",y),document.addEventListener("mouseup",v),g()):(s.style.maskImage="none",f.style.display="none",f.removeEventListener("mousedown",w),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",v))}r.networkSize&&(e.networkSize=r.networkSize,n&&"function"==typeof n.stopRealtimeUpscale&&n.stopRealtimeUpscale(),l=!1,t.paused||d())}}}}}},{"./Upscaler.js":"fDXhG","@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],fDXhG:[function(e,t,r,i){e("@parcel/transformer-js/src/esmodule-helpers.js").defineInteropFlag(r);class s{static DEFAULT_TIMEOUTS={IMAGE:3e5,VIDEO:36e5,METADATA:1e4};static DEFAULT_DELAYS={INIT:500,NETWORK:300};static isSupported(){try{let e="u">typeof Worker,t="u">typeof OffscreenCanvas||"u">typeof document&&!!document.createElement("canvas").transferControlToOffscreen,r="u">typeof Blob;return e&&t&&r}catch{return!1}}static isVideoSupported(){try{return"u">typeof VideoEncoder&&"u">typeof VideoDecoder}catch{return!1}}constructor(e={}){const t=e.weightsBaseUrl||"/weights";this.networks=e.networks||{small:{name:"anime4k/cnn-2x-l",weightsUrl:`${t}/cnn-8.json`},medium:{name:"anime4k/cnn-2x-16",weightsUrl:`${t}/cnn-16.json`},large:{name:"anime4k/cnn-2x-28",weightsUrl:`${t}/cnn-28.json`}},this.weightsBaseUrl=t,this.networkSize=e.networkSize||"medium",this.workerUrl=e.workerUrl||"/worker/main.js",this.timeouts={...s.DEFAULT_TIMEOUTS,...e.timeouts||{}},this.delays={...s.DEFAULT_DELAYS,...e.delays||{}},this.imageScale="number"==typeof e.imageScale&&e.imageScale>0?e.imageScale:2,this.videoScale="number"==typeof e.videoScale&&e.videoScale>0?e.videoScale:2,this.weightsCache=new Map,this.workerInstance=null,this.messageHandlers={},this.progressCallback=null,this.processingType=null,this.realtimeLoopId=null,this.realtimeState=null,this.init()}init({prewarm:e=!0}={}){if(!s.isSupported())throw Error("Upscaler is not supported in this environment");return e&&this.getWorker().postMessage({cmd:"isSupported"}),this}getWorker(){return this.workerInstance||(this.workerInstance=new Worker(this.workerUrl),this.workerInstance.onmessage=e=>this.handleWorkerMessage(e)),this.workerInstance}static extractProgressValue(e){let t=e.data??e.progress??e.value??e.percentage;return"number"==typeof t?Math.min(100,Math.max(0,Math.round(t))):null}handleBlobResponse(e){let t="video"===this.processingType?"videoBlob":"imageBlob",r=this.messageHandlers[t];e.data instanceof Blob&&r&&r({[t]:e.data})}requestBlob(){let e="video"===this.processingType?"getVideoBlob":"getImageBlob";this.getWorker().postMessage({cmd:e})}handleWorkerMessage(e){let{data:t}=e;if(console.debug("Worker message:",t),!t.cmd)return;let{cmd:r}=t;if("progress"===r){let e=s.extractProgressValue(t);null!==e&&this.progressCallback&&this.progressCallback(e),this.messageHandlers.progress&&this.messageHandlers.progress(t)}else"finished"===r?t.data instanceof Blob?this.handleBlobResponse(t):this.requestBlob():this.messageHandlers[r]&&this.messageHandlers[r](t)}async loadWeights(e){if(this.validateNetworkSize(e),this.weightsCache.has(e))return this.weightsCache.get(e);let t=this.networks[e],r=await fetch(t.weightsUrl);if(!r.ok)throw Error(`Failed to fetch weights: ${r.statusText}`);let i=await r.json();return this.weightsCache.set(e,i),i}static loadImageMetadata(e,t){return new Promise((r,i)=>{let s=new Blob([e],{type:t}),a=URL.createObjectURL(s),o=new Image;o.onload=()=>{URL.revokeObjectURL(a),r({width:o.width,height:o.height})},o.onerror=()=>{URL.revokeObjectURL(a),i(Error("Failed to load image"))},o.src=a})}static loadVideoMetadata(e,t){return new Promise((r,i)=>{let s=URL.createObjectURL(e),a=document.createElement("video");a.src=s;let o=setTimeout(()=>i(Error("Timeout")),t);a.onloadedmetadata=()=>{clearTimeout(o),URL.revokeObjectURL(s),r({width:a.videoWidth,height:a.videoHeight,duration:a.duration})},a.onerror=()=>{clearTimeout(o),URL.revokeObjectURL(s),i(Error("Failed to load video"))}})}createOffscreenCanvas(e,t,r=2){let i="number"==typeof r&&r>0?r:1,s=document.createElement("canvas");if(s.width=e*i,s.height=t*i,"function"!=typeof s.transferControlToOffscreen)throw Error("OffscreenCanvas is not supported in this environment");return s.transferControlToOffscreen()}createBlobPromise(e,t){return new Promise((r,i)=>{let s=setTimeout(()=>{this.messageHandlers[e]&&(delete this.messageHandlers[e],i(Error(`${e} processing timeout`)))},t);this.messageHandlers[e]=t=>{delete this.messageHandlers[e],clearTimeout(s);let a=t[e]||t.data;a instanceof Blob?r(a):i(Error(`Invalid ${e} format`))}})}validateNetworkSize(e){if(!this.networks[e])throw Error("Invalid networkSize: use one of "+Object.keys(this.networks).join(", "))}async upscaleImage(e,t,r){if(!e)throw Error("Image file is required");let i=t||this.networkSize;this.validateNetworkSize(i),this.processingType="image";let a=await e.arrayBuffer(),o=e.type||"image/jpeg",{width:n,height:l}=await s.loadImageMetadata(a,o),d=await this.loadWeights(i),u=this.networks[i],c="number"==typeof r&&r>0?r:this.imageScale,[m,h]=[this.createOffscreenCanvas(n,l,c),this.createOffscreenCanvas(n,l,1)],p=this.createBlobPromise("imageBlob",this.timeouts.IMAGE);return this.getWorker().postMessage({cmd:"init",data:{imageArrayBuffer:a,imageMimeType:o,upscaled:m,original:h,resolution:{width:n,height:l},network_name:u.name,weights:d}},[m,h]),setTimeout(()=>{this.getWorker().postMessage({cmd:"network",data:{name:u.name,imageArrayBuffer:a,imageMimeType:o,weights:d}}),setTimeout(()=>{this.getWorker().postMessage({cmd:"getImageBlob",data:{imageArrayBuffer:a,imageMimeType:o}})},this.delays.NETWORK)},this.delays.INIT),p}async upscaleVideo(e,t,r){if(!e)throw Error("Video file is required");let i=t||this.networkSize;if(this.validateNetworkSize(i),!s.isVideoSupported())throw Error("WebCodecs API not supported. Requires Chrome 94+");this.processingType="video";let{width:a,height:o,duration:n}=await s.loadVideoMetadata(e,this.timeouts.METADATA),l=await this.loadWeights(i),d=this.networks[i],u="number"==typeof r&&r>0?r:this.videoScale,[c,m]=[this.createOffscreenCanvas(a,o,u),this.createOffscreenCanvas(a,o,1)],h=this.createBlobPromise("videoBlob",this.timeouts.VIDEO);return this.getWorker().postMessage({cmd:"process",file:e,fileSize:e.size,duration:n,adjustedResolution:{adjustedInputWidth:a,adjustedInputHeight:o,adjustedOutputWidth:a*u,adjustedOutputHeight:o*u},upscaled:c,original:m,weights:l,network_name:d.name,skipDemuxProgress:!0},[c,m]),h}async startRealtimeUpscale(e,t,r,i){if(!e||!t)throw Error("videoElement and canvasElement are required");let s=r||this.networkSize;this.validateNetworkSize(s);let a=this.networks[s],o=await this.loadWeights(s),n="number"==typeof i&&i>0?i:this.videoScale;await new Promise((t,r)=>{if(e.readyState>=1)return void t();let i=()=>{a(),t()},s=()=>{a(),r(Error("Failed to load video metadata"))},a=()=>{e.removeEventListener("loadedmetadata",i),e.removeEventListener("error",s)};e.addEventListener("loadedmetadata",i),e.addEventListener("error",s)});let l=e.videoWidth,d=e.videoHeight;if(!l||!d)throw Error("Invalid video dimensions");let u=!t._upscalerTransferred,c=null;if(u){if(t.width=l*n,t.height=d*n,"function"!=typeof t.transferControlToOffscreen)throw Error("OffscreenCanvas is not supported in this environment");c=t.transferControlToOffscreen(),t._upscalerTransferred=!0}let m=document.createElement("canvas");m.width=l,m.height=d;let h=m.getContext("2d");this.realtimeLoopId&&(cancelAnimationFrame(this.realtimeLoopId),this.realtimeLoopId=null);let p={cmd:"realtimeInit",data:{upscaled:u?c:null,resolution:{width:l,height:d,scale:n,outputWidth:l*n,outputHeight:d*n},network_name:a.name,weights:o}};u&&c?this.getWorker().postMessage(p,[c]):this.getWorker().postMessage(p),this.realtimeState={running:!0,video:e,canvas:t,scale:n,busy:!1,frameIndex:0,captureCanvas:m,captureCtx:h};let f=async()=>{if(!this.realtimeState||!this.realtimeState.running)return;let e=this.realtimeState,t=e.video,r=t.HAVE_CURRENT_DATA||2;if(!t.paused&&!t.ended&&!e.busy&&t.readyState>=r&&t.videoWidth>0&&t.videoHeight>0){e.busy=!0;try{let r=e.captureCanvas,i=e.captureCtx;if(!r||!i)throw Error("Missing capture canvas");i.drawImage(t,0,0,r.width,r.height);let s=await createImageBitmap(r);e.frameIndex+=1,this.getWorker().postMessage({cmd:"realtimeFrame",frame:s},[s])}catch(e){console.warn("realtimeFrame error",e)}finally{this.realtimeState&&(this.realtimeState.busy=!1)}}this.realtimeLoopId=requestAnimationFrame(f)};this.realtimeLoopId=requestAnimationFrame(f)}stopRealtimeUpscale(){this.realtimeLoopId&&(cancelAnimationFrame(this.realtimeLoopId),this.realtimeLoopId=null),this.realtimeState&&(this.realtimeState.running=!1,this.realtimeState=null)}async downloadUpscaled(e,t,r=null){let i=e.type.startsWith("video"),s=t||this.networkSize,a=i?await this.upscaleVideo(e,s):await this.upscaleImage(e,s),o=URL.createObjectURL(a),n=document.createElement("a");return n.href=o,n.download=r||`upscaled_${Date.now()}.${i?"mp4":"png"}`,n.click(),URL.revokeObjectURL(o),a}getSupportedNetworks(){return Object.keys(this.networks)}static async getGPUCapability(){try{if(navigator.gpu){let e=await navigator.gpu.requestAdapter();if(e){let t=e.limits.maxStorageBufferBindingSize/512;return Math.min(t,0x4000000)}}let e=document.createElement("canvas").getContext("webgl2");if(e)return e.getParameter(e.MAX_TEXTURE_SIZE)**2;return 8388608}catch{return 8388608}}static getBackendType(){try{if(navigator.gpu)return"webgpu";if(document.createElement("canvas").getContext("webgl2"))return"webgl";return"unknown"}catch{return"unknown"}}getAppState(){return{backend:s.getBackendType(),isProcessing:!1,progress:0,width:0,height:0}}onProgress(e){"function"==typeof e&&(this.progressCallback=e)}dispose(){this.stopRealtimeUpscale(),this.workerInstance&&(this.workerInstance.terminate(),this.workerInstance=null),this.messageHandlers={},this.progressCallback=null,this.processingType=null,this.weightsCache.clear()}}r.default=s},{"@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],"6ykb1":[function(e,t,r,i){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["80h6e"],"80h6e","parcelRequire4dc0",{}); |