Minor changes to QRcode
<html>
<head>
<meta charset="UTF-8">
<title>jsQR</title>
<script src="dist/jsQR.js"></script>
</head>
<body style="text-align:center;">
<h1 style="margin: 10px;">jsQR</h1>
<div>
<div class="select">
<label for="audioSource">Audio source: </label><select id="audioSource"></select>
</div>
<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>
<button id="start" onclick="btClick()">start </button>
<video id="video" autoplay="true" style="display:none;"></video>
<canvas id="canvas" style="width:640px; height:480px;"></canvas>
<div id="code"></div>
</div>
<script>
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
var startButton = document.querySelector ('startButton');
navigator.mediaDevices.enumerateDevices().then(gotDevices);
//window.btoa(window.encodeURIComponent(str))//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="
//window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
function btClick(){
getStream();
}
audioSelect.onchange = getStream;
videoSelect.onchange = getStream;
function handleError(error) {
console.log('Error: ', error);
}
function gotDevices(deviceInfos) {
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
var option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label ||
'microphone ' + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || 'camera ' +
(videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Found ome other kind of source/device: ', deviceInfo);
}
}
}
function getStream() {
if (window.stream) {
window.stream.getTracks().forEach(function (track) {
track.stop();
});
}else{
var constraints = {
audio: {
optional: [{
sourceId: audioSelect.value
}]
},
video: {
optional: [{
sourceId: videoSelect.value
}]
}
};
console.log(constraints);
navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback);
}
}
window.onerror = function (e, l, s) {
alert(e + l + s);
}
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = parseInt(canvas.style.width);
var height = parseInt(canvas.style.height);
canvas.width = width;
canvas.height = height;
//navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function successCallback(stream) {
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = stream;
}
tick();
}
function errorCallback() {}
//navigator.getUserMedia({video: true}, successCallback, errorCallback);
//requestAnimationFrame(tick);
function tick() {
requestAnimationFrame(tick);
if (video.readyState === video.HAVE_ENOUGH_DATA) {
// Load the video onto the canvas
context.drawImage(video, 0, 0, width, height);
// Load the image data from the canvas
var imageData = context.getImageData(0, 0, width, height);
var decoded = jsQR.decodeQRFromImage(imageData.data, imageData.width, imageData.height);
if (decoded) {
document.getElementById("code").innerHTML = document.getElementById("code").innerHTML + '<br>' + decoded;
}
}
}
</script>
</body>
</html>