feat: add initial implementation of artplayer-proxy-canvas with core functionality

This commit is contained in:
Harvey Zack committed 2024-09-19 10:52:54 +08:00
1 parent 1605df2943
commit 57725e8e27
6 files changed
+47 -1

No files matched your search

+1 -1
View File
@@ -118,7 +118,7 @@ var art = new Artplayer({
## Proxys
- [Canvas](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas) (WIP)
- [Canvas](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas)
- [WebAV](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-webav/index.js&example=webav) (WIP)
## Changelog
+8
View File
@@ -0,0 +1,8 @@
/*!
* artplayer-proxy-canvas.js v1.0.0
* Github: https://github.com/zhw2590582/ArtPlayer
* (c) 2017-2024 Harvey Zack
* Released under the MIT License.
*/
!function(e,t,n,o,r){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},a="function"==typeof i[o]&&i[o],u=a.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function l(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof i[o]&&i[o];if(!n&&r)return r(t,!0);if(a)return a(t,!0);if(f&&"string"==typeof t)return f(t);var d=Error("Cannot find module '"+t+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},p.cache={};var c=u[t]=new l.Module(t);e[t][0].call(c.exports,p,c,c.exports,this)}return u[t].exports;function p(e){var t=p.resolve(e);return!1===t?{}:l(t)}}l.isParcelRequire=!0,l.Module=function(e){this.id=e,this.bundle=l,this.exports={}},l.modules=e,l.cache=u,l.parent=a,l.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(l,"root",{get:function(){return i[o]}}),i[o]=l;for(var d=0;d<t.length;d++)l(t[d]);if(n){var c=l(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define(function(){return c})}}({"4A0Ge":[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");function r(e){return t=>{let{constructor:n}=t,{createElement:o}=n.utils,r=o("canvas"),i=o("video"),a=r.getContext("2d"),u=null,f={};for(let e in r)"function"==typeof r[e]&&(f[e]=r[e].bind(r));for(let e in i)e in r||Object.defineProperty(r,e,{get(){let t=i[e];return"function"==typeof t?t.bind(i):t},set(t){i[e]=t},configurable:!0,enumerable:!0});for(let e in f)r[e]=function(...t){return e in f?f[e](...t):i[e].apply(i,t)};return function(){let{events:e}=n.config;setTimeout(()=>{e.forEach(e=>{t.proxy(i,e,e=>{t.emit(`video:${e.type}`,e)})})})}(),t.on("video:loadedmetadata",()=>{r.width=i.videoWidth,r.height=i.videoHeight}),t.on("video:play",()=>{cancelAnimationFrame(u),d()}),t.on("video:pause",()=>{cancelAnimationFrame(u)}),t.on("resize",()=>{(function(){let e,n;let o=t.template?.$player;if(!o||t.option.autoSize)return;let a=i.videoWidth/i.videoHeight,u=o.clientWidth,f=o.clientHeight;u/f>a?e=(n=f)*a:n=(e=u)/a,r.width=e,r.height=n;let l=(u-e)/2,d=(f-n)/2;Object.assign(r.style,{padding:`${d}px ${l}px`})})(),l()}),t.on("destroy",()=>{cancelAnimationFrame(u)}),r;async function l(){try{if("undefined"!=typeof createImageBitmap){let e=await createImageBitmap(i);a.drawImage(e,0,0,r.width,r.height),e.close()}else a.drawImage(i,0,0,r.width,r.height);e&&e(a,i),t.emit("artplayerProxyCanvas:draw",a,i)}catch(e){t.emit("artplayerProxyCanvas:error",e)}}async function d(){await l(),u=requestAnimationFrame(d)}}}o.defineInteropFlag(n),o.export(n,"default",()=>r),"undefined"!=typeof window&&(window.artplayerProxyCanvas=r)},{"@parcel/transformer-js/src/esmodule-helpers.js":"hqP7A"}],hqP7A:[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach(function(n){"default"===n||"__esModule"===n||Object.prototype.hasOwnProperty.call(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})}),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["4A0Ge"],"4A0Ge","parcelRequire94c2");
@@ -0,0 +1,8 @@
/*!
* artplayer-proxy-canvas.js v1.0.0
* Github: https://github.com/zhw2590582/ArtPlayer
* (c) 2017-2024 Harvey Zack
* Released under the MIT License.
*/
!function(e,r,t,n,o){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof a[n]&&a[n],u=i.cache||{},c="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(r,t){if(!u[r]){if(!e[r]){var o="function"==typeof a[n]&&a[n];if(!t&&o)return o(r,!0);if(i)return i(r,!0);if(c&&"string"==typeof r)return c(r);var f=Error("Cannot find module '"+r+"'");throw f.code="MODULE_NOT_FOUND",f}p.resolve=function(t){var n=e[r][1][t];return null!=n?n:t},p.cache={};var l=u[r]=new s.Module(r);e[r][0].call(l.exports,p,l,l.exports,this)}return u[r].exports;function p(e){var r=p.resolve(e);return!1===r?{}:s(r)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=u,s.parent=i,s.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]},Object.defineProperty(s,"root",{get:function(){return a[n]}}),a[n]=s;for(var f=0;f<r.length;f++)s(r[f]);if(t){var l=s(t);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd&&define(function(){return l})}}({duBsy:[function(e,r,t){var n=e("@parcel/transformer-js/src/esmodule-helpers.js");n.defineInteropFlag(t),n.export(t,"default",function(){return u});var o=e("@swc/helpers/_/_async_to_generator"),a=e("@swc/helpers/_/_to_consumable_array"),i=e("@swc/helpers/_/_ts_generator");function u(e){return function(r){var t,n=function(e){e in f||Object.defineProperty(f,e,{get:function(){var r=l[e];return"function"==typeof r?r.bind(l):r},set:function(r){l[e]=r},configurable:!0,enumerable:!0})},u=function(e){f[e]=function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return e in d?d[e].apply(d,(0,a._)(t)):l[e].apply(l,t)}},c=r.constructor,s=c.utils.createElement,f=s("canvas"),l=s("video"),p=f.getContext("2d"),_=null,d={};for(var y in f)"function"==typeof f[y]&&(d[y]=f[y].bind(f));for(var h in l)n(h);for(var m in d)u(m);return t=c.config.events,setTimeout(function(){t.forEach(function(e){r.proxy(l,e,function(e){r.emit("video:".concat(e.type),e)})})}),r.on("video:loadedmetadata",function(){f.width=l.videoWidth,f.height=l.videoHeight}),r.on("video:play",function(){cancelAnimationFrame(_),j()}),r.on("video:pause",function(){cancelAnimationFrame(_)}),r.on("resize",function(){(function(){var e,t,n,o=null===(e=r.template)||void 0===e?void 0:e.$player;if(o&&!r.option.autoSize){var a=l.videoWidth/l.videoHeight,i=o.clientWidth,u=o.clientHeight;i/u>a?t=(n=u)*a:n=(t=i)/a,f.width=t,f.height=n;var c=(i-t)/2,s=(u-n)/2;Object.assign(f.style,{padding:"".concat(s,"px ").concat(c,"px")})}})(),v()}),r.on("destroy",function(){cancelAnimationFrame(_)}),f;function v(){return b.apply(this,arguments)}function b(){return(b=(0,o._)(function(){var t,n;return(0,i._)(this,function(o){switch(o.label){case 0:if(o.trys.push([0,4,,5]),!("undefined"!=typeof createImageBitmap))return[3,2];return[4,createImageBitmap(l)];case 1:return t=o.sent(),p.drawImage(t,0,0,f.width,f.height),t.close(),[3,3];case 2:p.drawImage(l,0,0,f.width,f.height),o.label=3;case 3:return e&&e(p,l),r.emit("artplayerProxyCanvas:draw",p,l),[3,5];case 4:return n=o.sent(),r.emit("artplayerProxyCanvas:error",n),[3,5];case 5:return[2]}})})).apply(this,arguments)}function j(){return g.apply(this,arguments)}function g(){return(g=(0,o._)(function(){return(0,i._)(this,function(e){switch(e.label){case 0:return[4,v()];case 1:return e.sent(),_=requestAnimationFrame(j),[2]}})})).apply(this,arguments)}}}"undefined"!=typeof window&&(window.artplayerProxyCanvas=u)},{"@swc/helpers/_/_async_to_generator":"h1sPa","@swc/helpers/_/_to_consumable_array":"gPzaF","@swc/helpers/_/_ts_generator":"ilbUJ","@parcel/transformer-js/src/esmodule-helpers.js":"jOuxX"}],h1sPa:[function(e,r,t){var n=e("@parcel/transformer-js/src/esmodule-helpers.js");function o(e,r,t,n,o,a,i){try{var u=e[a](i),c=u.value}catch(e){t(e);return}u.done?r(c):Promise.resolve(c).then(n,o)}function a(e){return function(){var r=this,t=arguments;return new Promise(function(n,a){var i=e.apply(r,t);function u(e){o(i,n,a,u,c,"next",e)}function c(e){o(i,n,a,u,c,"throw",e)}u(void 0)})}}n.defineInteropFlag(t),n.export(t,"_async_to_generator",function(){return a}),n.export(t,"_",function(){return a})},{"@parcel/transformer-js/src/esmodule-helpers.js":"jOuxX"}],jOuxX:[function(e,r,t){t.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},t.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.exportAll=function(e,r){return Object.keys(e).forEach(function(t){"default"===t||"__esModule"===t||Object.prototype.hasOwnProperty.call(r,t)||Object.defineProperty(r,t,{enumerable:!0,get:function(){return e[t]}})}),r},t.export=function(e,r,t){Object.defineProperty(e,r,{enumerable:!0,get:t})}},{}],gPzaF:[function(e,r,t){var n=e("@parcel/transformer-js/src/esmodule-helpers.js");n.defineInteropFlag(t),n.export(t,"_to_consumable_array",funcLine truncated
@@ -0,0 +1,8 @@
/*!
* artplayer-proxy-canvas.js v1.0.0
* Github: https://github.com/zhw2590582/ArtPlayer
* (c) 2017-2024 Harvey Zack
* Released under the MIT License.
*/
!function(e,t,n,o,r){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},a="function"==typeof i[o]&&i[o],u=a.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function l(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof i[o]&&i[o];if(!n&&r)return r(t,!0);if(a)return a(t,!0);if(f&&"string"==typeof t)return f(t);var d=Error("Cannot find module '"+t+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},p.cache={};var c=u[t]=new l.Module(t);e[t][0].call(c.exports,p,c,c.exports,this)}return u[t].exports;function p(e){var t=p.resolve(e);return!1===t?{}:l(t)}}l.isParcelRequire=!0,l.Module=function(e){this.id=e,this.bundle=l,this.exports={}},l.modules=e,l.cache=u,l.parent=a,l.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(l,"root",{get:function(){return i[o]}}),i[o]=l;for(var d=0;d<t.length;d++)l(t[d]);if(n){var c=l(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define(function(){return c})}}({"4A0Ge":[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");function r(e){return t=>{let{constructor:n}=t,{createElement:o}=n.utils,r=o("canvas"),i=o("video"),a=r.getContext("2d"),u=null,f={};for(let e in r)"function"==typeof r[e]&&(f[e]=r[e].bind(r));for(let e in i)e in r||Object.defineProperty(r,e,{get(){let t=i[e];return"function"==typeof t?t.bind(i):t},set(t){i[e]=t},configurable:!0,enumerable:!0});for(let e in f)r[e]=function(...t){return e in f?f[e](...t):i[e].apply(i,t)};return function(){let{events:e}=n.config;setTimeout(()=>{e.forEach(e=>{t.proxy(i,e,e=>{t.emit(`video:${e.type}`,e)})})})}(),t.on("video:loadedmetadata",()=>{r.width=i.videoWidth,r.height=i.videoHeight}),t.on("video:play",()=>{cancelAnimationFrame(u),d()}),t.on("video:pause",()=>{cancelAnimationFrame(u)}),t.on("resize",()=>{(function(){let e,n;let o=t.template?.$player;if(!o||t.option.autoSize)return;let a=i.videoWidth/i.videoHeight,u=o.clientWidth,f=o.clientHeight;u/f>a?e=(n=f)*a:n=(e=u)/a,r.width=e,r.height=n;let l=(u-e)/2,d=(f-n)/2;Object.assign(r.style,{padding:`${d}px ${l}px`})})(),l()}),t.on("destroy",()=>{cancelAnimationFrame(u)}),r;async function l(){try{if("undefined"!=typeof createImageBitmap){let e=await createImageBitmap(i);a.drawImage(e,0,0,r.width,r.height),e.close()}else a.drawImage(i,0,0,r.width,r.height);e&&e(a,i),t.emit("artplayerProxyCanvas:draw",a,i)}catch(e){t.emit("artplayerProxyCanvas:error",e)}}async function d(){await l(),u=requestAnimationFrame(d)}}}o.defineInteropFlag(n),o.export(n,"default",()=>r),"undefined"!=typeof window&&(window.artplayerProxyCanvas=r)},{"@parcel/transformer-js/src/esmodule-helpers.js":"hqP7A"}],hqP7A:[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach(function(n){"default"===n||"__esModule"===n||Object.prototype.hasOwnProperty.call(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})}),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["4A0Ge"],"4A0Ge","parcelRequire94c2");
@@ -0,0 +1,8 @@
/*!
* artplayer-proxy-canvas.js v1.0.0
* Github: https://github.com/zhw2590582/ArtPlayer
* (c) 2017-2024 Harvey Zack
* Released under the MIT License.
*/
!function(e,r,t,n,o){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof a[n]&&a[n],u=i.cache||{},c="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(r,t){if(!u[r]){if(!e[r]){var o="function"==typeof a[n]&&a[n];if(!t&&o)return o(r,!0);if(i)return i(r,!0);if(c&&"string"==typeof r)return c(r);var f=Error("Cannot find module '"+r+"'");throw f.code="MODULE_NOT_FOUND",f}p.resolve=function(t){var n=e[r][1][t];return null!=n?n:t},p.cache={};var l=u[r]=new s.Module(r);e[r][0].call(l.exports,p,l,l.exports,this)}return u[r].exports;function p(e){var r=p.resolve(e);return!1===r?{}:s(r)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=u,s.parent=i,s.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]},Object.defineProperty(s,"root",{get:function(){return a[n]}}),a[n]=s;for(var f=0;f<r.length;f++)s(r[f]);if(t){var l=s(t);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd&&define(function(){return l})}}({duBsy:[function(e,r,t){var n=e("@parcel/transformer-js/src/esmodule-helpers.js");n.defineInteropFlag(t),n.export(t,"default",function(){return u});var o=e("@swc/helpers/_/_async_to_generator"),a=e("@swc/helpers/_/_to_consumable_array"),i=e("@swc/helpers/_/_ts_generator");function u(e){return function(r){var t,n=function(e){e in f||Object.defineProperty(f,e,{get:function(){var r=l[e];return"function"==typeof r?r.bind(l):r},set:function(r){l[e]=r},configurable:!0,enumerable:!0})},u=function(e){f[e]=function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return e in d?d[e].apply(d,(0,a._)(t)):l[e].apply(l,t)}},c=r.constructor,s=c.utils.createElement,f=s("canvas"),l=s("video"),p=f.getContext("2d"),_=null,d={};for(var y in f)"function"==typeof f[y]&&(d[y]=f[y].bind(f));for(var h in l)n(h);for(var m in d)u(m);return t=c.config.events,setTimeout(function(){t.forEach(function(e){r.proxy(l,e,function(e){r.emit("video:".concat(e.type),e)})})}),r.on("video:loadedmetadata",function(){f.width=l.videoWidth,f.height=l.videoHeight}),r.on("video:play",function(){cancelAnimationFrame(_),j()}),r.on("video:pause",function(){cancelAnimationFrame(_)}),r.on("resize",function(){(function(){var e,t,n,o=null===(e=r.template)||void 0===e?void 0:e.$player;if(o&&!r.option.autoSize){var a=l.videoWidth/l.videoHeight,i=o.clientWidth,u=o.clientHeight;i/u>a?t=(n=u)*a:n=(t=i)/a,f.width=t,f.height=n;var c=(i-t)/2,s=(u-n)/2;Object.assign(f.style,{padding:"".concat(s,"px ").concat(c,"px")})}})(),v()}),r.on("destroy",function(){cancelAnimationFrame(_)}),f;function v(){return b.apply(this,arguments)}function b(){return(b=(0,o._)(function(){var t,n;return(0,i._)(this,function(o){switch(o.label){case 0:if(o.trys.push([0,4,,5]),!("undefined"!=typeof createImageBitmap))return[3,2];return[4,createImageBitmap(l)];case 1:return t=o.sent(),p.drawImage(t,0,0,f.width,f.height),t.close(),[3,3];case 2:p.drawImage(l,0,0,f.width,f.height),o.label=3;case 3:return e&&e(p,l),r.emit("artplayerProxyCanvas:draw",p,l),[3,5];case 4:return n=o.sent(),r.emit("artplayerProxyCanvas:error",n),[3,5];case 5:return[2]}})})).apply(this,arguments)}function j(){return g.apply(this,arguments)}function g(){return(g=(0,o._)(function(){return(0,i._)(this,function(e){switch(e.label){case 0:return[4,v()];case 1:return e.sent(),_=requestAnimationFrame(j),[2]}})})).apply(this,arguments)}}}"undefined"!=typeof window&&(window.artplayerProxyCanvas=u)},{"@swc/helpers/_/_async_to_generator":"h1sPa","@swc/helpers/_/_to_consumable_array":"gPzaF","@swc/helpers/_/_ts_generator":"ilbUJ","@parcel/transformer-js/src/esmodule-helpers.js":"jOuxX"}],h1sPa:[function(e,r,t){var n=e("@parcel/transformer-js/src/esmodule-helpers.js");function o(e,r,t,n,o,a,i){try{var u=e[a](i),c=u.value}catch(e){t(e);return}u.done?r(c):Promise.resolve(c).then(n,o)}function a(e){return function(){var r=this,t=arguments;return new Promise(function(n,a){var i=e.apply(r,t);function u(e){o(i,n,a,u,c,"next",e)}function c(e){o(i,n,a,u,c,"throw",e)}u(void 0)})}}n.defineInteropFlag(t),n.export(t,"_async_to_generator",function(){return a}),n.export(t,"_",function(){return a})},{"@parcel/transformer-js/src/esmodule-helpers.js":"jOuxX"}],jOuxX:[function(e,r,t){t.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},t.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.exportAll=function(e,r){return Object.keys(e).forEach(function(t){"default"===t||"__esModule"===t||Object.prototype.hasOwnProperty.call(r,t)||Object.defineProperty(r,t,{enumerable:!0,get:function(){return e[t]}})}),r},t.export=function(e,r,t){Object.defineProperty(e,r,{enumerable:!0,get:t})}},{}],gPzaF:[function(e,r,t){var n=e("@parcel/transformer-js/src/esmodule-helpers.js");n.defineInteropFlag(t),n.export(t,"_to_consumable_array",funcLine truncated
@@ -89,6 +89,13 @@ const config = {
{ text: 'webtorrent.js', link: 'https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent' },
]
},
{
text: '代理',
collapsible: true,
items: [
{ text: 'Canvas', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas' },
]
},
],
'/en/': [
{
@@ -149,6 +156,13 @@ const config = {
{ text: 'webtorrent.js', link: 'https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent' },
]
},
{
text: 'Proxy',
collapsible: true,
items: [
{ text: 'Canvas', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas' },
]
},
],
},
editLink: {