QR code is an image on client side. It is capturing by camera and sends to the server to read its data. So this work can be divided in to three parts.
- Capture image on client side
- Transfer image data to server
- Analyse image data on server and send output to client
Capture Image Using JavaScript & HTML5
HTML5 to the rescue. It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. Geolocation (GPS), the Orientation API(accelerometer), WebGL (GPU), and the Web Audio API (audio hardware) are perfect examples. These features are ridiculously powerful, exposing high level JavaScript APIs that sit on top of the system’s underlying hardware capabilities.
Taking screenshots
The <canvas> API’s ctx.drawImage(video, 0, 0) method makes it trivial to draw<video> frames to <canvas>. Of course, now that we have video input via getUserMedia(), it’s just as easy to create a photo booth application with realtime video:
HTML5
JavaScript
function handleError(error) {
console.error(‘navigator.getUserMedia error: ‘, error);
}
const constraints = {video: true};(function() {
const captureVideoButton =
document.querySelector(‘#screenshot .capture-button’);
const screenshotButton = document.querySelector(‘#screenshot-button’);const img = document.querySelector(‘#screenshot img’);
const video = document.querySelector(‘#screenshot video’);const canvas = document.createElement(‘canvas’);
captureVideoButton.onclick = function() {
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
};screenshotButton.onclick = video.onclick = function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext(‘2d’).drawImage(video, 0, 0);
// Other browsers will fall back to image/png
img.src = canvas.toDataURL(‘image/png’);//alert(“save image”);
};function handleSuccess(stream) {
screenshotButton.disabled = false;
video.srcObject = stream;
}
})();
Full code: https://github.com/shehanshaman/Assignment/blob/master/tutorial/Capturing%20video.html
Transfer Image Data to server from client
Captured image saved on browser dynamically(local).
Client
img.src has base64 encoded data in the format of
data:image/jpeg;base64,/9j/4AAQSkZJRgABA...
So you need to get rid of the mime type and encoding information at the
front.
var contents = img.src.split(',')[1];
Now you can send this base64 encoded data to server.
var xhr = new XMLHttpRequest(); xhr.open("POST", "http://localhost:3000/identify/qr", true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ value: contents }));
Server
Since you’re receiving base64 encoded data, you can convert it buffer and write to file:
fs.writeFile('public/images/tmp/qr.jpeg',JSON.stringify(req.body.value), 'base64' , function (err) { if (err) throw err; console.log('Saved!'); })
Scan image data and get output
Installation
npm install --save jimp
npm install qrcode-reader
var Jimp = require(“jimp”);
var fs = require(‘fs’);
var QrCode = require(‘qrcode-reader’);var buffer = fs.readFileSync(‘qrcode.jpg’);
Jimp.read(buffer, function(err, image) {
if (err) {
console.error(err);
// TODO handle error
}
var qr = new QrCode();
qr.callback = function(err, value) {
if (err) {
console.error(err);
// TODO handle error
}
console.log(value.result);
console.log(value);
};
qr.decode(image.bitmap);
});
Full code: https://github.com/shehanshaman/Assignment/blob/master/tutorial/readqr.js
Shehan Perera 