p5.record.js 0.1.2 → 0.2.0

package/README.md

@@ -1,14 +1,15 @@
 # p5.record.js
 
-Record your p5.js sketch and export it as a video.
+Record your p5.js sketch and export it as a video or image sequence.
 
-This p5.js addon library provides a simple interface to record your p5.js sketch into a video by using the [`captureStream()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream) API of `HTMLCanvasElement`. No external dependencies is included with this library.
+This p5.js addon library provides a simple interface to record your p5.js sketch into a video or image sequence by using the [`captureStream()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream) or [`toBlob`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) APIs of `HTMLCanvasElement`. No external dependencies is included or required with this library.
 
 p5.record.js starts with a set of default configuration that covers the simplest and likely most common use, while also providing additional customization options to achieve additional functionalities:
 
 * Recording at specific defined frame rate, and in supported browsers, full control over [when individual frame capture should happen](https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptureMediaStreamTrack/requestFrame).
 * Record canvas backed objects, such as `p5.Graphics`, and HTML canvas directly.
 * Create multiple recordings at the same time.
+* Record image sequence.
 
 ## Usage
 To add p5.record.js to your sketch, include the following script tag in your HTML file:
@@ -35,7 +36,7 @@ For different use cases, please check out the `examples/` folder. The available
   ```
   * `frameRate` - (`Number|"manual"`) If `options.frameRate` is set to a string with value `"manual"`, sketch recording will automatically be tied to each call of `draw()`. This is useful when you have set the sketch to `noLoop()` and is manually calling `redraw()`, only available in supported browsers.
   * `source` - An object containing a property of `canvas` of type `HTMLCanvasElement` (eg. `p5.Graphics` instance) or an `HTMLCanvasElement`.
-  * `mimeType` - The container and codec to be used for recording. Currently only a very small set of containers and codecs are supported natively, it is recommended to leave the default and reencode the video after downloading the result.
+  * `mimeType` - The container and codec to be used for recording. Currently only a very small set of containers and codecs are supported natively, it is recommended to leave the default and reencode the video after downloading the result. Set this to `image/png`, `image/jpeg`, or `image/webp` to capture image sequence instead of video, will download a zip file instead.
 * `startRecording()` - Start recording at specified frame rate.
 * `stopRecording()` - Stop recording and download the recording file.
 * `pauseRecording()` - Pause recording to be resumed later.
@@ -56,8 +57,10 @@ The library also provides a `p5.Recorder` class for multiple simultaneous record
 ## Limitations
 This library is only designed for canvas backed sketches and objects, recording of other inputs (eg. SVG) is not supported.
 
-Currently the recording output format is limited to VP8 encoded WebM video file, depending on use case you may need to reencode the video to a different format.
+Currently the video recording output format is limited to VP8 encoded WebM video file, depending on use case you may need to reencode the video to a different format.
+
+For image sequence recording, PNG, JPEG, and WebP formats are supported (except for Safari which does not support WebP). The image sequence will be downloaded as a Zip file with no compression applied. When capturing image sequence, you are more likely to encounter physical limits such as RAM limits or Zip file limits (archive size is currently limited to 4GB and 65,535 entries, I may implement ZIP64 later but it is a little bit less commonly supported, you may run out of RAM first anyway).
 
 ## Future features
 * Custom output video formats
-* Record as gif and image sequence
+* Record as gif

package/dist/p5.record.esm.js

@@ -1,137 +1 @@
-class Recorder {
-  #stream;
-  #recorder;
-
-  constructor(options) {
-    const frameRate = options.frameRate === "manual" ? 0 : options.frameRate;
-    const chunks = [];
-    const stream = (
-      options.source instanceof HTMLCanvasElement ?
-        options.source :
-        options.source.canvas
-      ).captureStream(frameRate);
-    const recorder = new MediaRecorder(stream, {
-      mimeType: options.mimeType ?? "video/webm;codecs=vp8"
-    });
-
-    recorder.addEventListener("start", (e) => {
-      console.log("recording started");
-    });
-
-    recorder.addEventListener("stop", (e) => {
-      const blob = new Blob(chunks);
-
-      const executeDefault = typeof options?.stopCallback === "function" ?
-        options?.stopCallback(blob) :
-        true;
-
-      if(executeDefault){
-        const blobUrl = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = blobUrl;
-        link.download = "recording.webm";
-        link.click();
-      }
-    });
-
-    recorder.addEventListener("dataavailable", (e) => {
-      chunks.push(e.data);
-    });
-
-    recorder.addEventListener("pause", (e) => {
-      console.log("recording paused");
-    });
-
-    recorder.addEventListener("resume", (e) => {
-      console.log("recording resumed");
-    });
-
-    this.#recorder = recorder;
-    this.#stream = stream;
-  }
-
-  get state() {
-    return this.#recorder.state;
-  }
-
-  start() {
-    this.#recorder.start();
-  }
-
-  stop() {
-    this.#recorder.stop();
-  }
-
-  pause() {
-    this.#recorder.pause();
-  }
-
-  resume() {
-    this.#recorder.resume();
-  }
-
-  frame() {
-    this.#stream.getVideoTracks()[0].requestFrame();
-  }
-}
-
-function p5Record(p5, fn, lifecycles){
-  let recorder, options;
-
-  const p5VersionSemver = p5.VERSION.split(".")
-    .map((n) => parseInt(n));
-  if(!(
-    p5VersionSemver[0] > 2 ||
-    (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`);
-    return;
-  }
-
-  p5.Recorder = Recorder;
-
-  lifecycles.postdraw = function() {
-    if(recorder && recorder.state === "recording" && options?.frameRate === "manual"){
-      recorder.frame();
-    }
-  };
-
-  fn.setRecording = function(opt) {
-    if(opt.frameRate === "manual" && !("CanvasCaptureMediaStreamTrack" in window)){
-      console.error("Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.");
-      return;
-    }
-    options = opt;
-  };
-
-  fn.startRecording = function() {
-    options = Object.assign({
-      source: this.canvas,
-      frameRate: this.getTargetFrameRate()
-    }, options);
-    recorder = new Recorder(options);
-    recorder.start();
-  };
-
-  fn.stopRecording = function() {
-    recorder.stop();
-  };
-
-  fn.pauseRecording = function() {
-    recorder.pause();
-  };
-
-  fn.resumeRecording = function() {
-    recorder.resume();
-  };
-
-  fn.createRecording = function(options) {
-    return new Recorder(options);
-  };
-}
-if(typeof p5 !== "undefined"){
-  p5.registerAddon(p5Record);
-}
-
-export { Recorder, p5Record };
+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};

package/dist/p5.record.min.js

@@ -1 +1 @@
-!function(e){"use strict";class r{#e;#r;constructor(e){const r="manual"===e.frameRate?0:e.frameRate,t=[],a=(e.source instanceof HTMLCanvasElement?e.source:e.source.canvas).captureStream(r),s=new MediaRecorder(a,{mimeType:e.mimeType??"video/webm;codecs=vp8"});s.addEventListener("start",e=>{console.log("recording started")}),s.addEventListener("stop",r=>{const a=new Blob(t);if("function"!=typeof e?.stopCallback||e?.stopCallback(a)){const e=URL.createObjectURL(a),r=document.createElement("a");r.href=e,r.download="recording.webm",r.click()}}),s.addEventListener("dataavailable",e=>{t.push(e.data)}),s.addEventListener("pause",e=>{console.log("recording paused")}),s.addEventListener("resume",e=>{console.log("recording resumed")}),this.#r=s,this.#e=a}get state(){return this.#r.state}start(){this.#r.start()}stop(){this.#r.stop()}pause(){this.#r.pause()}resume(){this.#r.resume()}frame(){this.#e.getVideoTracks()[0].requestFrame()}}function t(e,t,a){let s,o;const n=e.VERSION.split(".").map(e=>parseInt(e));n[0]>2||n[0]>2&&n[1]>0||2===n[0]&&0===n[1]&&n[2]>=3?(e.Recorder=r,a.postdraw=function(){s&&"recording"===s.state&&"manual"===o?.frameRate&&s.frame()},t.setRecording=function(e){"manual"!==e.frameRate||"CanvasCaptureMediaStreamTrack"in window?o=e:console.error("Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.")},t.startRecording=function(){o=Object.assign({source:this.canvas,frameRate:this.getTargetFrameRate()},o),s=new r(o),s.start()},t.stopRecording=function(){s.stop()},t.pauseRecording=function(){s.pause()},t.resumeRecording=function(){s.resume()},t.createRecording=function(e){return new r(e)}):console.error("p5.record.js requires p5.js >= 2.0.3")}"undefined"!=typeof p5&&p5.registerAddon(t),e.Recorder=r,e.p5Record=t}({});
+!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}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.record.js",
-  "version": "0.1.2",
+  "version": "0.2.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",

package/src/Recorder.js

@@ -1,3 +1,5 @@
+import { SequenceRecorder, imageTypesMap } from "./SequenceRecorder";
+
 export class Recorder {
   #stream;
   #recorder;
@@ -5,21 +7,35 @@ export class Recorder {
   constructor(options) {
     const frameRate = options.frameRate === "manual" ? 0 : options.frameRate;
     const chunks = [];
-    const stream = (
+    const canvas = (
       options.source instanceof HTMLCanvasElement ?
         options.source :
         options.source.canvas
-      ).captureStream(frameRate);
-    const recorder = new MediaRecorder(stream, {
-      mimeType: options.mimeType ?? "video/webm;codecs=vp8"
-    });
+    );
+    const stream = canvas.captureStream(frameRate);
+    let recorder;
+    if(Object.keys(imageTypesMap).includes(options.mimeType)){
+      recorder = new SequenceRecorder(canvas, options.mimeType, frameRate);
+    }else{
+      recorder = new MediaRecorder(stream, {
+        mimeType: options.mimeType ?? "video/webm;codecs=vp8"
+      });
+    }
 
     recorder.addEventListener("start", (e) => {
       console.log("recording started");
     });
 
     recorder.addEventListener("stop", (e) => {
-      const blob = new Blob(chunks);
+      let blob, filename;
+
+      if(this.#recorder instanceof SequenceRecorder){
+        blob = e.detail.blob;
+        filename = "recording.zip";
+      }else{
+        blob = new Blob(chunks);
+        filename = "recording.webm";
+      }
 
       const executeDefault = typeof options?.stopCallback === "function" ?
         options?.stopCallback(blob) :
@@ -29,7 +45,7 @@ export class Recorder {
         const blobUrl = URL.createObjectURL(blob);
         const link = document.createElement("a");
         link.href = blobUrl;
-        link.download = "recording.webm";
+        link.download = filename;
         link.click();
       }
     });
@@ -71,6 +87,10 @@ export class Recorder {
   }
 
   frame() {
-    this.#stream.getVideoTracks()[0].requestFrame();
+    if(this.#recorder instanceof SequenceRecorder){
+      this.#recorder.frame();
+    }else{
+      this.#stream.getVideoTracks()[0].requestFrame();
+    }
   }
 }

package/src/SequenceRecorder.js

@@ -1,66 +1,95 @@
-class SequenceRecorder extends EventTarget {
+import { Zip, FileEntry } from "./Zip";
+
+export const imageTypesMap = {
+	"image/png": "png",
+	"image/jpeg": "jpg",
+	"image/webp": "webp"
+};
+
+export class SequenceRecorder extends EventTarget {
 	#counter = 0;
 	#source;
 	#images = [];
 	#animationFrame;
 	#timePerFrame;
-	#accumulator;
+	#deltaTime;
+	#previousTimestamp;
+	#accumulator = 0;
+	#mimeType;
 	state = "inactive";
 
-	constructor(source, frameRate = 60) {
+	constructor(source, mimeType, frameRate = 60) {
+		super();
 		this.#source = source;
 		this.#timePerFrame = 1000 / frameRate;
+		this.#mimeType = mimeType;
 	}
 
 	start() {
-		state = "recording";
-		this.dispatchEvent(new Event("start"));
+		this.state = "recording";
+		this.dispatchEvent(new CustomEvent("start"));
 		this.frame();
 	}
 
 	stop() {
-		state = "inactive";
+		this.state = "inactive";
 		if(this.#animationFrame){
 			cancelAnimationFrame(this.#animationFrame);
 		}
 
-		// NOTE: Compression Streams API creates raw compressed streams.
-		// Need some implementation to makie it zip file, probably headers
-		// const compressor = new CompressionStream("deflate");
-		// for(let image of this.#images){
-		// 	image.stream().pipeThrough(compressor);
-		// }
+		const buffersPromise = Promise.all(this.#images.map((image) => {
+			return image.arrayBuffer();
+		}));
+
+		const zip = new Zip();
+		buffersPromise.then((buffers) => {
+			for(let i=0; i<buffers.length; i++){
+				const file = new FileEntry(
+					`capture-${String(i+1).padStart(5, "0")}.${imageTypesMap[this.#mimeType]}`,
+					new Uint8Array(buffers[i])
+				);
+				zip.addFile(file);
+			}
 
-		this.dispatchEvent(new Event("stop"));
+	        this.dispatchEvent(new CustomEvent("stop", {
+	        	detail: {
+	        		blob: zip.pack()
+	        	}
+	        }));
+		});
 	}
 
 	pause() {
-		state = "paused";
+		this.state = "paused";
 		if(this.#animationFrame){
 			cancelAnimationFrame(this.#animationFrame);
 		}
-		this.dispatchEvent(new Event("pause"));
+		this.dispatchEvent(new CustomEvent("pause"));
 	}
 
 	resume() {
-		state = "recording";
-		this.dispatchEvent(new Event("resume"));
+		this.state = "recording";
+		this.dispatchEvent(new CustomEvent("resume"));
 		this.frame();
 	}
 
-	frame(deltaTime) {
-		let c = this.#counter;
-		this.#source.toBlob((blob) => {
-			this.#images[c] = blob;
-		});
-		this.#counter++;
+	frame(timestamp) {
+		if(this.state === "recording"){
+			this.#deltaTime = timestamp - this.#previousTimestamp;
+			this.#previousTimestamp = timestamp;
+			this.#accumulator += this.#deltaTime || 0;
+
+			if(this.#accumulator >= this.#timePerFrame || this.#timePerFrame === Number.POSITIVE_INFINITY){
+				this.#accumulator = 0;
+				let c = this.#counter;
+				this.#source.toBlob((blob) => {
+					this.#images[c] = blob;
+				}, this.#mimeType);
+				this.#counter++;
+			}
 
-		if(state === "recording"){
-			this.#accumulator += deltaTime;
-			if(this.accumulator >= this.#timePerFrame){
-				this.#animationFrame = requestAnimationFrame(this.frame);
-			}else{
-				this.#animationFrame = requestAnimationFrame(() => {});
+			if(this.#timePerFrame < Number.POSITIVE_INFINITY){
+				this.#animationFrame = requestAnimationFrame(this.frame.bind(this));
 			}
 		}
 	}

package/src/Zip.js

@@ -0,0 +1,161 @@
+import { crc32 } from "./crc32.js";
+
+const textEncoder = new TextEncoder();
+
+export class Zip {
+	#files = [];
+	#centralDirectories = [];
+	#currentOffset = 0;
+
+	constructor(){}
+
+	static generateCentralDirectoryHeader(file, localFileHeaderOffset){
+		const buf = new ArrayBuffer(46 + file.filename.length);
+		const arr = new Uint8Array(buf);
+		const view = new DataView(buf);
+
+		// Set Magic Number
+		view.setUint32(0, 1347092738);
+		// Set Version
+		view.setUint16(4, 20, true);
+		// Set Version extract
+		view.setUint16(6, 20, true);
+		// Set last modify time
+		view.setUint16(12, file.modifyTime, true);
+		// Set last modify date
+		view.setUint16(14, file.modifyDate, true);
+		// Set CRC-32
+		view.setUint32(16, file.checksum, true);
+		// Set Compressed size
+		view.setUint32(20, file.compressedSize, true);
+		// Set Uncompressed size
+		view.setUint32(24, file.uncompressedSize, true);
+		// Set file name length
+		view.setUint16(28, file.filename.length, true);
+		// Set relative offset
+		view.setUint32(42, localFileHeaderOffset, true);
+		// Set file name
+		const filenameBytes = textEncoder.encode(file.filename);
+		arr.set(filenameBytes, 46);
+
+		return view.buffer;
+	}
+
+	addFile(file){
+		const centralDirectory = Zip.generateCentralDirectoryHeader(file, this.#currentOffset);
+		this.#files.push(file);
+
+		this.#centralDirectories.push(centralDirectory);
+		this.#currentOffset += file.localFileHeader.byteLength;
+		this.#currentOffset += file.content.length;
+	}
+
+	pack(){
+		// Calcualte needed buffer size
+		const centralDirectoriesSize = this.#centralDirectories.reduce((acc, data) => {
+			acc += data.byteLength
+			return acc;
+		}, 0);
+		this.#currentOffset += centralDirectoriesSize;
+
+		// Calculate end of central directory record
+		const buf = new ArrayBuffer(22);
+		const view = new DataView(buf);
+		// Set Magic Number
+		view.setUint32(0, 1347093766);
+		// Set central directory number
+		view.setUint16(8, this.#files.length, true);
+		// Set total central directory number
+		view.setUint16(10, this.#files.length, true);
+		// Set size of central directory in byes
+		view.setUint32(12, centralDirectoriesSize, true); // VARIABLE
+		// Set offset of central directory
+		view.setUint32(16, this.#currentOffset-centralDirectoriesSize, true); // VARIABLE
+
+		// Put all components into blob and return
+		const items = [];
+		// Insert files
+		for(const file of this.#files){
+			items.push(file.localFileHeader);
+			items.push(file.content);
+		}
+
+		// Insert central directory
+		items.push(...this.#centralDirectories);
+
+		// Insert end of central directory
+		items.push(view.buffer);
+
+		return new Blob(items);
+	}
+}
+
+export class FileEntry {
+	modifyTime;
+	modifyDate;
+	checksum;
+	compressedSize;
+	uncompressedSize;
+	filename;
+	content;
+
+	constructor(filename, content){
+		this.filename = filename;
+		this.content = content;
+		const { date, time } = getDosDateTime();
+		this.modifyTime = time;
+		this.modifyDate = date;
+		this.checksum = crc32(0, content, content.length, 0);
+		this.compressedSize = content.length;
+		this.uncompressedSize = content.length;
+	}
+
+	get localFileHeader(){
+		const buf = new ArrayBuffer(30 + this.filename.length);
+		const arr = new Uint8Array(buf);
+		const view = new DataView(buf);
+
+		// Set Magic Number
+		view.setUint32(0, 1347093252);
+		// Set Version extract
+		view.setUint16(4, 20, true);
+		// Set last modify time
+		view.setUint16(10, this.modifyTime, true);
+		// Set last modify date
+		view.setUint16(12, this.modifyDate, true);
+		// Set CRC-32
+		view.setUint32(14, this.checksum, true);
+		// Set Compressed size
+		view.setUint32(18, this.compressedSize, true);
+		// Set Uncompressed size
+		view.setUint32(22, this.uncompressedSize, true);
+		// Set file name length
+		view.setUint16(26, this.filename.length, true);
+		// Set file name
+		const filenameBytes = textEncoder.encode(this.filename);
+		arr.set(filenameBytes, 30);
+
+		return view.buffer;
+	}
+}
+
+function getDosDateTime(){
+	const date = new Date();
+
+	let dosTime = date.getUTCHours();
+	dosTime = dosTime << 6;
+	dosTime = dosTime | date.getUTCMinutes();
+	dosTime = dosTime << 5;
+	dosTime = dosTime | date.getUTCSeconds() / 2;
+
+	let dosDate = date.getUTCFullYear() - 1980;
+	dosDate = dosDate << 4;
+	dosDate = dosDate | (date.getUTCMonth() + 1);
+	dosDate = dosDate << 5;
+	dosDate = dosDate | date.getUTCDate();
+
+	return {
+		date: dosDate,
+		time: dosTime
+	};
+}

package/src/crc32.js

@@ -0,0 +1,42 @@
+/**
+ * Adapted from JSZip (https://github.com/Stuk/jszip/blob/643714aa770afd8fe1df6cfc7e2bde945bb0ef64/lib/crc32.js).
+ * While JSZip adapted from Pako (https://github.com/nodeca/pako/blob/master/lib/zlib/crc32.js).
+ * While at the same time StackOverflow user Alex had very similar implementation at an earlier
+ * date (https://stackoverflow.com/questions/18638900/javascript-crc32/18639999#18639999).
+ *
+ * Do I know who ultimately created this implementation?
+ * No, it may be one of the above, it may be none of the above. I have slightly
+ * different needs and priorities for this CRC-32 implementation than them so
+ * I may also adapt accordingly.
+ *
+ * You are free to draw your own conclusions.
+ */
+
+function makeTable() {
+    let c, table = [];
+
+    for(let n =0; n < 256; n++){
+        c = n;
+        for(let k =0; k < 8; k++){
+            c = ((c&1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1));
+        }
+        table[n] = c;
+    }
+
+    return table;
+}
+
+// Create table on load. Just 255 signed longs. Not a problem.
+const crcTable = makeTable();
+
+export function crc32(crc, buf, len, pos) {
+    const t = crcTable, end = pos + len;
+
+    crc = crc ^ (-1);
+
+    for (let i = pos; i < end; i++ ) {
+        crc = (crc >>> 8) ^ t[(crc ^ buf[i]) & 0xFF];
+    }
+
+    return (crc ^ (-1)); // >>> 0;
+}

package/src/main.js

@@ -1,4 +1,5 @@
 import { Recorder } from "./Recorder.js";
+import { imageTypesMap } from "./SequenceRecorder.js";
 
 export function p5Record(p5, fn, lifecycles){
   let recorder, options;
@@ -23,7 +24,13 @@ export function p5Record(p5, fn, lifecycles){
   };
 
   fn.setRecording = function(opt) {
-    if(opt.frameRate === "manual" && !("CanvasCaptureMediaStreamTrack" in window)){
+    if(
+      opt.frameRate === "manual" &&
+      (
+          !("CanvasCaptureMediaStreamTrack" in window) &&
+          !Object.keys(imageTypesMap).includes(opt.mimeType)
+      )
+    ){
       console.error("Your browser does not support directly specifying frame capture timing with { frameRate: 'manual' }.");
       return;
     }

package/src/utils.js

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