Merged master to 1.0

example/css/styles.css

@@ -1,6 +1,29 @@
 .collapsable-source pre {
     font-size: small;
 }
+@charset "UTF-8";
+/* usual styles */
+/* LESS - http://lesscss.org style sheet */
+/* Palette color codes */
+/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
+/* Feel free to copy&paste color codes to your application */
+/* MIXINS */
+/* As hex codes */
+/* Main Primary color */
+/* Main Secondary color (1) */
+/* Main Secondary color (2) */
+/* As RGBa codes */
+/* Main Primary color */
+/* Main Secondary color (1) */
+/* Main Secondary color (2) */
+/* Generated by Paletton.com ├é┬® 2002-2014 */
+/* http://paletton.com */
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+/* line 1, ../sass/_viewport.scss */
+#interactive.viewport {
+  width: 640px;
+  height: 480px;
+}
 
 .input-field {
     display: flex;

example/live_w_locator.html

@@ -81,6 +81,11 @@
                         <option value="8">8</option>
                     </select>
                 </label>
+                <label>
+                    <span>Camera</span>
+                    <select name="input-stream_constraints" id="deviceSelection">
+                    </select>
+                </label>
             </fieldset>
         </div>
       <div id="result_strip">
@@ -93,11 +98,12 @@
     </section>
           <footer>
         <p>
-          &copy; Copyright by Christoph Oberhofer
+          &copy; Made with ❤️ by Christoph Oberhofer
         </p>
       </footer>
 
     <script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
+    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
     <script src="../dist/quagga.js" type="text/javascript"></script>
     <script src="live_w_locator.js" type="text/javascript"></script>
   </body>

example/live_w_locator.js

@@ -19,9 +19,31 @@ $(function() {
                 console.log("Error: " + err);
             });
         },
+        initCameraSelection: function(){
+            var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
+
+            return Quagga.CameraAccess.enumerateVideoDevices()
+            .then(function(devices) {
+                function pruneText(text) {
+                    return text.length > 30 ? text.substr(0, 30) : text;
+                }
+                var $deviceSelection = document.getElementById("deviceSelection");
+                while ($deviceSelection.firstChild) {
+                    $deviceSelection.removeChild($deviceSelection.firstChild);
+                }
+                devices.forEach(function(device) {
+                    var $option = document.createElement("option");
+                    $option.value = device.deviceId || device.id;
+                    $option.appendChild(document.createTextNode(pruneText(device.label || device.deviceId || device.id)));
+                    $option.selected = streamLabel === device.label;
+                    $deviceSelection.appendChild($option);
+                });
+            });
+        },
         attachListeners: function() {
             var self = this;
 
+            self.initCameraSelection();
             $(".controls").on("click", "button.stop", function(e) {
                 e.preventDefault();
                 this.detachListeners();
@@ -47,7 +69,11 @@ $(function() {
 
             return parts.reduce(function(o, key, i) {
                 if (setter && (i + 1) === depth) {
-                    o[key] = val;
+                    if (typeof o[key] === "object" && typeof val === "object") {
+                        Object.assign(o[key], val);
+                    } else {
+                        o[key] = val;
+                    }
                 }
                 return key in o ? o[key] : {};
             }, obj);
@@ -77,11 +103,16 @@ $(function() {
         inputMapper: {
             inputStream: {
                 constraints: function(value){
-                    var values = value.split('x');
-                    return {
-                        width: parseInt(values[0]),
-                        height: parseInt(values[1])
+                    if (/^(\d+)x(\d+)$/.test(value)) {
+                        var values = value.split('x');
+                        return {
+                            width: {min: parseInt(values[0])},
+                            height: {min: parseInt(values[1])}
+                        };
                     }
+                    return {
+                        deviceId: value
+                    };
                 }
             },
             numOfWorkers: function(value) {
@@ -110,9 +141,10 @@ $(function() {
             inputStream: {
                 type : "LiveStream",
                 constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment"
+                    width: {min: 640},
+                    height: {min: 480},
+                    facingMode: "environment",
+                    aspectRatio: {min: 1, max: 2}
                 }
             },
             locator: {

example/multiple/index.html

@@ -71,7 +71,7 @@
         </div>
     </section>
     <ul class="results"></ul>
-
+    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
     <script src="../../dist/quagga.js" type="text/javascript"></script>
     <script src="index.js" type="text/javascript"></script>
     <script src="../vendor/prism.js"></script>

example/react/index.html

@@ -43,6 +43,7 @@
         </p>
       </footer>
 
+    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
     <script src="static/bundle.js" type="text/javascript"></script>
     <script src="../vendor/prism.js"></script>
   </body>

example/scan-to-input/index.html

@@ -152,6 +152,7 @@ App.init();
         </p>
       </footer>
 
+    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
     <script src="../../dist/quagga.js" type="text/javascript"></script>
     <script src="index.js" type="text/javascript"></script>
     <script src="../vendor/prism.js"></script>