get rid of ccapture.js, use MediaRecorder api instead

recording now works in Firefox
less dependencies

package.json

@@ -12,11 +12,9 @@
   },
   "dependencies": {
     "bowser": "^1.9.2",
-    "ccapture.js": "^1.0.7",
     "q": "^1.5.1",
     "sprintf-js": "^1.1.1",
-    "vue": "^2.5.2",
-    "whammy": "0.0.1"
+    "vue": "^2.5.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/Player.vue

@@ -45,8 +45,6 @@
 </template>
 
 <script>
-import CCapture from "ccapture.js";
-import bowser from "bowser";
 
 export default {
   name: "player",
@@ -68,10 +66,7 @@ export default {
       position: 0,
       tmp_ctx: null,
       animation_id: null,
-      capturer: new CCapture({
-        format: "webm",
-        verbose: true,
-      }),
+      recorder: null,
     };
   },
   computed: {
@@ -158,13 +153,9 @@ export default {
     },
     recording: function () {
       if (this.recording) {
+        this.looping = false;
         this.position = 0;
-        if (!bowser.chrome) {
-          alert("Recording only supported in Chrome :( \n" +
-            "https://github.com/spite/ccapture.js/#limitations");
-        }
       }
-      this.looping = false;
     },
   },
   methods: {
@@ -186,6 +177,10 @@ export default {
         console.log("STOPPED");
         cancelAnimationFrame(this.animation_id);
         this.playing = false;
+        if (this.recording && this.recorder) {
+          this.recorder.stop();
+          this.recording = false;
+        }
       }
     },
     playOnceOrPause: function () {
@@ -199,11 +194,17 @@ export default {
       }
     },
     recordSequence: function () {
+      try {
+        this.createRecorder();
+      } catch (err) {
+        alert("Error initializing recording!\n" + err);
+        return;
+      }
       this.looping = false;
       this.recording = true;
       this.stop();
       this.position = 0;
-      this.capturer.start();
+      this.recorder.start();
       this.play();
     },
     loopFullscreen: function () {
@@ -222,14 +223,9 @@ export default {
       if (this.position < this.frames) {
         this.position += 1;
         this.animation_id = requestAnimationFrame(this.$render_advance);
-        if (this.recording) this.capturer.capture(this.$refs.canvas);
       } else {
         if (!this.looping) {
           this.stop();
-          if (this.recording) {
-            this.capturer.stop();
-            this.capturer.save();
-          }
         } else {
           this.animation_id = requestAnimationFrame(this.$render_advance);
         }
@@ -245,6 +241,31 @@ export default {
         x, y, w, h,
         0, 0, w * this.zoom, h * this.zoom);
     },
+    createRecorder: function () {
+      const stream = this.$refs.canvas.captureStream();
+      this.recorder = new MediaRecorder(stream, {mimeType: "video/webm"});
+      if (!this.recorder) {
+        throw new Error("Unknown error, couldn't initialize recorder.");
+      }
+      this.recorder.ondataavailable = function (event) {
+        if (!event.data) {
+          alert.error("Error during recording: No data available!");
+          return;
+        }
+        const blob = new Blob([event.data], {type: "video/webm"});
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.style.display = "none";
+        a.href = url;
+        a.download = "slitscan.webm";
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => {
+          document.body.removeChild(a);
+          window.URL.revokeObjectURL(url);
+        }, 100);
+      };
+    },
   },
 };
 </script>