Fixed camera resolution

src/App.vue

@@ -36,8 +36,8 @@
 
             <webcam ref="webcam"
                     :device-id="webcam.deviceId"
-                    width="500"
-                    height="500"
+                    width="550"
+                    height="550"
                     @started="onStarted"
                     @stopped="onStopped"
                     @error="onError"
@@ -99,7 +99,7 @@
           </div>
         </aside>
         <main>
-
+          <img :src="webcam.img">
           <editor v-if="data.loaded" ref="editor" :data="data"></editor>
         </main>
       </div>
@@ -168,6 +168,7 @@ export default {
   methods: {
     onCapture() {
       this.webcam.img = this.$refs.webcam.capture();
+      //console.log(this.webcam.img);
     },
     onStarted(stream) {
       this.webcam.streaming = true;

src/components/WebCam.vue

@@ -164,8 +164,14 @@
        * test access
        */
       testMediaAccess() {
+
         navigator.mediaDevices
-          .getUserMedia({ video: true, audio: false})
+          .getUserMedia({ video: {
+              width: this.$props.width,
+              aspectRatio: {
+                exact: this.$props.width / this.$props.height
+              }
+            }, audio: false})
           .then(stream => this.loadCameras())
           .catch(error => this.$emit("error", error));
       },
@@ -175,7 +181,14 @@
       loadCamera(device) {
         navigator.mediaDevices
           .getUserMedia({
-            video: { deviceId: { exact: device } }
+            video: {
+              deviceId: { exact: device },
+              width: this.width,
+              aspectRatio: {
+                exact: this.width / this.height
+              }
+            },
+            audio: false
           })
           .then(stream => this.loadSrcStream(stream))
           .catch(error => this.$emit("error", error));
@@ -190,13 +203,16 @@
           canvas.height = video.videoHeight;
           canvas.width = video.videoWidth;
           this.canvas = canvas;
-
           this.ctx = canvas.getContext("2d");
+          this.ctx.translate(canvas.width, 0);
+          this.ctx.scale(-1, 1);
         }
 
         const { ctx, canvas } = this;
+
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
+
         return canvas;
       }
     }