title: How to add live camera scan with "react-qr-reader" in React App?
body: <p>Hi I was trying to make a web qr scanner with next js. but I am not understanding how to take live video to scan a qr code.</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import dynamic from &quot;next/dynamic&quot;;
  const QrReader = dynamic(
    () =&gt; import(&quot;react-qr-reader&quot;).then((mod) =&gt; mod.QrReader),
    { ssr: false }
  );
  class Index extends Component {
    state = {
      result: &quot;No result&quot;,
    };
  
    handleScan = (data) =&gt; {
      if (data) {
        this.setState({
          result: data,
        });
      }
    };
    handleError = (err) =&gt; {
      console.error(err);
    };
    render() {
      return (
        &lt;div&gt;
          &lt;QrReader
            delay={300}
            onError={this.handleError}
            onScan={this.handleScan}
            style={{ width: &quot;100%&quot; }}
          /&gt;
          &lt;p&gt;{this.state.result}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Index;
  </code></pre>
  <p>how can I add a live camera option to get scan from webcam.</p>