UNPKG

mediacanvas

Version:

Render videos or images at multiple locations on a canvas simultaneously

2 lines 4.55 kB
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MediaCanvas=t():e.MediaCanvas=t()}(window,function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";e.exports=r(1).default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();var i=t.MediaCanvas=function(){function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.clientWidth,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:t.clientHeight;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this._canvas=t,this._context=t.getContext("2d"),this._rendering=!1,this.items=[],this._coordinateWidth=r,this._coordinateHeight=n,this._horizontalScale=1,this._verticalScale=1,this._width=r,this._height=n,this._canvas.width=r,this._canvas.height=n,this._startPromiseResolver=null,this._stopPromiseResolver=null,this._requestRenderResolver=null,this._render=this._render.bind(this)}return n(e,[{key:"_render",value:function(){if(this._context){this._context.clearRect(0,0,this._width,this._height);var e=!0,t=!1,r=void 0;try{for(var n,i=this.items[Symbol.iterator]();!(e=(n=i.next()).done);e=!0){var o=n.value;this._context.drawImage(o.src,o.x*this._horizontalScale,o.y*this._verticalScale,o.width*this._horizontalScale,o.height*this._verticalScale)}}catch(e){t=!0,r=e}finally{try{!e&&i.return&&i.return()}finally{if(t)throw r}}}this._rendering?requestAnimationFrame(this._render):("function"==typeof this._stopPromiseResolver&&(this._stopPromiseResolver(),this._stopPromiseResolver=null),"function"==typeof this._requestRenderResolver&&(this._requestRenderResolver(),this._requestRenderResolver=null)),"function"==typeof this._startPromiseResolver&&(this._startPromiseResolver(),this._startPromiseResolver=null)}},{key:"setDimensions",value:function(e,t){this._width=e,this._canvas.width=e,this._horizontalScale=e/this._coordinateWidth,this._height=t,this._canvas.height=t,this._verticalScale=t/this._coordinateHeight,this._rendering||this._render()}},{key:"matchClientDimensions",value:function(){this.setDimensions(this._canvas.clientWidth,this._canvas.clientHeight)}},{key:"start",value:function(){var e=this;return new Promise(function(t,r){e._rendering?r(new Error("The renderer is already started.")):(e._rendering=!0,e._startPromiseResolver=t,requestAnimationFrame(e._render))})}},{key:"stop",value:function(){var e=this;return new Promise(function(t,r){e._rendering?(e._stopPromiseResolver=t,e._rendering=!1):r(new Error("The renderer is already stopped."))})}},{key:"requestRender",value:function(){var e=this;return new Promise(function(t,r){e._rendering?r(new Error("The renderer is already started.")):null!==e._requestRenderResolver?r(new Error("A render has already been scheduled.")):(e._requestRenderResolver=t,requestAnimationFrame(e._render))})}},{key:"rendering",get:function(){return this._rendering}},{key:"width",get:function(){return this._width},set:function(e){this.setDimensions(e,this._height)}},{key:"height",get:function(){return this._height},set:function(e){this.setDimensions(this._width,e)}},{key:"originalWidth",get:function(){return this._coordinateWidth}},{key:"originalHeight",get:function(){return this._coordinateHeight}}]),e}();t.default=i}])}); //# sourceMappingURL=mediacanvas.min.js.map