add saving to disk

1 files changed, 70 insertions, 0 deletions

diff --git a/app/client/live/player.js b/app/client/live/player.js
new file mode 100644
index 0000000..b7088f5
--- /dev/null
+++ b/app/client/live/player.js
@@ -0,0 +1,70 @@
+import { store } from '../store'
+import Whammy from './whammy'
+
+let fps = 0, last_frame
+let recording = false, saving = false
+let videoWriter
+
+export function startRecording(){
+  videoWriter = new Whammy.Video(10)
+  recording = true
+  store.dispatch({
+    type: 'START_RECORDING',
+  })
+}
+
+export function stopRecording(){
+  recording = false
+  videoWriter.compile(false, function(blob){
+    console.log(blob)
+    store.dispatch({
+      type: 'SAVE_VIDEO',
+      blob: blob,
+    })
+  })
+}
+
+export function saveFrame(){
+  saving = true
+}
+
+export function onFrame (data) {
+  const blob = new Blob([data.frame], { type: 'image/jpg' })
+  const url = URL.createObjectURL(blob)
+  const img = new Image ()
+  img.onload = function() {
+    last_frame = data.meta
+    URL.revokeObjectURL(url)
+    const canvas = document.querySelector('.player canvas')
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    if (recording) {
+      console.log('record frame')
+      videoWriter.add(canvas)
+    }
+    if (saving) {
+      saving = false
+      canvas.toBlob(function(blob) {
+        store.dispatch({
+          type: 'SAVE_FRAME',
+          blob: blob,
+        })
+      })
+    }
+    fps += 1
+  }
+  img.src = url
+}
+
+setInterval(() => {
+  store.dispatch({
+    type: 'SET_FPS',
+    fps: fps,
+  })
+  store.dispatch({
+    type: 'CURRENT_FRAME',
+    meta: last_frame,
+  })
+  fps = 0
+}, 1000)
+