Split detect.vue (#122)

Closes: #112

New mixins for camera and detection (remote and local) and new css for detection page.

Reviewed-on: #122

src/pages/camera-mixin.js

@@ -0,0 +1,45 @@
+export default {
+  methods: {
+    async openCamera() {
+      var cameraLoaded = false
+      const devicesList = await navigator.mediaDevices.enumerateDevices()
+      this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
+      if (this.videoDeviceAvailable) {
+        navigator.mediaDevices.getUserMedia({video: true})
+        var vidConstraint = {
+          video: {
+            width: {
+              ideal: 1920
+            },
+            height: {
+              ideal: 1080
+            },
+            facingMode: 'environment'
+          },
+          audio: false
+        }
+        const stream = await navigator.mediaDevices.getUserMedia(vidConstraint);
+        cameraLoaded = true
+        this.cameraStream = stream
+      }
+      return cameraLoaded
+    },
+    closeCamera () {
+      this.cameraStream.getTracks().forEach( t => t.stop())
+      this.videoAvailable = false
+    },
+    captureVidFrame() {
+      const vidViewer = this.$refs.vid_viewer
+      vidViewer.pause()
+      let tempCVS = document.createElement('canvas')
+      tempCVS.height = vidViewer.videoHeight || parseInt(vidViewer.style.height)
+      tempCVS.width = vidViewer.videoWidth || parseInt(vidViewer.style.width)
+      const tempCtx = tempCVS.getContext('2d')
+      tempCtx.drawImage(vidViewer, 0, 0)
+      this.getImage(tempCVS.toDataURL())
+    },
+    async videoStream() {
+      //TODO
+    }
+  }
+}