wait a second before taking the photo

chee · Sep 14, 2017 · 0b09e23 · 0b09e23
1 parent 69e3798
commit 0b09e23
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/client/src/api.js b/client/src/api.js
@@ -1,4 +1,4 @@
-const API_ROOT = `${location.origin}/_api/`
+const API_ROOT = `${location.origin}/_api`
 const PUBLIC = 'public'
 
 const getList = channel =>
@@ -18,7 +18,7 @@ const addPicture = (channel, sha) =>
     response.ok
       ? response.json()
       : Promise.reject(response)
-    )
+    ).catch(console.error)
 
 module.exports = {
   getList,

diff --git a/client/src/components/Camera.js b/client/src/components/Camera.js
@@ -38,27 +38,32 @@ class Camera extends React.Component {
       .then(stream => {
         this.video.srcObject = stream
         this.video.play()
-        this.video.width = 500
         videoStream = stream
       })
       .catch(error => console.error('oh no:', error))
 
     this.video.addEventListener('canplay', () => {
-      const context = this.canvas.getContext('2d')
-      context.drawImage(
-        this.video,
-        0, 0,
-        this.video.videoWidth,
-        this.video.videoHeight
-      )
-
-      storePicture(this.canvas.toDataURL('image/jpg'))
-        .then(this.props.addPicture)
-        .catch(error => console.error('error adding picture', error))
-
-      this.clearTakingPicture()
-
-      videoStream.getTracks()[0].stop()
+      setTimeout(() => {
+        const context = this.canvas.getContext('2d')
+        const style = getComputedStyle(this.video)
+        const width = parseInt(style.width)
+        const height = parseInt(style.height)
+        this.canvas.setAttribute('width', width)
+        this.canvas.setAttribute('height', height)
+        context.drawImage(
+          this.video,
+          0, 0,
+          width, height
+        )
+        storePicture(this.canvas.toDataURL('image/jpeg', true))
+          .then(picture => {
+            console.log(picture)
+            this.props.addPicture(picture)
+            this.clearTakingPicture()
+            videoStream.getTracks()[0].stop()
+          })
+          .catch(error => console.error('error adding picture', error))
+      }, 1000)
     })
   }
 

diff --git a/client/src/components/Stream.js b/client/src/components/Stream.js
@@ -2,8 +2,8 @@ const React = require('inferno-compat')
 
 const Stream = ({pictures}) =>
   <ul>
-    {
-      pictures && pictures.map(picture =>
+    {pictures &&
+      pictures.map(picture =>
         <li>
           <img src={picture} />
         </li>