diff --git a/demo.html b/demo.html
index 16249c51..03f5164a 100644
--- a/demo.html
+++ b/demo.html
@@ -8,8 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
-    <script src="https://unpkg.com/vue-qrcode-reader@2/dist/vue-qrcode-reader.browser.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/vue-qrcode-reader@2/dist/vue-qrcode-reader.css">
+    <script src="./dist/vue-qrcode-reader.browser.js"></script>
+    <link rel="stylesheet" href="./dist/vue-qrcode-reader.css">
 
     <style>
       p {
@@ -33,7 +33,7 @@
         {{ errorMessage }}
       </p>
 
-      <qrcode-stream :torch="true" @init="onInit"></qrcode-stream>
+      <qrcode-stream @decode="onDecode" camera="rear" @init="onInit"></qrcode-stream>
     </div>
   </body>
   <script>
diff --git a/src/components/QrcodeStream.vue b/src/components/QrcodeStream.vue
index c155099b..7327a345 100644
--- a/src/components/QrcodeStream.vue
+++ b/src/components/QrcodeStream.vue
@@ -100,36 +100,6 @@ export default {
       } else {
         return this.track;
       }
-    },
-
-    constraints() {
-      const base = {
-        audio: false,
-        video: {
-          width: { min: 360, ideal: 640, max: 1920 },
-          height: { min: 240, ideal: 480, max: 1080 }
-        }
-      };
-
-      switch (this.camera) {
-        case "auto":
-          base.video.facingMode = { ideal: "environment" };
-
-          return base;
-        case "rear":
-          base.video.facingMode = { exact: "environment" };
-
-          return base;
-        case "front":
-          base.video.facingMode = { exact: "user" };
-
-          return base;
-        case "off":
-          return undefined;
-
-        default:
-          return undefined;
-      }
     }
   },
 
@@ -175,20 +145,17 @@ export default {
       const promise = (async () => {
         this.beforeResetCamera();
 
-        if (this.constraints === undefined) {
+        if (this.camera === "off") {
           this.cameraInstance = null;
 
           return {
             capabilities: {}
           };
         } else {
-          this.cameraInstance = await Camera(
-            this.constraints,
-            this.$refs.video,
-            {
-              torch: this.torch
-            }
-          );
+          this.cameraInstance = await Camera(this.$refs.video, {
+            camera: this.camera,
+            torch: this.torch
+          });
 
           const capabilities = this.cameraInstance.getCapabilities();
 
diff --git a/src/misc/camera.js b/src/misc/camera.js
index dff3f1c4..76bf71a4 100644
--- a/src/misc/camera.js
+++ b/src/misc/camera.js
@@ -24,6 +24,46 @@ class Camera {
   }
 }
 
+const narrowDownFacingMode = async camera => {
+  // Modern phones often have multipe front/rear cameras.
+  // Sometimes special purpose cameras like the wide-angle camera are picked
+  // by default. Those are not optimal for scanning QR codes but standard
+  // media constraints don't allow us to specify which camera we want exactly.
+  // However, explicitly picking the first entry in the list of all videoinput
+  // devices for as the default front camera and the last entry as the default
+  // rear camera seems to be a workaround.
+  const devices = (await navigator.mediaDevices.enumerateDevices()).filter(
+    ({ kind }) => kind === "videoinput"
+  );
+
+  if (devices.length > 2) {
+    const frontCamera = devices[0];
+    const rearCamera = devices[devices.length - 1];
+
+    switch (camera) {
+      case "auto":
+        return { deviceId: { exact: rearCamera.deviceId } };
+      case "rear":
+        return { deviceId: { exact: rearCamera.deviceId } };
+      case "front":
+        return { deviceId: { exact: frontCamera.deviceId } };
+      default:
+        return undefined;
+    }
+  } else {
+    switch (camera) {
+      case "auto":
+        return { facingMode: { ideal: "environment" } };
+      case "rear":
+        return { facingMode: { exact: "environment" } };
+      case "front":
+        return { facingMode: { exact: "user" } };
+      default:
+        return undefined;
+    }
+  }
+};
+
 const INSECURE_CONTEXT = window.isSecureContext !== true;
 
 const STREAM_API_NOT_SUPPORTED = !(
@@ -34,13 +74,13 @@ const STREAM_API_NOT_SUPPORTED = !(
 
 let streamApiShimApplied = false;
 
-export default async function(constraints, videoEl, advancedConstraints) {
+export default async function(videoEl, { camera, torch }) {
   // At least in Chrome `navigator.mediaDevices` is undefined when the page is
   // loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
   // initialized with `false` although the API might actually be supported.
-  // So although `getUserMedia` already should have a build-in mechanism to
+  // So although `getUserMedia` already should have a built-in mechanism to
   // detect insecure context (by throwing `NotAllowedError`), we have to do a
-  // manual check before even calling `getUserMedia`.
+  // manual check before even calling `getUserMedia`.
   if (INSECURE_CONTEXT) {
     throw new InsecureContextError();
   }
@@ -49,11 +89,22 @@ export default async function(constraints, videoEl, advancedConstraints) {
     throw new StreamApiNotSupportedError();
   }
 
+  // This is a brower API only shim. It patches the global window object which
+  // is not available during SSR. So we lazily apply this shim at runtime.
   if (streamApiShimApplied === false) {
     adapterFactory({ window });
     streamApiShimApplied = true;
   }
 
+  const constraints = {
+    audio: false,
+    video: {
+      width: { min: 360, ideal: 640, max: 1920 },
+      height: { min: 240, ideal: 480, max: 1080 },
+      ...(await narrowDownFacingMode(camera))
+    }
+  };
+
   const stream = await navigator.mediaDevices.getUserMedia(constraints);
 
   if (videoEl.srcObject !== undefined) {
@@ -70,7 +121,7 @@ export default async function(constraints, videoEl, advancedConstraints) {
 
   await eventOn(videoEl, "loadeddata");
 
-  if (advancedConstraints.torch) {
+  if (torch) {
     const [track] = stream.getVideoTracks();
 
     try {