From 42f2b70e64c376207637fc6881e70cfc70db5184 Mon Sep 17 00:00:00 2001
From: Christoph Oberhofer <ch.oberhofer@gmail.com>
Date: Mon, 5 Jun 2017 15:43:44 +0200
Subject: [PATCH] Added zoom & torch if available

---
 example/live_w_locator.html | 12 ++++++--
 example/live_w_locator.js   | 61 +++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/example/live_w_locator.html b/example/live_w_locator.html
index 491af8e..3d9d8ed 100644
--- a/example/live_w_locator.html
+++ b/example/live_w_locator.html
@@ -8,7 +8,7 @@
     <meta name="description" content="" />
     <meta name="author" content="Christoph Oberhofer" />
 
-    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
   </head>
 
@@ -49,7 +49,7 @@
                     </select>
                 </label>
                 <label>
-                    <span>Resolution (long side)</span>
+                    <span>Resolution (width)</span>
                     <select name="input-stream_constraints">
                         <option value="320x240">320px</option>
                         <option selected="selected" value="640x480">640px</option>
@@ -88,6 +88,14 @@
                     <select name="input-stream_constraints" id="deviceSelection">
                     </select>
                 </label>
+                <label style="display: none">
+                    <span>Zoom</span>
+                    <select name="settings_zoom"></select>
+                </label>
+                <label style="display: none">
+                    <span>Torch</span>
+                    <input type="checkbox" name="settings_torch" />
+                </label>
             </fieldset>
         </div>
       <div id="result_strip">
diff --git a/example/live_w_locator.js b/example/live_w_locator.js
index f08b0d1..60a2316 100644
--- a/example/live_w_locator.js
+++ b/example/live_w_locator.js
@@ -31,12 +31,58 @@ $(function() {
                 }
                 //Quagga.registerResultCollector(resultCollector);
                 App.attachListeners();
+                App.checkCapabilities();
                 Quagga.start();
             });
         },
         handleError: function(err) {
             console.log(err);
         },
+        checkCapabilities: function() {
+            var track = Quagga.CameraAccess.getActiveTrack();
+            var capabilities = {};
+            if (typeof track.getCapabilities === 'function') {
+                capabilities = track.getCapabilities();
+            }
+            this.applySettingsVisibility('zoom', capabilities.zoom);
+            this.applySettingsVisibility('torch', capabilities.torch);
+        },
+        updateOptionsForMediaRange: function(node, range) {
+            console.log('updateOptionsForMediaRange', node, range);
+            var NUM_STEPS = 6;
+            var stepSize = (range.max - range.min) / NUM_STEPS;
+            var option;
+            var value;
+            while (node.firstChild) {
+                node.removeChild(node.firstChild);
+            }
+            for (var i = 0; i <= NUM_STEPS; i++) {
+                value = range.min + (stepSize * i);
+                option = document.createElement('option');
+                option.value = value;
+                option.innerHTML = value;
+                node.appendChild(option);
+            }
+        },
+        applySettingsVisibility: function(setting, capability) {
+            // depending on type of capability
+            if (typeof capability === 'boolean') {
+                var node = document.querySelector('input[name="settings_' + setting + '"]');
+                if (node) {
+                    node.parentNode.style.display = capability ? 'block' : 'none';
+                }
+                return;
+            }
+            if (window.MediaSettingsRange && capability instanceof window.MediaSettingsRange) {
+                var node = document.querySelector('select[name="settings_' + setting + '"]');
+                if (node) {
+                    this.updateOptionsForMediaRange(node, capability);
+                    node.parentNode.style.display = 'block';
+                }
+                return;
+            }
+            node.parentNode.style.display = 'none';
+        },
         initCameraSelection: function(){
             var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
 
@@ -116,6 +162,17 @@ $(function() {
             $(".controls").off("click", "button.stop");
             $(".controls .reader-config-group").off("change", "input, select");
         },
+        applySetting: function(setting, value) {
+            var track = Quagga.CameraAccess.getActiveTrack();
+            if (track && typeof track.getCapabilities === 'function') {
+                switch (setting) {
+                case 'zoom':
+                    return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
+                case 'torch':
+                    return track.applyConstraints({advanced: [{torch: !!value}]});
+                }
+            }
+        },
         setState: function(path, value) {
             var self = this;
 
@@ -123,6 +180,10 @@ $(function() {
                 value = self._accessByPath(self.inputMapper, path)(value);
             }
 
+            if (path.startsWith('settings.')) {
+                var setting = path.substring(9);
+                return self.applySetting(setting, value);
+            }
             self._accessByPath(self.state, path, value);
 
             console.log(JSON.stringify(self.state));