add recording

package-lock.json

@@ -1228,6 +1228,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bowser": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.2.tgz",
+      "integrity": "sha512-fuiANC1Bqbqa/S4gmvfCt7bGBmNELMsGZj4Wg3PrP6esP66Ttoj1JSlzFlXtHyduMv07kDNmDsX6VsMWT/MLGg=="
+    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -1507,6 +1512,11 @@
       "integrity": "sha1-yVTMp4AEbzTEtDPTJO9Bnh21GlM=",
       "dev": true
     },
+    "ccapture.js": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/ccapture.js/-/ccapture.js-1.0.7.tgz",
+      "integrity": "sha512-RuIOv/DDUR9PF9QU/NdkxjYQ/0zXi8jHfPc6ua6ljVZgq281iale5LBUNvv/5SDc5mW7i4KEIH5qTRmhKnPZjw=="
+    },
     "center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
@@ -12039,6 +12049,11 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "whammy": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/whammy/-/whammy-0.0.1.tgz",
+      "integrity": "sha1-z0vtn7qmh+2j9CCV/5m/cEsI0B4="
+    },
     "whet.extend": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",

package.json

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

src/components/Player.vue

@@ -10,6 +10,10 @@
       </canvas>
     </div>
     <div id="controls" class="{'fullscreen-controls': fullscreen}">
+      <div>
+        <label for="recordMode">Record output</label>
+        <input type="checkbox" v-model="record" id="recordMode">
+      </div>
       <div>
         <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
       </div>
@@ -32,6 +36,9 @@
 </template>
 
 <script>
+  import CCapture from 'ccapture.js'
+  import bowser from 'bowser'
+
   export default {
     name: 'player',
     props: {
@@ -49,7 +56,12 @@
         sortDirection: false,
         position: 0,
         tmp_ctx: null,
-        animation_id: null
+        animation_id: null,
+        record: false,
+        capturer: new CCapture({
+          format: 'webm',
+          verbose: true
+        })
       }
     },
     computed: {
@@ -127,6 +139,12 @@
         if (this.playing || this.image === null) return
         this.tmp_ctx = this.$refs.canvas.getContext('2d')
         this.$render()
+      },
+      record: function () {
+        if (this.record && !bowser.chrome) {
+          alert('Recording only supported in Chrome :( \n' +
+            'https://github.com/spite/ccapture.js/#limitations')
+        }
       }
     },
     methods: {
@@ -136,9 +154,10 @@
         }
         this.playing = !this.playing
         if (this.playing) {
-          this.tmp_ctx = this.$refs.canvas.getContext('2d')
-          this.animation_id = requestAnimationFrame(this.$render_advance)
           this.buttonLabel = 'STOP'
+          this.tmp_ctx = this.$refs.canvas.getContext('2d')
+          if (this.record) this.capturer.start()
+          this.$render_advance()
         } else {
           cancelAnimationFrame(this.animation_id)
           this.buttonLabel = 'PLAY'
@@ -163,9 +182,14 @@
         if (this.position < this.frames) {
           this.position += 1
           this.animation_id = requestAnimationFrame(this.$render_advance)
+          if (this.record) this.capturer.capture(this.$refs.canvas)
         } else {
           this.playPause()
           this.position = 0
+          if (this.record) {
+            this.record.stop()
+            this.record.save()
+          }
         }
       }
     }