1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import { getById, writeError, writeInfo, a, div } from "/common.module.js";
// regexr.com/2rj36
const url_like_regex =
/^[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?$/i;
///https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
function arraysEqual(a, b) {
if (a === b) return true;
if (a == null || b == null) return false;
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) return false;
}
return true;
}
function logQRValue(value) {
if (URL.canParse(value)) {
writeInfo(div(a(new URL(url).href, value)));
} else if (url_like_regex.test(value)) {
// Not a true URL but close enough for me to create an anchor tag.
if (!value.startsWith("http://") && !value.startsWith("https://")) {
value = "https://" + value;
}
writeInfo(div(a(value, value)));
} else {
writeInfo(value);
}
}
export function onLoad() {
// check compatibility
if (!("BarcodeDetector" in globalThis)) {
writeError(
"Barcode Detector is not supported by this browser. Make sure Shape Detection API is turned on.",
);
} else {
writeInfo("Barcode Detector supported!");
// create new detector
const barcodeDetector = new BarcodeDetector({
formats: ["qr_code"],
});
const initBarcodescan = (stream) => {
writeInfo("Starting scanner...");
let lastbarcodes = [];
setInterval(() => {
barcodeDetector
.detect(stream)
.then((barcodes) => {
if (barcodes.length === 0) {
} else {
const values = barcodes.map(
(barcode) => barcode.rawValue,
);
if (arraysEqual(values, lastbarcodes)) {
return;
}
values.forEach(logQRValue);
lastbarcodes = values;
}
})
.catch((err) => {
writeError(err);
});
}, 1000);
};
const video = getById("video");
video.setAttribute("playsinline", "");
video.setAttribute("autoplay", "");
video.setAttribute("muted", "");
video.style.width = "100%";
// video.style.height = "100%";
/* Setting up the constraint */
const facingMode = "environment"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)
const constraints = {
audio: false,
video: {
facingMode: facingMode,
},
};
/* Stream it to video element */
navigator.mediaDevices
.getUserMedia(constraints)
.then(function success(stream) {
video.srcObject = stream;
})
.finally(() => {
writeInfo("Initialized video stream");
initBarcodescan(video);
});
}
}
|
