spite · akella · Jun 4, 2020
diff --git a/examples/bundler/README.md b/examples/bundler/README.md
@@ -0,0 +1,15 @@
+# How to test NPM package
+This demo is to test that package works with NPM and Parcel (or any other bundler).
+To test this locally you need to link `ccapture.js` to your file system repository instead of NPM. Skip this step if you want to test package from NPM directly.
+```
+cd ~/ccapture.js/    # go into the repo directory
+npm link             # creates global link
+cd ~/ccapture.js/examples/bundler/   # go into this demo directory.
+npm link ccapture.js  # link-install the package for bundling
+```
+This will make bundler use your local copy of package as an NPM package.
+
+To run demo just do:
+```parcel index.html```
+Or if you dont have it installed globally:
+```npx parcel index.html```
diff --git a/examples/bundler/app.js b/examples/bundler/app.js
@@ -0,0 +1,59 @@
+import ccapture from "ccapture.js";
+
+var capturer = new CCapture({
+  format: "webm",
+  framerate: 60,
+  verbose: true,
+  // motionBlurFrames: 6
+});
+
+let ellapsedTime, lastTime;
+let recording = false;
+let canvas = document.getElementById("testcanvas");
+let ctx = canvas.getContext("2d");
+canvas.width = 512;
+canvas.height = 512;
+
+
+// RAF loop
+function render() {
+  var currentTime = Date.now();
+  currentTime = performance.now();
+  ellapsedTime = currentTime - lastTime;
+
+
+  ctx.clearRect(0, 0, 512, 512);
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, 512, 512); // background
+
+  for (var i = 0; i < 8; i++) {
+    ctx.fillStyle = "green";
+    ctx.fillRect(
+      60 * i,
+      200 * Math.sin(((i / 8) * currentTime) / 200) + 256,
+      50,
+      50
+    );
+  }
+
+  window.requestAnimationFrame(render);
+  if (recording) capturer.capture(canvas);
+
+  lastTime = currentTime;
+}
+
+document.querySelector(".js-start").addEventListener("click", () => {
+  if (!recording) {
+    capturer.start();
+    recording = true;
+  }
+});
+document.querySelector(".js-stop").addEventListener("click", () => {
+  if (recording) {
+    capturer.stop();
+    capturer.save();
+    recording = false;
+  }
+});
+
+render();
diff --git a/examples/bundler/index.html b/examples/bundler/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Ccapture.js bundler demo</title>
+	<style>
+		canvas{border: 1px solid #ccc;display: block;}
+		button{padding: 30px;font-size: 3em;margin:20px 20px 0 0;}
+	</style>
+</head>
+<body>
+	<canvas id="testcanvas"></canvas>
+	<button class="js-start">start</button>
+	<button class="js-stop">stop</button>
+	<script src="app.js"></script>
+</body>
+</html>