Fix capture frame

https://github.com/mifi/lossless-cut/issues/25

package.json

@@ -42,7 +42,6 @@
   },
   "dependencies": {
     "bluebird": "^3.4.6",
-    "capture-frame": "^1.0.0",
     "classnames": "^2.2.5",
     "electron": "^1.4.5",
     "electron-default-menu": "^1.0.0",
@@ -52,10 +51,12 @@
     "jquery": "^3.1.1",
     "keyboardjs": "^2.3.3",
     "lodash": "^4.16.4",
+    "mime-types": "^2.1.14",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-hammerjs": "^0.5.0",
     "read-chunk": "^2.0.0",
+    "strong-data-uri": "^1.0.4",
     "which": "^1.2.11"
   }
 }

src/capture-frame.js

@@ -0,0 +1,29 @@
+const bluebird = require('bluebird');
+const fs = require('fs');
+const mime = require('mime-types');
+const strongDataUri = require('strong-data-uri');
+
+bluebird.promisifyAll(fs);
+
+function getFrameFromVideo(video) {
+  const format = 'jpeg';
+
+  const canvas = document.createElement('canvas');
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  canvas.getContext('2d').drawImage(video, 0, 0);
+
+  const dataUri = canvas.toDataURL(`image/${format}`);
+
+  return strongDataUri.decode(dataUri);
+}
+
+function captureFrame(video, outPathWithoutExt) {
+  const buf = getFrameFromVideo(video);
+  const ext = mime.extension(buf.mimetype);
+  const outPath = `${outPathWithoutExt}.${ext}`;
+  return fs.writeFileAsync(outPath, buf);
+}
+
+module.exports = captureFrame;

src/renderer.jsx

@@ -2,14 +2,13 @@ const electron = require('electron'); // eslint-disable-line
 const $ = require('jquery');
 const keyboardJs = require('keyboardjs');
 const _ = require('lodash');
-const captureFrame = require('capture-frame');
-const fs = require('fs');
 const Hammer = require('react-hammerjs');
 
 const React = require('react');
 const ReactDOM = require('react-dom');
 const classnames = require('classnames');
 
+const captureFrame = require('./capture-frame');
 const ffmpeg = require('./ffmpeg');
 const util = require('./util');
 
@@ -245,11 +244,8 @@ class App extends React.Component {
 
   capture() {
     if (!this.state.filePath) return;
-    const buf = captureFrame(getVideo(), 'jpg');
-    const outPath = `${this.state.filePath}-${util.formatDuration(this.state.currentTime)}.jpg`;
-    fs.writeFile(outPath, buf, (err) => {
-      if (err) alert(err);
-    });
+    const outPathWithoutExt = `${this.state.filePath}-${util.formatDuration(this.state.currentTime)}`;
+    captureFrame(getVideo(), outPathWithoutExt).catch(err => alert(err));
   }
 
   toggleHelp() {