Linked config-view to scanner

example/sandbox/src/components/App.js

@@ -12,11 +12,50 @@ import Scanner from './Scanner';
 import ScanIcon from './ScanIcon';
 import ConfigView from './ConfigView';
 
+const cleanConfig = config => {
+    if (typeof config.inputStream.constraints.deviceId === 'number') {
+        config.inputStream.constraints.deviceId = null;
+    }
+    return config;
+};
+
 export default class App extends React.Component {
     state = {
         drawerOpen: false,
         scanning: false,
         currentView: 'root',
+        config: {
+            frequency: 5,
+            numOfWorkers: 2,
+            locate: true,
+            inputStream: {
+                name: "Live",
+                type: "LiveStream",
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    deviceId: 0,
+                    facingMode: "environment",
+                },
+                area: {
+                    top: "0%",
+                    right: "0%",
+                    left: "0%",
+                    bottom: "0%",
+                },
+            },
+            decoder: {
+                readers: [
+                    'ean_reader',
+                    'code_39_reader',
+                    'code_128_reader',
+                ],
+            },
+            locator: {
+                halfSample: true,
+                patchSize: "medium",
+            },
+        },
         scannedCodes: [{
             codeResult: {
                 code: "FANAVF1461710",
@@ -59,6 +98,11 @@ export default class App extends React.Component {
         });
     }
 
+    _handleConfigChange = config => {
+        this.setState({config: cleanConfig(config)});
+        console.log(config);
+    }
+
     render() {
         return (
             <div>
@@ -67,7 +111,7 @@ export default class App extends React.Component {
                     open={this.state.drawerOpen}
                     onRequestChange={this._onRequestChange}
                 >
-                    <ConfigView />
+                    <ConfigView config={this.state.config} onChange={this._handleConfigChange} />
                 </Drawer>
                 <AppBar
                     style={{position: 'fixed', top: '0px'}}
@@ -96,7 +140,10 @@ export default class App extends React.Component {
                     contentStyle={{width: '95%', maxWidth: '95%', height: '95%', maxHeight: '95%'}}
                     open={this.state.scanning}
                 >
-                    <Scanner onDetected={this._handleResult} onCancel={this._stopScanning} />
+                    <Scanner
+                        config={this.state.config}
+                        onDetected={this._handleResult}
+                        onCancel={this._stopScanning} />
                 </Dialog>
                 <div style={{paddingTop: '64px'}}>
                     {this.state.currentView === 'root' && this.state.scannedCodes.map((scannedCode, i) => (

example/sandbox/src/components/ConfigOption.js

@@ -2,22 +2,31 @@ import React from 'react';
 
 export default (Component) => (class ConfigOption extends React.Component {
     static propTypes = {
-        option: React.PropTypes.string.isRequired,
+        path: React.PropTypes.array.isRequired,
         onChange: React.PropTypes.func,
+        onToggle: React.PropTypes.func,
     };
 
     _handleChange = (event, key, payload) => {
-        this.props.onChange(event, key, payload, this.props.option);
+        this.props.onChange(event, key, payload, this.props.path);
+    }
+
+    _handleToggle = (event, value) => {
+        this.props.onToggle(event, value, this.props.path);
     }
 
     render() {
         const {
-            option,
+            path,
             onChange,
+            onToggle,
             ...rest,
         } = this.props;
-        return (
+        if (onChange) {
-            <Component {...rest} onChange={this._handleChange} />
+            return <Component {...rest} onChange={this._handleChange} />;
-        );
+        } else if (onToggle) {
+            return <Component {...rest} onToggle={this._handleToggle} />;
+        }
+        return null;
     }
 });

example/sandbox/src/components/ConfigView.js

@@ -6,68 +6,116 @@ import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import createConfigOption from './ConfigOption';
 
-function generateItems(keyValuePairs) {
+let configSections = [{
-    return keyValuePairs.map(([value, label]) => (
+    name: "Constraints",
-        <MenuItem key={value} value={value} primaryText={label} />
+    path: ["inputStream", "constraints"],
-    ));
+    options: {
-}
+        width: [[640, "640px"], [800, "800px"], [1280, "1280px"], [1920, "1920px"]],
-
+        height: [[480, "480px"], [600, "600px"], [720, "720px"], [1080, "1080px"]],
-const availableReaders = [
+        facingMode: [["user", "user"], ["environment", "environment"]],
-    ['ean_reader', "EAN-13", true],
+        aspectRatio: [[1, '1/1'], [4 / 3, '4/3'], [16 / 9, '16/9'], [21 / 9, '21/9']],
-    ['ean_8_reader', "EAN-8"],
+        deviceId: [],
-    ["upc_e_reader", "UPC-E"],
+    },
-    ["code_39_reader", "CODE 39", true],
+}, {
-    ["codabar_reader", "Codabar"],
+    name: "General",
-    ["code_128_reader", "CODE 128", true],
+    path: [],
-    ["i2of5_reader", "ITF", true],
+    options: {
-];
+        locate: true,
-
+        numOfWorkers: [[0, "0"], [1, "1"], [2, "2"], [4, "4"], [8, "8"]],
-let configOptions = {
+        frequency: [[0, "full"], [1, "1Hz"], [2, "2Hz"], [5, "5Hz"],
-    width: [[640, "640px"], [800, "800px"], [1280, "1280px"], [1920, "1920px"]],
+                    [10, "10Hz"], [15, "15Hz"], [20, "20Hz"]],
-    height: [[480, "480px"], [600, "600px"], [720, "720px"], [1080, "1080px"]],
+    },
-    facingMode: [["user", "user"], ["environment", "environment"]],
+}, {
-    aspectRatio: [[1, '1/1'], [4 / 3, '4/3'], [16 / 9, '16/9'], [21 / 9, '21/9']],
+    name: "Reader",
-    deviceId: [],
+    path: ["decoder", "readers"],
-};
+    options: {
-
+        ean_reader: false,
-const generalOptions = {
+        ean_8_reader: false,
-    frequency: [[0, "full"], [1, "1Hz"], [2, "2Hz"], [5, "5Hz"],
+        upc_e_reader: false,
-                [10, "10Hz"], [15, "15Hz"], [20, "20Hz"]],
+        code_39_reader: false,
-    numOfWorkers: [[0, "0"], [1, "1"], [2, "2"], [4, "4"], [8, "8"]],
+        codabar_reader: false,
-};
+        code_128_reader: false,
-
+        i2of5_reader: false,
-let items = Object.keys(configOptions).reduce((result, option) => ({
+    },
-    ...result,
+}, {
-    [option]: generateItems(configOptions[option]),
+    name: "Locator",
-}), {});
+    path: ["locator"],
-
+    options: {
-let generalItems = Object.keys(generalOptions).reduce((result, option) => ({
+        halfSample: true,
-    ...result,
+        patchSize: [
-    [option]: generateItems(generalOptions[option]),
+            ["x-small", "x-small"],
-}), {});
+            ["small", "small"],
+            ["medium", "medium"],
+            ["large", "large"],
+            ["x-large", "x-large"],
+        ],
+    },
+}];
 
 const selectStyle = {
 };
+
 const selectedItemStyle = {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
 };
 
+const reducer = function reduce(state, path, value) {
+    if (path.length === 1 && typeof value === 'boolean' && Array.isArray(state)) {
+        const index = state.indexOf(path[0]);
+        if (index !== -1 && value || index === -1 && !value) {
+            return state;
+        } else if (index !== -1 && !value) {
+            const newArray = state.slice();
+            newArray.splice(index, 1);
+            return newArray;
+        } else {
+            return state.concat([path[0]]);
+        }
+    }
+    if (path.length === 0) {
+        return value;
+    }
+    const [part, ...rest] = path;
+    return Object.assign({}, state, {[part]: reduce(state[part], rest, value)});
+};
+
+const get = function get(object, path) {
+    if (Array.isArray(object) && (typeof path[0] === 'string')) {
+        return object.indexOf(path[0]) !== -1;
+    }
+    if (path.length === 0) {
+        return object;
+    }
+    const [part, ...rest] = path;
+    return get(object[part], rest);
+};
+
+const getConfigByPath = function(object, path) {
+    return get(object, ['config'].concat(path));
+};
+
 const SelectConfigOption = createConfigOption(SelectField);
+const ToggleConfigOption = createConfigOption(Toggle);
 
 export default class ConfigView extends React.Component {
-    state = {
+    static propTypes = {
-        devicesFetched: false,
+        onChange: React.PropTypes.func,
-        numOfWorkers: 2,
+        config: React.PropTypes.object.isRequired,
-        frequency: 0,
-        ...Object
-            .keys(configOptions)
-            .reduce((result, option) => ({...result, [option]: (configOptions[option][0] || [null])[0]}), {}),
     };
 
-    handleChange = (event, index, value, category) => {
+    state = {
-        this.setState({[category]: value});
+        devicesFetched: false,
+    };
+
+    handleChange = (event, index, value, path) => {
+        const newState = reducer(this.props.config, path, value);
+        this.props.onChange(newState);
+    }
+
+    handleToggle = (event, value, path) => {
+        return this.handleChange(event, 0, value, path);
     }
 
     componentWillMount() {
@@ -80,68 +128,66 @@ export default class ConfigView extends React.Component {
                         videoDevice.deviceId,
                         videoDevice.label,
                     ]));
-                configOptions = {
+                const constraints = configSections
-                    ...configOptions,
+                    .map((section, index) => (section.name === "Constraints" ? {section, index} : null))
-                    deviceId: videoDevices,
+                    .filter(sectionIndex => !!sectionIndex)[0];
-                };
+                configSections = configSections.slice();
-                items = {
+                constraints.section = {
-                    ...items,
+                    ...constraints.section,
-                    deviceId: generateItems(configOptions.deviceId),
+                    options: {
+                        ...constraints.section.options,
+                        deviceId: [[0, "no preference"]].concat(videoDevices),
+                    },
                 };
+                configSections[constraints.index] = constraints.section;
                 this.setState({devicesFetched: true});
             });
     }
+
     render() {
-        return (
+        return (<div>{
-          <div>
+            configSections.map(section => (
-            <Subheader>Constraints</Subheader>
+                <List>
-            <div style={{paddingLeft: 16, paddingRight: 16}}>
+                    <Subheader>{section.name}</Subheader>
-            {Object.keys(items).map(option => (
+                    {Object.keys(section.options).map(option => {
-                <SelectConfigOption
+                        const path = section.path.concat([option]);
-                    fullWidth={true}
+                        if (typeof section.options[option] === 'boolean') {
-                    key={option}
+                            return (
-                    option={option}
+                                <ListItem
-                    style={selectStyle}
+                                    key={option}
-                    labelStyle={selectedItemStyle}
+                                    path={path}
-                    value={this.state[option]}
+                                    primaryText={option}
-                    onChange={this.handleChange}
+                                    rightToggle={
-                  floatingLabelText={option}
+                                        <ToggleConfigOption
-                >
+                                            onToggle={this.handleToggle}
-                  {items[option]}
+                                            path={path}
-                </SelectConfigOption>
+                                            toggled={!!getConfigByPath(this.props, path)} />
-            ))}
+                                    }
-          </div>
+                                />
-          <List>
+                            );
-            <Subheader>General</Subheader>
+                        } else {
-            <ListItem primaryText="locate" secondaryText="Detect Location" rightToggle={<Toggle />} />
+                            return (
-            <div style={{paddingLeft: 16, paddingRight: 16}}>
+                                <div style={{paddingLeft: 16, paddingRight: 16}}>
-                {Object.keys(generalItems).map(option => (
+                                    <SelectConfigOption
-                    <SelectConfigOption
+                                        fullWidth={true}
-                        fullWidth={true}
+                                        key={option}
-                        key={option}
+                                        path={path}
-                        option={option}
+                                        style={selectStyle}
-                        style={selectStyle}
+                                        labelStyle={selectedItemStyle}
-                        labelStyle={selectedItemStyle}
+                                        value={getConfigByPath(this.props, path)}
-                        value={this.state[option]}
+                                        onChange={this.handleChange}
-                        onChange={this.handleChange}
+                                        floatingLabelText={option}
-                      floatingLabelText={option}
+                                    >
-                    >
+                                    {section.options[option].map(([value, label]) => (
-                      {generalItems[option]}
+                                            <MenuItem key={value} value={value} primaryText={label} />
-                    </SelectConfigOption>
+                                    ))}
-                ))}
+                                    </SelectConfigOption>
-            </div>
+                                </div>
-          </List>
+                            );
-          <List>
+                        }
-            <Subheader>Readers</Subheader>
+                    })}
-            {availableReaders.map(([reader, label, enabled]) => (
+                </List>
-                <ListItem
+            ))
-                    key={reader}
+        }</div>);
-                    primaryText={label}
-                    rightToggle={<Toggle defaultToggled={enabled ? enabled : false} />}
-                />
-            ))}
-          </List>
-        </div>
-        );
     }
 };

example/sandbox/src/components/Scanner.js

@@ -5,21 +5,16 @@ export default class Scanner extends React.Component {
     static propTypes = {
         onDetected: React.PropTypes.func,
         onCancel: React.PropTypes.func,
+        config: React.PropTypes.object.isRequired,
     };
 
     constructor(props) {
         super(props);
         this._scanner = Quagga
-            .decoder({readers: ['code_128_reader']})
+            .config(props.config)
-            .locator({patchSize: 'medium'})
-            .throttle(500)
             .fromSource({
+                ...this.props.config.inputStream,
                 target: '.overlay__content',
-                constraints: {
-                    width: 800,
-                    height: 600,
-                    facingMode: "environment",
-                },
             });
     }
 

src/input/camera_access.js

@@ -1,4 +1,4 @@
-import {merge, pick} from 'lodash';
+import {merge, pick, omit} from 'lodash';
 
 var streamRef;
 
@@ -64,7 +64,14 @@ function deprecatedConstraints(videoConstraints) {
 }
 
 function applyCameraFacing(facing, constraints) {
-    if (typeof constraints.video.deviceId !== 'undefined' || !facing){
+    if (typeof constraints.video.deviceId === 'string' && constraints.video.deviceId.length > 0) {
+        return Promise.resolve({
+            ...constraints,
+            video: {
+                ...omit(constraints.video, "facingMode")
+            }
+        });
+    } else if (!facing) {
         return Promise.resolve(constraints);
     }
     if ( typeof MediaStreamTrack !== 'undefined' &&

src/quagga.js

@@ -8,8 +8,7 @@ import Config from './config/config';
 import {merge} from 'lodash';
 import {createConfigFromSource} from './input/config_factory';
 
-function fromSource(config, source, inputConfig = {}) {
+function fromConfig(config) {
-    config = createConfigFromSource(config, inputConfig, source);
     const scanner = createScanner();
     return {
         addEventListener(eventType, cb) {
@@ -73,6 +72,11 @@ function fromSource(config, source, inputConfig = {}) {
     };
 }
 
+function fromSource(config, source, inputConfig = {}) {
+    config = createConfigFromSource(config, inputConfig, source);
+    return fromConfig(config);
+}
+
 const defaultScanner = createScanner();
 
 function setConfig(configuration = {}, key, config = {}) {
@@ -85,6 +89,9 @@ function createApi(configuration = Config) {
         fromSource(src, inputConfig) {
             return fromSource(configuration, src, inputConfig);
         },
+        fromConfig(conf) {
+            return createApi(merge({}, configuration, conf));
+        },
         decoder(conf) {
             return setConfig(configuration, "decoder", conf);
         },

src/scanner.js

@@ -296,7 +296,7 @@ function createScanner() {
 
     function startContinuousUpdate() {
         var next = null,
-            delay = 1000 / (_config.frequency || 60);
+            delay = 1000 / (_config.frequency === 0 ? 60 : (_config.frequency || 60));
 
         _stopped = false;
         (function frame(timestamp) {