JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://webqr.com/llqrcode.js"></script>
<video autoplay></video>
<canvas id="qr-canvas"></canvas>
CSS
video{
display:none;
}
JavaScript
if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia("video", function(stream) {
var video = document.querySelector("video");
video.src = webkitURL.createObjectURL(stream);
var callback = function() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
console.dir(video);
var height = video.videoHeight,
width = video.videoWidth;
canvas.width = width;
canvas.height = height;
qrcode.callback = function(msg) {
alert(msg);
};
setInterval(function() {
ctx.drawImage(video, 0, 0, width, height);
try {
qrcode.decode();
} catch (x) {
}
}, 150);
};
video.addEventListener("play", callback, false);
});
}
else {
alert("No camera support :(\nTry Google Chrome Canary!");
}