Added camera selection to example; Upgrade to webpack 2.2

example/css/fonts.css

@@ -1 +1 @@
-@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");

example/css/styles.css

@@ -15,7 +15,7 @@
 /* Main Secondary color (2) */
 /* Generated by Paletton.com ├é┬® 2002-2014 */
 /* http://paletton.com */
-@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
 /* line 1, ../sass/_viewport.scss */
 #interactive.viewport {
   width: 640px;

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">
@@ -91,7 +96,7 @@
     </section>
           <footer>
         <p>
-          &copy; Copyright by Christoph Oberhofer
+          &copy; Made with ❤️ by Christoph Oberhofer
         </p>
       </footer>
 

example/live_w_locator.js

@@ -10,14 +10,14 @@ $(function() {
         }
     });
     var App = {
-        init : function() {
+        init: function() {
             var self = this;
 
             Quagga.init(this.state, function(err) {
                 if (err) {
                     return self.handleError(err);
                 }
-                Quagga.registerResultCollector(resultCollector);
+                //Quagga.registerResultCollector(resultCollector);
                 App.attachListeners();
                 Quagga.start();
             });
@@ -25,9 +25,31 @@ $(function() {
         handleError: function(err) {
             console.log(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();
                 Quagga.stop();
@@ -64,7 +86,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);
@@ -95,10 +121,15 @@ $(function() {
         inputMapper: {
             inputStream: {
                 constraints: function(value){
-                    var values = value.split('x');
+                    if (/^(\d+)x(\d+)$/.test(value)) {
+                        var values = value.split('x');
+                        return {
+                            width: {min: parseInt(values[0])},
+                            height: {min: parseInt(values[1])}
+                        };
+                    }
                     return {
-                        width: {min: parseInt(values[0])},
-                        height: {min: parseInt(values[1])}
+                        deviceId: value
                     };
                 }
             },