Instascan is a real-time webcam-driven HTML5 QR code scanner. It is very easy to use. Recently I developed a simple mobile application using HTML5, there I need a QR scanner I use Instascan a lightweight JavaScript plugin.
How to install Instascan plugin into a web project?
There you need to take care of a few things If you want to install any web-based QR Scanner on your mobile device. You must use the HTTPS protocol to access the mobile camera to scan QR code just like web.whatsapp.com.
I am going to create a simple and designed example that you can use anywhere you want. With the help of this example, you can scan any QR code with the help of a webcam or mobile device.
Remember, I am using bootstrap 4 in this example you can use any other framework as per your need.
Use below HTML5 tag to display your device camera on a web page. To design this tag I use some CSS.
<style>
#preview{
width:500px;
height: 500px;
margin:0px auto;
}
</style>
<video id="preview"></video>
To use the Instascan plugin download the latest release from here, or add the CDN link of this plugin into your project. In this example, I am using the CDN link.
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<script type="text/javascript">
var scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5, mirror: false });
scanner.addListener('scan',function(content){
alert(content);
//window.location.href=content;
});
Instascan.Camera.getCameras().then(function (cameras){
if(cameras.length>0){
scanner.start(cameras[0]);
$('[name="options"]').on('change',function(){
if($(this).val()==1){
if(cameras[0]!=""){
scanner.start(cameras[0]);
}else{
alert('No Front camera found!');
}
}else if($(this).val()==2){
if(cameras[1]!=""){
scanner.start(cameras[1]);
}else{
alert('No Back camera found!');
}
}
});
}else{
console.error('No cameras found.');
alert('No cameras found.');
}
}).catch(function(e){
console.error(e);
alert(e);
});
</script>
<div class="btn-group btn-group-toggle mb-5" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="1" autocomplete="off" checked> Front Camera
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" value="2" autocomplete="off"> Back Camera
</label>
</div>
All other options of the Instascan QR code reader are given below.
| Option | Default | Description |
| continuous | true | Whether to scan continuously for QR codes. If false, use a scanner.scan() to manually scan.
If true, the scanner emits the “scan” event when a QR code is scanned. Default true. |
| video | Video element ID get | The HTML element to use for the camera’s video preview. Must be a <video> element.
When the camera is active, this element will have the “active” CSS class, otherwise, it will have the “inactive” class. By default, an invisible element will be created to host the video.
document.getElementById(‘preview’) |
| mirror | true | Whether to horizontally mirror the video preview. This is helpful when trying to scan a QR code with a user-facing camera. Default true. |
| captureImage | false | Whether to include the scanned image data as part of the scan result. See the “scan” event for image format details.
Default false. |
| backgroundScan | true | It only applies to continuous mode. Whether to actively scan when the tab is not active.
When false, this reduces CPU usage when the tab is not active. Default true. |
| refractoryPeriod | 5000 | It only applies to continuous mode. The period, in milliseconds, before the same QR code will be recognized in succession. Default 5000 (5 seconds). |
| scanPeriod | 1 | It only applies to continuous mode. The period, in rendered frames, between scans. A lower scan period increases CPU usage but makes scan response faster.
Default 1 (i.e. analyze every frame). |