p5.record.js 0.1.0 → 0.1.1

package/dist/p5.record.esm.js

@@ -0,0 +1,137 @@
+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 };

package/dist/p5.record.min.js

@@ -0,0 +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}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.record.js",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",
@@ -16,6 +16,10 @@
     "p5.js",
     "captureStream"
   ],
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
   "type": "module",
   "exports": {
     ".": "./dist/p5.record.esm.js"

package/examples/basic-sketch-recording/index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>p5.record.js Basic Sketch Recording</title>
-
-	<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
-	<script src="../../dist/p5.record.min.js"></script>
-
-	<style>
-		html, body {
-			margin: 0;
-		}
-	</style>
-</head>
-<body>
-	<section style="margin: 10px;">
-		<button id="start-recording">Start Recording</button>
-		<button id="stop-recording">Stop Recording</button>
-		<button id="pause-recording">Pause Recording</button>
-		<button id="resume-recording">Resume Recording</button>
-	</section>
-	<script src="./src/sketch.js"></script>
-</body>
-</html>

package/examples/basic-sketch-recording/src/sketch.js

@@ -1,32 +0,0 @@
-let startBtn, stopBtn, pauseBtn, resumeBtn;
-
-function setup() {
-  createCanvas(400, 400);
-  background(200);
-
-  startBtn = select("#start-recording");
-  stopBtn = select("#stop-recording");
-  pauseBtn = select("#pause-recording");
-  resumeBtn = select("#resume-recording");
-
-  startBtn.mouseClicked(startRecording);
-  stopBtn.mouseClicked(stopRecording);
-  pauseBtn.mouseClicked(pauseRecording);
-  resumeBtn.mouseClicked(resumeRecording);
-}
-
-function draw() {
-  line(mouseX, mouseY, pmouseX, pmouseY);
-}
-
-function keyTyped() {
-  if(key === "a"){
-    startRecording();
-  }else if(key === "s"){
-    stopRecording();
-  }else if(key === "d"){
-    pauseRecording();
-  }else if(key === "f"){
-    resumeRecording();
-  }
-}

package/examples/frame-by-frame-recording/index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>p5.record.js Frame By Frame Recording</title>
-
-	<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
-	<script src="../../dist/p5.record.min.js"></script>
-
-	<style>
-		html, body {
-			margin: 0;
-		}
-	</style>
-</head>
-<body>
-	<section style="margin: 10px;">
-		<button id="start-recording">Start Recording</button>
-		<button id="stop-recording">Stop Recording</button>
-		<button id="pause-recording">Pause Recording</button>
-		<button id="resume-recording">Resume Recording</button>
-	</section>
-	<script src="./src/sketch.js"></script>
-</body>
-</html>

package/examples/frame-by-frame-recording/src/sketch.js

@@ -1,37 +0,0 @@
-let data;
-let startBtn, stopBtn, pauseBtn, resumeBtn;
-
-function setup() {
-  createCanvas(400, 400);
-  background(200);
-
-  startBtn = select("#start-recording");
-  stopBtn = select("#stop-recording");
-  pauseBtn = select("#pause-recording");
-  resumeBtn = select("#resume-recording");
-
-  startBtn.mouseClicked(startRecording);
-  stopBtn.mouseClicked(stopRecording);
-  pauseBtn.mouseClicked(pauseRecording);
-  resumeBtn.mouseClicked(resumeRecording);
-
-  setRecording({
-    frameRate: "manual"
-  });
-}
-
-function draw() {
-  line(mouseX, mouseY, pmouseX, pmouseY);
-}
-
-function keyTyped() {
-  if(key === "a"){
-    startRecording();
-  }else if(key === "s"){
-    stopRecording();
-  }else if(key === "d"){
-    pauseRecording();
-  }else if(key === "f"){
-    resumeRecording();
-  }
-}

package/examples/graphics-recording/index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>p5.record.js Basic Sketch Recording</title>
-
-	<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
-	<script src="../../dist/p5.record.min.js"></script>
-
-	<style>
-		html, body {
-			margin: 0;
-		}
-	</style>
-</head>
-<body>
-	<section style="margin: 10px;">
-		<button id="start-recording">Start Recording</button>
-		<button id="stop-recording">Stop Recording</button>
-		<button id="pause-recording">Pause Recording</button>
-		<button id="resume-recording">Resume Recording</button>
-	</section>
-	<script src="./src/sketch.js"></script>
-</body>
-</html>

package/examples/graphics-recording/src/sketch.js

@@ -1,47 +0,0 @@
-let graphic;
-let startBtn, stopBtn, pauseBtn, resumeBtn;
-
-function setup() {
-  createCanvas(400, 400);
-  background(200);
-
-  startBtn = select("#start-recording");
-  stopBtn = select("#stop-recording");
-  pauseBtn = select("#pause-recording");
-  resumeBtn = select("#resume-recording");
-
-  startBtn.mouseClicked(startRecording);
-  stopBtn.mouseClicked(stopRecording);
-  pauseBtn.mouseClicked(pauseRecording);
-  resumeBtn.mouseClicked(resumeRecording);
-
-  graphic = createGraphics(400, 400);
-
-  setRecording({
-    source: graphic
-  });
-}
-
-function draw() {
-  line(mouseX, mouseY, pmouseX, pmouseY);
-  graphic.background(255);
-  graphic.fill(255, 0, 0);
-  graphic.push();
-  graphic.translate(200, 200);
-  graphic.rotate(frameCount/10);
-  graphic.rect(-100, -100, 200, 200);
-  graphic.pop();
-  image(graphic, 100, 100, 200, 200);
-}
-
-function keyTyped() {
-  if(key === "a"){
-    startRecording();
-  }else if(key === "s"){
-    stopRecording();
-  }else if(key === "d"){
-    pauseRecording();
-  }else if(key === "f"){
-    resumeRecording();
-  }
-}

package/examples/multiple-parallel-recording/index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>p5.record.js Basic Sketch Recording</title>
-
-	<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
-	<script src="../../dist/p5.record.min.js"></script>
-
-	<style>
-		html, body {
-			margin: 0;
-		}
-	</style>
-</head>
-<body>
-	<section style="margin: 10px;">
-		<button id="start-recording">Start Recording</button>
-		<button id="stop-recording">Stop Recording</button>
-		<button id="pause-recording">Pause Recording</button>
-		<button id="resume-recording">Resume Recording</button>
-	</section>
-	<script src="./src/sketch.js"></script>
-</body>
-</html>

package/examples/multiple-parallel-recording/src/sketch.js

@@ -1,84 +0,0 @@
-let graphics = [];
-let colors = [];
-let recorders = [];
-let startBtn, stopBtn, pauseBtn, resumeBtn;
-
-function setup() {
-  createCanvas(400, 400);
-  background(200);
-
-  for(let i=0; i<4; i++){
-    graphics.push(createGraphics(400, 400));
-    colors.push(color(random(255), random(255), random(255)));
-
-    const options = {
-      source: graphics[i]
-    }
-    recorders.push(createRecording(options));
-  }
-
-  startBtn = select("#start-recording");
-  stopBtn = select("#stop-recording");
-  pauseBtn = select("#pause-recording");
-  resumeBtn = select("#resume-recording");
-
-  startBtn.mouseClicked(() => {
-    recorders.forEach((recorder) => {
-      recorder.start();
-    });
-  });
-  stopBtn.mouseClicked(() => {
-    recorders.forEach((recorder) => {
-      recorder.stop();
-    });
-  });
-  pauseBtn.mouseClicked(() => {
-    recorders.forEach((recorder) => {
-      recorder.pause();
-    });
-  });
-  resumeBtn.mouseClicked(() => {
-    recorders.forEach((recorder) => {
-      recorder.resume();
-    });
-  });
-}
-
-function draw() {
-  line(mouseX, mouseY, pmouseX, pmouseY);
-
-  for(let j=0; j<2; j++){
-    for(let i=0; i<2; i++){
-      const graphic = graphics[j*2+i];
-      graphic.background(0);
-      graphic.fill(colors[j*2+i]);
-      graphic.push();
-      graphic.translate(200, 200);
-      graphic.rotate(frameCount/10);
-      graphic.rect(-100, -100, 200, 200);
-      graphic.pop();
-
-      image(graphic, i * 200, j * 200, 200, 200);
-    }
-  }
-}
-
-function keyTyped() {
-  if(key === "a"){
-    recorders.forEach((recorder) => {
-      recorder.start();
-    });
-  }else if(key === "s"){
-    recorders.forEach((recorder) => {
-      recorder.stop();
-    });
-  }else if(key === "d"){
-    recorders.forEach((recorder) => {
-      recorder.pause();
-    });
-  }else if(key === "f"){
-    recorders.forEach((recorder) => {
-      recorder.resume();
-    });
-  }
-}

package/rollup.config.js

@@ -1,21 +0,0 @@
-import terser from "@rollup/plugin-terser";
-
-export default [
-  {
-    input: "src/main.js",
-    output: {
-      file: "dist/p5.record.min.js",
-      format: "iife",
-      plugins: [
-        process.env.ROLLUP_WATCH ? null :  terser()
-      ]
-    }
-  },
-  {
-    input: "src/main.js",
-    output: {
-      file: "dist/p5.record.esm.js",
-      format: "esm"
-    }
-  }
-];