p5.record.js 0.2.0 → 0.3.0

package/README.md

@@ -15,10 +15,10 @@ p5.record.js starts with a set of default configuration that covers the simplest
 To add p5.record.js to your sketch, include the following script tag in your HTML file:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/p5.record.js@0.1.2/dist/p5.record.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/p5.record.js@0.2.0/dist/p5.record.min.js"></script>
 ```
 
-ESM builds are also available either via CDN at https://cdn.jsdelivr.net/npm/p5.record.js@0.1.2-beta.0/dist/p5.record.esm.js or via NPM:
+ESM builds are also available either via CDN at https://cdn.jsdelivr.net/npm/p5.record.js@0.2.0/dist/p5.record.esm.js or via NPM:
 
 ```sh
 npm install p5.record.js

package/dist/p5.record.esm.js

@@ -1 +1 @@
-const e=function(){let e,t=[];for(let s=0;s<256;s++){e=s;for(let t=0;t<8;t++)e=1&e?3988292384^e>>>1:e>>>1;t[s]=e}return t}();const t=new TextEncoder;class s{#e=[];#t=[];#s=0;constructor(){}static generateCentralDirectoryHeader(e,s){const i=new ArrayBuffer(46+e.filename.length),r=new Uint8Array(i),n=new DataView(i);n.setUint32(0,1347092738),n.setUint16(4,20,!0),n.setUint16(6,20,!0),n.setUint16(12,e.modifyTime,!0),n.setUint16(14,e.modifyDate,!0),n.setUint32(16,e.checksum,!0),n.setUint32(20,e.compressedSize,!0),n.setUint32(24,e.uncompressedSize,!0),n.setUint16(28,e.filename.length,!0),n.setUint32(42,s,!0);const a=t.encode(e.filename);return r.set(a,46),n.buffer}addFile(e){const t=s.generateCentralDirectoryHeader(e,this.#s);this.#e.push(e),this.#t.push(t),this.#s+=e.localFileHeader.byteLength,this.#s+=e.content.length}pack(){const e=this.#t.reduce((e,t)=>e+=t.byteLength,0);this.#s+=e;const t=new ArrayBuffer(22),s=new DataView(t);s.setUint32(0,1347093766),s.setUint16(8,this.#e.length,!0),s.setUint16(10,this.#e.length,!0),s.setUint32(12,e,!0),s.setUint32(16,this.#s-e,!0);const i=[];for(const e of this.#e)i.push(e.localFileHeader),i.push(e.content);return i.push(...this.#t),i.push(s.buffer),new Blob(i)}}class i{modifyTime;modifyDate;checksum;compressedSize;uncompressedSize;filename;content;constructor(t,s){this.filename=t,this.content=s;const{date:i,time:r}=function(){const e=new Date;let t=e.getUTCHours();t<<=6,t|=e.getUTCMinutes(),t<<=5,t|=e.getUTCSeconds()/2;let s=e.getUTCFullYear()-1980;return s<<=4,s|=e.getUTCMonth()+1,s<<=5,s|=e.getUTCDate(),{date:s,time:t}}();this.modifyTime=r,this.modifyDate=i,this.checksum=function(t,s,i,r){const n=e,a=r+i;t^=-1;for(let e=r;e<a;e++)t=t>>>8^n[255&(t^s[e])];return-1^t}(0,s,s.length,0),this.compressedSize=s.length,this.uncompressedSize=s.length}get localFileHeader(){const e=new ArrayBuffer(30+this.filename.length),s=new Uint8Array(e),i=new DataView(e);i.setUint32(0,1347093252),i.setUint16(4,20,!0),i.setUint16(10,this.modifyTime,!0),i.setUint16(12,this.modifyDate,!0),i.setUint32(14,this.checksum,!0),i.setUint32(18,this.compressedSize,!0),i.setUint32(22,this.uncompressedSize,!0),i.setUint16(26,this.filename.length,!0);const r=t.encode(this.filename);return s.set(r,30),i.buffer}}const r={"image/png":"png","image/jpeg":"jpg","image/webp":"webp"};class n extends EventTarget{#i=0;#r;#n=[];#a;#o;#c;#m;#u=0;#h;state="inactive";constructor(e,t,s=60){super(),this.#r=e,this.#o=1e3/s,this.#h=t}start(){this.state="recording",this.dispatchEvent(new CustomEvent("start")),this.frame()}stop(){this.state="inactive",this.#a&&cancelAnimationFrame(this.#a);const e=Promise.all(this.#n.map(e=>e.arrayBuffer())),t=new s;e.then(e=>{for(let s=0;s<e.length;s++){const n=new i(`capture-${String(s+1).padStart(5,"0")}.${r[this.#h]}`,new Uint8Array(e[s]));t.addFile(n)}this.dispatchEvent(new CustomEvent("stop",{detail:{blob:t.pack()}}))})}pause(){this.state="paused",this.#a&&cancelAnimationFrame(this.#a),this.dispatchEvent(new CustomEvent("pause"))}resume(){this.state="recording",this.dispatchEvent(new CustomEvent("resume")),this.frame()}frame(e){if("recording"===this.state){if(this.#c=e-this.#m,this.#m=e,this.#u+=this.#c||0,this.#u>=this.#o||this.#o===Number.POSITIVE_INFINITY){this.#u=0;let e=this.#i;this.#r.toBlob(t=>{this.#n[e]=t},this.#h),this.#i++}this.#o<Number.POSITIVE_INFINITY&&(this.#a=requestAnimationFrame(this.frame.bind(this)))}}}class a{#d;#l;constructor(e){const t="manual"===e.frameRate?0:e.frameRate,s=[],i=e.source instanceof HTMLCanvasElement?e.source:e.source.canvas,a=i.captureStream(t);let o;o=Object.keys(r).includes(e.mimeType)?new n(i,e.mimeType,t):new MediaRecorder(a,{mimeType:e.mimeType??"video/webm;codecs=vp8"}),o.addEventListener("start",e=>{console.log("recording started")}),o.addEventListener("stop",t=>{let i,r;this.#l instanceof n?(i=t.detail.blob,r="recording.zip"):(i=new Blob(s),r="recording.webm");if("function"!=typeof e?.stopCallback||e?.stopCallback(i)){const e=URL.createObjectURL(i),t=document.createElement("a");t.href=e,t.download=r,t.click()}}),o.addEventListener("dataavailable",e=>{s.push(e.data)}),o.addEventListener("pause",e=>{console.log("recording paused")}),o.addEventListener("resume",e=>{console.log("recording resumed")}),this.#l=o,this.#d=a}get state(){return this.#l.state}start(){this.#l.start()}stop(){this.#l.stop()}pause(){this.#l.pause()}resume(){this.#l.resume()}frame(){this.#l instanceof n?this.#l.frame():this.#d.getVideoTracks()[0].requestFrame()}}function o(e,t,s){let i,n;const o=e.VERSION.split(".").map(e=>parseInt(e));o[0]>2||o[0]>2&&o[1]>0||2===o[0]&&0===o[1]&&o[2]>=3?(e.Recorder=a,s.postdraw=function(){i&&"recording"===i.state&&"manual"===n?.frameRate&&i.frame()},t.setRecording=function(e){"manual"!==e.frameRate||"CanvasCaptureMediaStreamTrack"in window||Object.keys(r).includes(e.mimeType)?n=e:console.error("Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.")},t.startRecording=function(){n=Object.assign({source:this.canvas,frameRate:this.getTargetFrameRate()},n),i=new a(n),i.start()},t.stopRecording=function(){i.stop()},t.pauseRecording=function(){i.pause()},t.resumeRecording=function(){i.resume()},t.createRecording=function(e){return new a(e)}):console.error("p5.record.js requires p5.js >= 2.0.3")}"undefined"!=typeof p5&&p5.registerAddon(o);export{a as Recorder,o as p5Record};
+function e(){let e,t=[];for(let n=0;n<256;n++){e=n;for(let t=0;t<8;t++)e=e&1?3988292384^e>>>1:e>>>1;t[n]=e}return t}const t=e();function n(e,n,r,i){let a=t,o=i+r;e^=-1;for(let t=i;t<o;t++)e=e>>>8^a[(e^n[t])&255];return e^-1}const r=new TextEncoder;var i=class e{#e=[];#t=[];#n=0;constructor(){}static generateCentralDirectoryHeader(e,t){let n=new ArrayBuffer(46+e.filename.length),i=new Uint8Array(n),a=new DataView(n);a.setUint32(0,1347092738),a.setUint16(4,20,!0),a.setUint16(6,20,!0),a.setUint16(12,e.modifyTime,!0),a.setUint16(14,e.modifyDate,!0),a.setUint32(16,e.checksum,!0),a.setUint32(20,e.compressedSize,!0),a.setUint32(24,e.uncompressedSize,!0),a.setUint16(28,e.filename.length,!0),a.setUint32(42,t,!0);let o=r.encode(e.filename);return i.set(o,46),a.buffer}addFile(t){let n=e.generateCentralDirectoryHeader(t,this.#n);this.#e.push(t),this.#t.push(n),this.#n+=t.localFileHeader.byteLength,this.#n+=t.content.length}pack(){let e=this.#t.reduce((e,t)=>(e+=t.byteLength,e),0);this.#n+=e;let t=new ArrayBuffer(22),n=new DataView(t);n.setUint32(0,1347093766),n.setUint16(8,this.#e.length,!0),n.setUint16(10,this.#e.length,!0),n.setUint32(12,e,!0),n.setUint32(16,this.#n-e,!0);let r=[];for(let e of this.#e)r.push(e.localFileHeader),r.push(e.content);return r.push(...this.#t),r.push(n.buffer),new Blob(r)}},a=class{modifyTime;modifyDate;checksum;compressedSize;uncompressedSize;filename;content;constructor(e,t){this.filename=e,this.content=t;let{date:r,time:i}=o();this.modifyTime=i,this.modifyDate=r,this.checksum=n(0,t,t.length,0),this.compressedSize=t.length,this.uncompressedSize=t.length}get localFileHeader(){let e=new ArrayBuffer(30+this.filename.length),t=new Uint8Array(e),n=new DataView(e);n.setUint32(0,1347093252),n.setUint16(4,20,!0),n.setUint16(10,this.modifyTime,!0),n.setUint16(12,this.modifyDate,!0),n.setUint32(14,this.checksum,!0),n.setUint32(18,this.compressedSize,!0),n.setUint32(22,this.uncompressedSize,!0),n.setUint16(26,this.filename.length,!0);let i=r.encode(this.filename);return t.set(i,30),n.buffer}};function o(){let e=new Date,t=e.getUTCHours();t<<=6,t|=e.getUTCMinutes(),t<<=5,t|=e.getUTCSeconds()/2;let n=e.getUTCFullYear()-1980;return n<<=4,n|=e.getUTCMonth()+1,n<<=5,n|=e.getUTCDate(),{date:n,time:t}}const s={"image/png":`png`,"image/jpeg":`jpg`,"image/webp":`webp`};var c=class extends EventTarget{#e=0;#t;#n=[];#r;#i;#a;#o;#s=0;#c;state=`inactive`;constructor(e,t,n=60){super(),this.#t=e,this.#i=1e3/n,this.#c=t}start(){this.state=`recording`,this.dispatchEvent(new CustomEvent(`start`)),this.frame()}stop(){this.state=`inactive`,this.#r&&cancelAnimationFrame(this.#r);let e=Promise.all(this.#n.map(e=>e.arrayBuffer())),t=new i;e.then(e=>{for(let n=0;n<e.length;n++){let r=new a(`capture-${String(n+1).padStart(5,`0`)}.${s[this.#c]}`,new Uint8Array(e[n]));t.addFile(r)}this.dispatchEvent(new CustomEvent(`stop`,{detail:{blob:t.pack()}}))})}pause(){this.state=`paused`,this.#r&&cancelAnimationFrame(this.#r),this.dispatchEvent(new CustomEvent(`pause`))}resume(){this.state=`recording`,this.dispatchEvent(new CustomEvent(`resume`)),this.frame()}frame(e){if(this.state===`recording`){if(this.#a=e-this.#o,this.#o=e,this.#s+=this.#a||0,this.#s>=this.#i||this.#i===1/0){this.#s=0;let e=this.#e;this.#t.toBlob(t=>{this.#n[e]=t},this.#c),this.#e++}this.#i<1/0&&(this.#r=requestAnimationFrame(this.frame.bind(this)))}}},l=class{#e;#t;constructor(e){let t=e.frameRate===`manual`?0:e.frameRate,n=[],r=e.source instanceof HTMLCanvasElement?e.source:e.source.canvas,i=r.captureStream(t),a;a=Object.keys(s).includes(e.mimeType)?new c(r,e.mimeType,t):new MediaRecorder(i,{mimeType:e.mimeType??`video/webm;codecs=vp8`}),a.addEventListener(`start`,()=>{console.log(`recording started`)}),a.addEventListener(`stop`,t=>{let r,i;if(this.#t instanceof c?(r=t.detail.blob,i=`recording.zip`):(r=new Blob(n),i=`recording.webm`),typeof e?.stopCallback!=`function`||e?.stopCallback(r)){let e=URL.createObjectURL(r),t=document.createElement(`a`);t.href=e,t.download=i,t.click()}}),a.addEventListener(`dataavailable`,e=>{n.push(e.data)}),a.addEventListener(`pause`,()=>{console.log(`recording paused`)}),a.addEventListener(`resume`,()=>{console.log(`recording resumed`)}),this.#t=a,this.#e=i}get state(){return this.#t.state}start(){this.#t.start()}stop(){this.#t.stop()}pause(){this.#t.pause()}resume(){this.#t.resume()}frame(){this.#t instanceof c?this.#t.frame():this.#e.getVideoTracks()[0].requestFrame()}};function u(e,t,n){let r,i,a=e.VERSION.split(`.`).map(e=>parseInt(e));if(!(a[0]>2||a[0]===2&&a[1]>0||a[0]===2&&a[1]===0&&a[2]>=3)){console.error(`p5.record.js requires p5.js >= 2.0.3`);return}e.Recorder=l,n.postdraw=function(){r&&r.state===`recording`&&i?.frameRate===`manual`&&r.frame()},t.setRecording=function(e){if(e.frameRate===`manual`&&!(`CanvasCaptureMediaStreamTrack`in window)&&!Object.keys(s).includes(e.mimeType)){console.error(`Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.`);return}i=e},t.startRecording=function(){i=Object.assign({source:this.canvas,frameRate:this.getTargetFrameRate(),stopCallback:this._customActions?.recordingStopped},i),r=new l(i),r.start()},t.stopRecording=function(){r.stop()},t.pauseRecording=function(){r.pause()},t.resumeRecording=function(){r.resume()},t.createRecording=function(e){return new l(e)}}typeof p5<`u`&&p5.registerAddon(u);export{l as Recorder,u as p5Record};

package/dist/p5.record.min.js

@@ -1 +1 @@
-!function(e){"use strict";const t=function(){let e,t=[];for(let s=0;s<256;s++){e=s;for(let t=0;t<8;t++)e=1&e?3988292384^e>>>1:e>>>1;t[s]=e}return t}();const s=new TextEncoder;class i{#e=[];#t=[];#s=0;constructor(){}static generateCentralDirectoryHeader(e,t){const i=new ArrayBuffer(46+e.filename.length),r=new Uint8Array(i),n=new DataView(i);n.setUint32(0,1347092738),n.setUint16(4,20,!0),n.setUint16(6,20,!0),n.setUint16(12,e.modifyTime,!0),n.setUint16(14,e.modifyDate,!0),n.setUint32(16,e.checksum,!0),n.setUint32(20,e.compressedSize,!0),n.setUint32(24,e.uncompressedSize,!0),n.setUint16(28,e.filename.length,!0),n.setUint32(42,t,!0);const a=s.encode(e.filename);return r.set(a,46),n.buffer}addFile(e){const t=i.generateCentralDirectoryHeader(e,this.#s);this.#e.push(e),this.#t.push(t),this.#s+=e.localFileHeader.byteLength,this.#s+=e.content.length}pack(){const e=this.#t.reduce((e,t)=>e+=t.byteLength,0);this.#s+=e;const t=new ArrayBuffer(22),s=new DataView(t);s.setUint32(0,1347093766),s.setUint16(8,this.#e.length,!0),s.setUint16(10,this.#e.length,!0),s.setUint32(12,e,!0),s.setUint32(16,this.#s-e,!0);const i=[];for(const e of this.#e)i.push(e.localFileHeader),i.push(e.content);return i.push(...this.#t),i.push(s.buffer),new Blob(i)}}class r{modifyTime;modifyDate;checksum;compressedSize;uncompressedSize;filename;content;constructor(e,s){this.filename=e,this.content=s;const{date:i,time:r}=function(){const e=new Date;let t=e.getUTCHours();t<<=6,t|=e.getUTCMinutes(),t<<=5,t|=e.getUTCSeconds()/2;let s=e.getUTCFullYear()-1980;return s<<=4,s|=e.getUTCMonth()+1,s<<=5,s|=e.getUTCDate(),{date:s,time:t}}();this.modifyTime=r,this.modifyDate=i,this.checksum=function(e,s,i,r){const n=t,a=r+i;e^=-1;for(let t=r;t<a;t++)e=e>>>8^n[255&(e^s[t])];return-1^e}(0,s,s.length,0),this.compressedSize=s.length,this.uncompressedSize=s.length}get localFileHeader(){const e=new ArrayBuffer(30+this.filename.length),t=new Uint8Array(e),i=new DataView(e);i.setUint32(0,1347093252),i.setUint16(4,20,!0),i.setUint16(10,this.modifyTime,!0),i.setUint16(12,this.modifyDate,!0),i.setUint32(14,this.checksum,!0),i.setUint32(18,this.compressedSize,!0),i.setUint32(22,this.uncompressedSize,!0),i.setUint16(26,this.filename.length,!0);const r=s.encode(this.filename);return t.set(r,30),i.buffer}}const n={"image/png":"png","image/jpeg":"jpg","image/webp":"webp"};class a extends EventTarget{#i=0;#r;#n=[];#a;#o;#c;#m;#u=0;#h;state="inactive";constructor(e,t,s=60){super(),this.#r=e,this.#o=1e3/s,this.#h=t}start(){this.state="recording",this.dispatchEvent(new CustomEvent("start")),this.frame()}stop(){this.state="inactive",this.#a&&cancelAnimationFrame(this.#a);const e=Promise.all(this.#n.map(e=>e.arrayBuffer())),t=new i;e.then(e=>{for(let s=0;s<e.length;s++){const i=new r(`capture-${String(s+1).padStart(5,"0")}.${n[this.#h]}`,new Uint8Array(e[s]));t.addFile(i)}this.dispatchEvent(new CustomEvent("stop",{detail:{blob:t.pack()}}))})}pause(){this.state="paused",this.#a&&cancelAnimationFrame(this.#a),this.dispatchEvent(new CustomEvent("pause"))}resume(){this.state="recording",this.dispatchEvent(new CustomEvent("resume")),this.frame()}frame(e){if("recording"===this.state){if(this.#c=e-this.#m,this.#m=e,this.#u+=this.#c||0,this.#u>=this.#o||this.#o===Number.POSITIVE_INFINITY){this.#u=0;let e=this.#i;this.#r.toBlob(t=>{this.#n[e]=t},this.#h),this.#i++}this.#o<Number.POSITIVE_INFINITY&&(this.#a=requestAnimationFrame(this.frame.bind(this)))}}}class o{#d;#l;constructor(e){const t="manual"===e.frameRate?0:e.frameRate,s=[],i=e.source instanceof HTMLCanvasElement?e.source:e.source.canvas,r=i.captureStream(t);let o;o=Object.keys(n).includes(e.mimeType)?new a(i,e.mimeType,t):new MediaRecorder(r,{mimeType:e.mimeType??"video/webm;codecs=vp8"}),o.addEventListener("start",e=>{console.log("recording started")}),o.addEventListener("stop",t=>{let i,r;this.#l instanceof a?(i=t.detail.blob,r="recording.zip"):(i=new Blob(s),r="recording.webm");if("function"!=typeof e?.stopCallback||e?.stopCallback(i)){const e=URL.createObjectURL(i),t=document.createElement("a");t.href=e,t.download=r,t.click()}}),o.addEventListener("dataavailable",e=>{s.push(e.data)}),o.addEventListener("pause",e=>{console.log("recording paused")}),o.addEventListener("resume",e=>{console.log("recording resumed")}),this.#l=o,this.#d=r}get state(){return this.#l.state}start(){this.#l.start()}stop(){this.#l.stop()}pause(){this.#l.pause()}resume(){this.#l.resume()}frame(){this.#l instanceof a?this.#l.frame():this.#d.getVideoTracks()[0].requestFrame()}}function c(e,t,s){let i,r;const a=e.VERSION.split(".").map(e=>parseInt(e));a[0]>2||a[0]>2&&a[1]>0||2===a[0]&&0===a[1]&&a[2]>=3?(e.Recorder=o,s.postdraw=function(){i&&"recording"===i.state&&"manual"===r?.frameRate&&i.frame()},t.setRecording=function(e){"manual"!==e.frameRate||"CanvasCaptureMediaStreamTrack"in window||Object.keys(n).includes(e.mimeType)?r=e:console.error("Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.")},t.startRecording=function(){r=Object.assign({source:this.canvas,frameRate:this.getTargetFrameRate()},r),i=new o(r),i.start()},t.stopRecording=function(){i.stop()},t.pauseRecording=function(){i.pause()},t.resumeRecording=function(){i.resume()},t.createRecording=function(e){return new o(e)}):console.error("p5.record.js requires p5.js >= 2.0.3")}"undefined"!=typeof p5&&p5.registerAddon(c),e.Recorder=o,e.p5Record=c}({});
+(function(e){function t(){let e,t=[];for(let n=0;n<256;n++){e=n;for(let t=0;t<8;t++)e=e&1?3988292384^e>>>1:e>>>1;t[n]=e}return t}let n=t();function r(e,t,r,i){let a=n,o=i+r;e^=-1;for(let n=i;n<o;n++)e=e>>>8^a[(e^t[n])&255];return e^-1}let i=new TextEncoder;var a=class e{#e=[];#t=[];#n=0;constructor(){}static generateCentralDirectoryHeader(e,t){let n=new ArrayBuffer(46+e.filename.length),r=new Uint8Array(n),a=new DataView(n);a.setUint32(0,1347092738),a.setUint16(4,20,!0),a.setUint16(6,20,!0),a.setUint16(12,e.modifyTime,!0),a.setUint16(14,e.modifyDate,!0),a.setUint32(16,e.checksum,!0),a.setUint32(20,e.compressedSize,!0),a.setUint32(24,e.uncompressedSize,!0),a.setUint16(28,e.filename.length,!0),a.setUint32(42,t,!0);let o=i.encode(e.filename);return r.set(o,46),a.buffer}addFile(t){let n=e.generateCentralDirectoryHeader(t,this.#n);this.#e.push(t),this.#t.push(n),this.#n+=t.localFileHeader.byteLength,this.#n+=t.content.length}pack(){let e=this.#t.reduce((e,t)=>(e+=t.byteLength,e),0);this.#n+=e;let t=new ArrayBuffer(22),n=new DataView(t);n.setUint32(0,1347093766),n.setUint16(8,this.#e.length,!0),n.setUint16(10,this.#e.length,!0),n.setUint32(12,e,!0),n.setUint32(16,this.#n-e,!0);let r=[];for(let e of this.#e)r.push(e.localFileHeader),r.push(e.content);return r.push(...this.#t),r.push(n.buffer),new Blob(r)}},o=class{modifyTime;modifyDate;checksum;compressedSize;uncompressedSize;filename;content;constructor(e,t){this.filename=e,this.content=t;let{date:n,time:i}=s();this.modifyTime=i,this.modifyDate=n,this.checksum=r(0,t,t.length,0),this.compressedSize=t.length,this.uncompressedSize=t.length}get localFileHeader(){let e=new ArrayBuffer(30+this.filename.length),t=new Uint8Array(e),n=new DataView(e);n.setUint32(0,1347093252),n.setUint16(4,20,!0),n.setUint16(10,this.modifyTime,!0),n.setUint16(12,this.modifyDate,!0),n.setUint32(14,this.checksum,!0),n.setUint32(18,this.compressedSize,!0),n.setUint32(22,this.uncompressedSize,!0),n.setUint16(26,this.filename.length,!0);let r=i.encode(this.filename);return t.set(r,30),n.buffer}};function s(){let e=new Date,t=e.getUTCHours();t<<=6,t|=e.getUTCMinutes(),t<<=5,t|=e.getUTCSeconds()/2;let n=e.getUTCFullYear()-1980;return n<<=4,n|=e.getUTCMonth()+1,n<<=5,n|=e.getUTCDate(),{date:n,time:t}}let c={"image/png":`png`,"image/jpeg":`jpg`,"image/webp":`webp`};var l=class extends EventTarget{#e=0;#t;#n=[];#r;#i;#a;#o;#s=0;#c;state=`inactive`;constructor(e,t,n=60){super(),this.#t=e,this.#i=1e3/n,this.#c=t}start(){this.state=`recording`,this.dispatchEvent(new CustomEvent(`start`)),this.frame()}stop(){this.state=`inactive`,this.#r&&cancelAnimationFrame(this.#r);let e=Promise.all(this.#n.map(e=>e.arrayBuffer())),t=new a;e.then(e=>{for(let n=0;n<e.length;n++){let r=new o(`capture-${String(n+1).padStart(5,`0`)}.${c[this.#c]}`,new Uint8Array(e[n]));t.addFile(r)}this.dispatchEvent(new CustomEvent(`stop`,{detail:{blob:t.pack()}}))})}pause(){this.state=`paused`,this.#r&&cancelAnimationFrame(this.#r),this.dispatchEvent(new CustomEvent(`pause`))}resume(){this.state=`recording`,this.dispatchEvent(new CustomEvent(`resume`)),this.frame()}frame(e){if(this.state===`recording`){if(this.#a=e-this.#o,this.#o=e,this.#s+=this.#a||0,this.#s>=this.#i||this.#i===1/0){this.#s=0;let e=this.#e;this.#t.toBlob(t=>{this.#n[e]=t},this.#c),this.#e++}this.#i<1/0&&(this.#r=requestAnimationFrame(this.frame.bind(this)))}}},u=class{#e;#t;constructor(e){let t=e.frameRate===`manual`?0:e.frameRate,n=[],r=e.source instanceof HTMLCanvasElement?e.source:e.source.canvas,i=r.captureStream(t),a;a=Object.keys(c).includes(e.mimeType)?new l(r,e.mimeType,t):new MediaRecorder(i,{mimeType:e.mimeType??`video/webm;codecs=vp8`}),a.addEventListener(`start`,()=>{console.log(`recording started`)}),a.addEventListener(`stop`,t=>{let r,i;if(this.#t instanceof l?(r=t.detail.blob,i=`recording.zip`):(r=new Blob(n),i=`recording.webm`),typeof e?.stopCallback!=`function`||e?.stopCallback(r)){let e=URL.createObjectURL(r),t=document.createElement(`a`);t.href=e,t.download=i,t.click()}}),a.addEventListener(`dataavailable`,e=>{n.push(e.data)}),a.addEventListener(`pause`,()=>{console.log(`recording paused`)}),a.addEventListener(`resume`,()=>{console.log(`recording resumed`)}),this.#t=a,this.#e=i}get state(){return this.#t.state}start(){this.#t.start()}stop(){this.#t.stop()}pause(){this.#t.pause()}resume(){this.#t.resume()}frame(){this.#t instanceof l?this.#t.frame():this.#e.getVideoTracks()[0].requestFrame()}};function d(e,t,n){let r,i,a=e.VERSION.split(`.`).map(e=>parseInt(e));if(!(a[0]>2||a[0]===2&&a[1]>0||a[0]===2&&a[1]===0&&a[2]>=3)){console.error(`p5.record.js requires p5.js >= 2.0.3`);return}e.Recorder=u,n.postdraw=function(){r&&r.state===`recording`&&i?.frameRate===`manual`&&r.frame()},t.setRecording=function(e){if(e.frameRate===`manual`&&!(`CanvasCaptureMediaStreamTrack`in window)&&!Object.keys(c).includes(e.mimeType)){console.error(`Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.`);return}i=e},t.startRecording=function(){i=Object.assign({source:this.canvas,frameRate:this.getTargetFrameRate(),stopCallback:this._customActions?.recordingStopped},i),r=new u(i),r.start()},t.stopRecording=function(){r.stop()},t.pauseRecording=function(){r.pause()},t.resumeRecording=function(){r.resume()},t.createRecording=function(e){return new u(e)}}return typeof p5<`u`&&p5.registerAddon(d),e.Recorder=u,e.p5Record=d,e})({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.record.js",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "p5.js addon providing functions to record HTML canvas based sketches",
   "homepage": "https://github.com/limzykenneth/p5.record.js",
   "bugs": "https://github.com/limzykenneth/p5.record.js/issues",
@@ -26,12 +26,11 @@
   },
   "browser": "./dist/p5.record.min.js",
   "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "dev": "rollup -c rollup.config.js --watch",
+    "build": "rolldown -c rolldown.config.ts",
+    "dev": "rolldown -c rolldown.config.ts --watch",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.41.1"
+    "rolldown": "^1.0.0-beta.55"
   }
 }

package/src/{Recorder.js → Recorder.ts}

@@ -1,10 +1,19 @@
 import { SequenceRecorder, imageTypesMap } from "./SequenceRecorder";
 
+interface RecorderOptions {
+  frameRate: "manual" | number,
+  source: HTMLCanvasElement | {
+    canvas: HTMLCanvasElement
+  },
+  mimeType?: string,
+  stopCallback?: (blob: Blob) => void
+}
+
 export class Recorder {
-  #stream;
-  #recorder;
+  #stream: MediaStream;
+  #recorder: MediaRecorder | SequenceRecorder;
 
-  constructor(options) {
+  constructor(options: RecorderOptions) {
     const frameRate = options.frameRate === "manual" ? 0 : options.frameRate;
     const chunks = [];
     const canvas = (
@@ -13,7 +22,7 @@ export class Recorder {
         options.source.canvas
     );
     const stream = canvas.captureStream(frameRate);
-    let recorder;
+    let recorder: MediaRecorder | SequenceRecorder;
     if(Object.keys(imageTypesMap).includes(options.mimeType)){
       recorder = new SequenceRecorder(canvas, options.mimeType, frameRate);
     }else{
@@ -22,15 +31,15 @@ export class Recorder {
       });
     }
 
-    recorder.addEventListener("start", (e) => {
+    recorder.addEventListener("start", () => {
       console.log("recording started");
     });
 
-    recorder.addEventListener("stop", (e) => {
-      let blob, filename;
+    recorder.addEventListener("stop", (e: Event) => {
+      let blob: Blob, filename: string;
 
       if(this.#recorder instanceof SequenceRecorder){
-        blob = e.detail.blob;
+        blob = (e as CustomEvent).detail.blob;
         filename = "recording.zip";
       }else{
         blob = new Blob(chunks);
@@ -50,15 +59,15 @@ export class Recorder {
       }
     });
 
-    recorder.addEventListener("dataavailable", (e) => {
+    (recorder as MediaRecorder).addEventListener("dataavailable", (e: BlobEvent) => {
       chunks.push(e.data);
     });
 
-    recorder.addEventListener("pause", (e) => {
+    recorder.addEventListener("pause", () => {
       console.log("recording paused");
     });
 
-    recorder.addEventListener("resume", (e) => {
+    recorder.addEventListener("resume", () => {
       console.log("recording resumed");
     });
 
@@ -90,7 +99,7 @@ export class Recorder {
     if(this.#recorder instanceof SequenceRecorder){
       this.#recorder.frame();
     }else{
-      this.#stream.getVideoTracks()[0].requestFrame();
+      (this.#stream.getVideoTracks()[0] as CanvasCaptureMediaStreamTrack).requestFrame();
     }
   }
 }

package/src/{SequenceRecorder.js → SequenceRecorder.ts}

@@ -8,17 +8,21 @@ export const imageTypesMap = {
 
 export class SequenceRecorder extends EventTarget {
 	#counter = 0;
-	#source;
+	#source: HTMLCanvasElement;
 	#images = [];
-	#animationFrame;
-	#timePerFrame;
-	#deltaTime;
-	#previousTimestamp;
+	#animationFrame: number;
+	#timePerFrame: number;
+	#deltaTime: number;
+	#previousTimestamp: number;
 	#accumulator = 0;
-	#mimeType;
+	#mimeType: keyof typeof imageTypesMap;
 	state = "inactive";
 
-	constructor(source, mimeType, frameRate = 60) {
+	constructor(
+		source: HTMLCanvasElement,
+		mimeType: keyof typeof imageTypesMap,
+		frameRate = 60
+	) {
 		super();
 		this.#source = source;
 		this.#timePerFrame = 1000 / frameRate;
@@ -73,7 +77,7 @@ export class SequenceRecorder extends EventTarget {
 		this.frame();
 	}
 
-	frame(timestamp) {
+	frame(timestamp?: DOMHighResTimeStamp) {
 		if(this.state === "recording"){
 			this.#deltaTime = timestamp - this.#previousTimestamp;
 			this.#previousTimestamp = timestamp;

package/src/{Zip.js → Zip.ts}

@@ -1,4 +1,4 @@
-import { crc32 } from "./crc32.js";
+import { crc32 } from "./crc32";
 
 const textEncoder = new TextEncoder();
 
@@ -9,7 +9,10 @@ export class Zip {
 
 	constructor(){}
 
-	static generateCentralDirectoryHeader(file, localFileHeaderOffset){
+	static generateCentralDirectoryHeader(
+		file: FileEntry,
+		localFileHeaderOffset: number
+	): ArrayBuffer {
 		const buf = new ArrayBuffer(46 + file.filename.length);
 		const arr = new Uint8Array(buf);
 		const view = new DataView(buf);
@@ -41,7 +44,7 @@ export class Zip {
 		return view.buffer;
 	}
 
-	addFile(file){
+	addFile(file: FileEntry){
 		const centralDirectory = Zip.generateCentralDirectoryHeader(file, this.#currentOffset);
 		this.#files.push(file);
 
@@ -91,15 +94,15 @@ export class Zip {
 }
 
 export class FileEntry {
-	modifyTime;
-	modifyDate;
-	checksum;
-	compressedSize;
-	uncompressedSize;
-	filename;
-	content;
-
-	constructor(filename, content){
+	modifyTime: number;
+	modifyDate: number;
+	checksum: number;
+	compressedSize: number;
+	uncompressedSize: number;
+	filename: string;
+	content: Uint8Array;
+
+	constructor(filename: string, content: Uint8Array){
 		this.filename = filename;
 		this.content = content;
 		const { date, time } = getDosDateTime();
@@ -139,7 +142,7 @@ export class FileEntry {
 	}
 }
 
-function getDosDateTime(){
+function getDosDateTime(): {date: number, time: number}{
 	const date = new Date();
 
 	let dosTime = date.getUTCHours();

package/src/{crc32.js → crc32.ts}

@@ -13,7 +13,7 @@
  */
 
 function makeTable() {
-    let c, table = [];
+    let c: number, table = [];
 
     for(let n =0; n < 256; n++){
         c = n;
@@ -29,7 +29,7 @@ function makeTable() {
 // Create table on load. Just 255 signed longs. Not a problem.
 const crcTable = makeTable();
 
-export function crc32(crc, buf, len, pos) {
+export function crc32(crc: number, buf: number, len: number, pos: number): number {
     const t = crcTable, end = pos + len;
 
     crc = crc ^ (-1);

package/src/{main.js → main.ts}

@@ -1,5 +1,5 @@
-import { Recorder } from "./Recorder.js";
-import { imageTypesMap } from "./SequenceRecorder.js";
+import { Recorder } from "./Recorder";
+import { imageTypesMap } from "./SequenceRecorder";
 
 export function p5Record(p5, fn, lifecycles){
   let recorder, options;
@@ -8,7 +8,7 @@ export function p5Record(p5, fn, lifecycles){
     .map((n) => parseInt(n));
   if(!(
     p5VersionSemver[0] > 2 ||
-    (p5VersionSemver[0] > 2 && p5VersionSemver[1] > 0) ||
+    (p5VersionSemver[0] === 2 && p5VersionSemver[1] > 0) ||
     (p5VersionSemver[0] === 2 && p5VersionSemver[1] === 0 && p5VersionSemver[2] >= 3)
   )){
     console.error(`p5.record.js requires p5.js >= 2.0.3`);
@@ -40,7 +40,8 @@ export function p5Record(p5, fn, lifecycles){
   fn.startRecording = function() {
     options = Object.assign({
       source: this.canvas,
-      frameRate: this.getTargetFrameRate()
+      frameRate: this.getTargetFrameRate(),
+      stopCallback: this._customActions?.recordingStopped
     }, options);
     recorder = new Recorder(options);
     recorder.start();

package/src/{utils.js → utils.ts}

@@ -1,4 +1,4 @@
-export function buf2hex(buffer) { // buffer is an ArrayBuffer
+export function buf2hex(buffer: ArrayBuffer): string {
   return [...new Uint8Array(buffer)]
       .map(x => x.toString(16).padStart(2, '0'))
       .join('');