title: quagga-react barcode scanner
body: <p>Essentially I get the demo to work save for the actual scanning. i.e. camera is on etc. Not sure what I am missing...</p>
  
  <p>Here is my code. </p>
  
  <p>App.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Scanner from './Scanner';
  import Result from './Result';
  
  export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        scanning: false,
        results: [],
      };
      this._scan = this._scan.bind(this);
      this._onDetected = this._onDetected.bind(this);
    }
  
    _scan() {
      this.setState({ scanning: !this.state.scanning });
    }
  
    _onDetected(result) {
      this.setState({ results: this.state.results.concat([result]) });
    }
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this._scan}&gt;{this.state.scanning ? 'Stop' : 'Start'}&lt;/button&gt;
          &lt;ul className="results"&gt;
            {this.state.results.map(result =&gt; {
              &lt;Result key={result.codeResult.code} result={result} /&gt;;
            })}
          &lt;/ul&gt;
          {this.state.scanning ? &lt;Scanner onDetected={this.state._onDetected} /&gt; : null}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Scanner.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Quagga from 'quagga';
  
  export default class Scanner extends Component {
      constructor(props) {
          super(props);
          this._onDetected = this._onDetected.bind(this);
      }
  
      componentDidMount() {
          Quagga.init(
              {
                  inputStream: {
                      type: 'LiveStream',
                      constraints: {
                          width: 640,
                          height: 480,
                          facingMode: 'environment', // or user
                      },
                  },
                  locator: {
                      patchSize: 'medium',
                      halfSample: true,
                  },
                  numOfWorkers: 2,
                  decoder: {
                      readers: ['upc_reader'],
                  },
                  locate: true,
              },
              function(err) {
                  if (err) {
                      return console.log(err);
                  }
                  Quagga.start();
              }
          );
          Quagga.onDetected(this._onDetected);
      }
  
      componentWillUnmount() {
          Quagga.offDetected(this._onDetected);
      }
  
      _onDetected(result) {
          this.props.onDetected(result);
      }
  
      render() {
          return &lt;div id="interactive" className="viewport" /&gt;;
      }
  }
  </code></pre>
  
  <p>Result.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Result extends Component {
      render() {
          const result = this.props.result;
  
          if (!result) {
              return null;
          }
          return (
              &lt;li&gt;
                  {result.codeResult.code} [{result.codeResult.format}]
              &lt;/li&gt;
          );
      }
  }
  </code></pre>
  
  <p>Thanks my friends!</p>