Scan QR Code Via Webcam In AngularJS

Posted By : S. Ajit | 11-Jun-2017

angularjs

You can scan a QR Code via your webcam very easily. You need to add two javascript file from this github repository:

https://github.com/dwa012/html5-qrcode

Open the above link in your browser and open lib folder in this repository, you will find html5-qrcode.min.js and jsqrcode-combined.min.js

Download these two javascript file and add to your HTML file.

<script src="html5-qrcode.min.js"></script>
<script src="jsqrcode-combined.min.js"></script>

Now add this line inside body tag in your HTML file. Webcam video will be displayed in this div.

<div id="reader" style="width:500px;height:340px"></div>

In your controller copy-paste below written line:

angular.element(document).ready(function() {
    angular.element('#reader').html5_qrcode(function(data) { // start webcam
          console.log(data); // print QR code content
          angular.element("#reader").html5_qrcode_stop(); // stop webcam 
        },
        function(error) {
          console.log(error);
        },
        function(videoError) {
          console.log(videoError);
        }
    );
});